SlideShare a Scribd company logo

Angle Forward with TypeScript

•Download as PPTX, PDF•
•
Jeremy Likness
Jeremy Likness

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.

1 of 7
Angle Forward with TypeScript MIGRATING NG1 TO NG2 Jeremy Likness (@JeremyLikness) Director,Application Development iVision http://bit.ly/ivisionappdev Blog http://bit.ly/coderblog
In the Next 20 Minutes … • WhyTypeScript? • Three Approaches to Upgrading and/or Migrating • Hands-on Example • Conclusion
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
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
Demo LET’S UPGRADE!
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
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?

More Related Content

Angle Forward with TypeScript

  • 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. In the Next 20 Minutes … • WhyTypeScript? • Three Approaches to Upgrading and/or Migrating • Hands-on Example • Conclusion
  • 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. 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
  • 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. 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?