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.

Angle Forward with TypeScript

2,762 views

Published on

Learn the three approaches to upgrading from Angular 1.x to Angular 2.0. In this presentation I discuss the benefits of TypeScript and go hands-on migrating an Angular 1 app to Angular 2 using ngUpgrade.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Angle Forward with TypeScript

  1. 1. Angle Forward with TypeScript MIGRATING NG1 TO NG2 Jeremy Likness (@JeremyLikness) Director,Application Development iVision http://bit.ly/ivisionappdev Blog http://bit.ly/coderblog
  2. 2. In the Next 20 Minutes … • WhyTypeScript? • Three Approaches to Upgrading and/or Migrating • Hands-on Example • Conclusion
  3. 3. Why TypeScript? • It’s what the Angular 2 team is using: http://typescriptlang.org/ • Makes the module question easy to answer (AMD, CommonJs, SystemJs, etc.) • Superset of JavaScript • Targets ES5, ES6/ES2015, etc. • Types, Interfaces, Classes, Modules, Function Definitions, Generics, Declarations and Decorators • Type Libraries /Visual Studio Code
  4. 4. Three Approaches to Upgrading/Migrating 1. Big Bang – all at once (upgrade case study: http://bit.ly/ngupgcase) 2. ngForward – tomorrow’s format, today 3. ngUpgrade – piecemeal or side-by-side * Note: lose $scope and $watch. Controller As if you please. Prepare Bootstrap Upgrade Downgrade Migrate
  5. 5. Demo LET’S UPGRADE!
  6. 6. Quick Reference • [service, factory, value, etc.] => provide and/or resolveAndCreate • Directives -> Directives or Components • Components have UI, directives may just be behavior • Controllers -> Components • Services -> Services • Filters -> Pipes
  7. 7. What’s next? • Full Upgrade Case Study: http://bit.ly/ngupgcase • Controller As: http://bit.ly/ngctrlas • Twitter: @JeremyLikness • Blog: http://bit.ly/coderblog • GitHub: https://github.com/JeremyLikness/ToDoNg1ToNg2 • Special Offer: Introduction to Angular 2 withTypeScript • http://bit.ly/ng2video • Promo Code LIKNESS-16 for free trial (no credit card required) • Reach out to me anytime! jlikness@ivision.com • QUESTIONS?

×