Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob...
Transcript of Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob...
Practical TypeScript with AngularJS
Typescript 102
Bob GoodearlRGood Software
www.RGoodSoftware.com
Bob GermanBlueMetal
www.bluemetal.com
Boston Code Camp 25 - Thanks to our Sponsors!
• Platinum
• Gold
• Silver
• Bronze
• In-Kind Donations
Bob German
Bob Goodearl
• Blog: http://bob1german.com/
• Linked In: https://www.linkedin.com/in/bgerman
• Twitter: @Bob1German
• Email: [email protected]
• Website: http://www.rgoodsoftware.com
• Linked In: https://www.linkedin.com/in/bgoodearl
• Email: [email protected]
Presenters
Agenda
• TypeScript Widget• Modules
• Controllers
• Services
• TypeScript Definitions for REST Calls
• TypeScript SPA with ASP.NET MVC• Anatomy of an AngularJS/MVC/TypeScript web app
Setup steps:
• Install VS Code
• Install Node (https://nodejs.org/en/download)
• npm install –g typescript
• Ensure no old versions of tsc are on your path; VS adds:C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\
• In VS Code create tsconfig.json in the root of your folder{
"compilerOptions": { "target": "es5“,"sourceMap": true
}}
• Use Ctrl+Shift+B to build – first time click the error to define a default task runnerEdit task runner and un-comment the 2nd
example in the default
• npm install –g http-server(In a command prompt, run http-server and browse to http://localhost:8080/)
VS Code Environment
Setup steps:
• Install Visual Studio
• For VS2012 or 2013, install TypeScript extension
• Build and debug the usual way
• Consider WebEssentials for side by side TypeScript and JavaScript view(does not work in VS2015)
Visual Studio Environment
• Commonly used on the Internet called ”Web Widgets”, ”Plugins”, ”Embeds”, etc.
• It’s just a clever piece of HTML andJavascript that acts like a web part
• Often deployed by authors/end usersseperately from the hosting application
• Very handy in SharePoint and other contentmanagement systems
What is a widget?
What makes a good widget?
1ISOLATED – so they won’t interfere with otherwidgets or the rest of the page
Can you run multiple copies of the widget on a page?
2EFFICIENT – so they load quickly Does the page get noticeably slower as you add
widgets?
3SELF-CONTAINED – so they’re easy to reuse Does the widget work without special page elements
such as element ID’s, scripts, and CSS references?
4MODERN – so they’re easier to write and maintain Is the widget written in a modern JavaScript
framework such as AngularJS or Knockout?
JavaScript Library allows you to run multiple Angular* apps on a page …
<div> <!-- ng-app=“HelloApp” --><div ng-controller="main as vm">
<h1>Hello{{vm.space()}}{{vm.name}}!</h1>Who should I say hello to?<input type="text" ng-model="vm.name" />
</div><!-- Widget Wrangler loads scripts and boots the app --><script type="text/javascript" src="pnp-ww.js“
ww-appName="HelloApp“ww-appType="Angular“ww-appScripts='[{"src": “~/angular.min.js", "priority":0},
{"src": “~/script.js", "priority":1}]'></script>
</div>
Widget Wrangler
* Also works with any JavaScript framework – or none at all
demo
AngularJS Widget in TypeScript
• Model
• Controller
• Service
• TypeScript Definitions for REST services
demo
AngularJS Widget in TypeScript
• Model
• Controller
• Service
• TypeScript Definitions for REST services
Anatomy of an AngularJS/MVC/TypeScript web app
• Why Integrate AngularJS and MVC?
• Why add TypeScript?
• Open source code you can experiment with• http://bit.ly/MvcNgTsDemo
• Lessons Learned
demo
MVC5NgTsDemo
Generating TypeScript definitions
• Experiments with TypeLitehttp://bit.ly/1WW9ckN
• Other options (not yet explored)• Typewriter extension for Visual Studio
http://bit.ly/VsX-Typewriter
Resources
Session Materialsand Code Samples
• http://bit.ly/bcc25ts102
TypeScript Playground• http://bit.ly/TSPlayground
TS Def’ns from JSON
• http://json2ts.com/
An Insight company
Thank you.
Bob Goodearl
Bob German