Typescript 102 angular and type script

Typescript 102 angular and type script

• 1.
  Practical TypeScript withAngularJS Typescript 102 Bob Goodearl RGood Software www.RGoodSoftware.com Bob German BlueMetal www.bluemetal.com
• 2.
  Boston Code Camp25 - Thanks to our Sponsors! • Platinum • Gold • Silver • Bronze • In-Kind Donations
• 3.
  Bob German Bob Goodearl •Blog: http://bob1german.com/ • Linked In: https://www.linkedin.com/in/bgerman • Twitter: @Bob1German • Email: bobg@bluemetal.com • Website: http://www.rgoodsoftware.com • Linked In: https://www.linkedin.com/in/bgoodearl • Email: bgoodearl@rgoodsoftware.com Presenters
• 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.
  Setup steps: • InstallVS 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 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.
  Setup steps: • InstallVisual 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.
  • Commonly usedon 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.
  What makes agood 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.
  JavaScript Library allowsyou 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
• 10.
  demo AngularJS Widget inTypeScript • Model • Controller • Service • TypeScript Definitions for REST services
• 12.
  demo AngularJS Widget inTypeScript • Model • Controller • Service • TypeScript Definitions for REST services
• 13.
  Anatomy of an AngularJS/MVC/TypeScriptweb app • Why Integrate AngularJS and MVC? • Why add TypeScript? • Open source code you can experiment with • http://bit.ly/MvcNgTsDemo • Lessons Learned
• 14.
  demo MVC5NgTsDemo
• 15.
  Generating TypeScript definitions •Experiments with TypeLite http://bit.ly/1WW9ckN • Other options (not yet explored) • Typewriter extension for Visual Studio http://bit.ly/VsX-Typewriter
• 16.
  Resources Session Materials and CodeSamples • http://bit.ly/bcc25ts102 TypeScript Playground • http://bit.ly/TSPlayground TS Def’ns from JSON • http://json2ts.com/
• 17.
  An Insight company Thankyou. Bob Goodearl Bob German