Typescript 102 angular and type script
Download as PPTX, PDF0 likes3,195 views
The document outlines a presentation on utilizing TypeScript with AngularJS, covering essential topics such as widget creation, modules, services, and the integration of TypeScript into ASP.NET MVC applications. It provides setup instructions for Visual Studio Code and Visual Studio, along with best practices for implementing efficient and modern web widgets. Additional resources and sample code links are included for further exploration and learning.
![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](https://image.slidesharecdn.com/typescript102-angularandtypescript-160405024331/85/Typescript-102-angular-and-type-script-9-320.jpg)
Typescript 102 angular and type script
- 1. Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software www.RGoodSoftware.com Bob German BlueMetal www.bluemetal.com
- 2. Boston Code Camp 25 - 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: [email protected] • Website: http://www.rgoodsoftware.com • Linked In: https://www.linkedin.com/in/bgoodearl • Email: [email protected] 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: • 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 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: • 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. • 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. 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. 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
- 10. demo AngularJS Widget in TypeScript • Model • Controller • Service • TypeScript Definitions for REST services
- 12. demo AngularJS Widget in TypeScript • Model • Controller • Service • TypeScript Definitions for REST services
- 13. 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
- 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 Code Samples • http://bit.ly/bcc25ts102 TypeScript Playground • http://bit.ly/TSPlayground TS Def’ns from JSON • http://json2ts.com/
- 17. An Insight company Thank you. Bob Goodearl Bob German
Editor's Notes
- #2: This intermediate level session will build on the earlier introduction to TypeScript by showing examples of TypeScript in action with AngularJS 1.x. Bob German will begin by showing how to build light-weight widgets with Angular and TypeScript that can be deployed almost anywhere. Then Bob Goodearl will show a more advanced example of TypeScript Single Page Applications with Angular and ASP.NET MVC. In order to take advantage of this session, it will be helpful to have a basic understanding of AngularJS and ASP.Net MVC.
- #14: Talk about: - Application Structure AngularJS routing Generating TypeScript definitions for your WebAPI JSON payloads Date Handling - Lessons Learned: - You don’t get type checking when you go through a non-Typescript framework – e.g. Angular promises - Debugging doesn’t always work as expected; generated variables get confused with their original names Show app first, then… Review app structure Type Safety -