Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typescript 102 angular and type script


Published on

Developing Angular 1.x applications with TypeScript, from Boston Code Camp 25. Presented by Bob Goodearl and Bob German.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Typescript 102 angular and type script

  1. 1. Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software Bob German BlueMetal
  2. 2. Boston Code Camp 25 - Thanks to our Sponsors! • Platinum • Gold • Silver • Bronze • In-Kind Donations
  3. 3. Bob German Bob Goodearl • Blog: • Linked In: • Twitter: @Bob1German • Email: • Website: • Linked In: • Email: Presenters
  4. 4. 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
  5. 5. Setup steps: • Install VS Code • Install Node ( • npm install –g typescript • Ensure no old versions of tsc are on your path; VS adds: C:Program Files (x86)Microsoft SDKsTypeScript1.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 runner Edit 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
  6. 6. 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
  7. 7. • Commonly used on the Internet called ”Web Widgets”, ”Plugins”, ”Embeds”, etc. • It’s just a clever piece of HTML and Javascript that acts like a web part • Often deployed by authors/end users seperately from the hosting application • Very handy in SharePoint and other content management systems What is a widget?
  8. 8. What makes a good widget? 1 ISOLATED – so they won’t interfere with other widgets or the rest of the page Can you run multiple copies of the widget on a page? 2 EFFICIENT – so they load quickly Does the page get noticeably slower as you add widgets? 3 SELF-CONTAINED – so they’re easy to reuse Does the widget work without special page elements such as element ID’s, scripts, and CSS references? 4 MODERN – so they’re easier to write and maintain Is the widget written in a modern JavaScript framework such as AngularJS or Knockout?
  9. 9. JavaScript Library allows you to run multiple Angular* apps on a page … <div> <!-- ng-app=“HelloApp” --> <div ng-controller="main as vm"> <h1>Hello{{}}{{}}!</h1> Who should I say hello to? <input type="text" ng-model="" /> </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
  10. 10. demo AngularJS Widget in TypeScript • Model • Controller • Service • TypeScript Definitions for REST services
  11. 11. demo AngularJS Widget in TypeScript • Model • Controller • Service • TypeScript Definitions for REST services
  12. 12. Anatomy of an AngularJS/MVC/TypeScript web app • Why Integrate AngularJS and MVC? • Why add TypeScript? • Open source code you can experiment with • • Lessons Learned
  13. 13. demo MVC5NgTsDemo
  14. 14. Generating TypeScript definitions • Experiments with TypeLite • Other options (not yet explored) • Typewriter extension for Visual Studio
  15. 15. Resources Session Materials and Code Samples • TypeScript Playground • TS Def’ns from JSON •
  16. 16. An Insight company Thank you. Bob Goodearl Bob German