SlideShare a Scribd company logo

Back to the ng2 Future

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

Learn how to upgrade Angular 1.x apps to Angular 2.0 with or without TypeScript using the ngUpgrade module.

Related slideshows

React UI Development: Introduction to "UI Component as API"
React UI Development: Introduction to "UI Component as API"React UI Development: Introduction to "UI Component as API"
React UI Development: Introduction to "UI Component as API"
 
Demand driven applications with om.next and react native
Demand driven applications with om.next and react nativeDemand driven applications with om.next and react native
Demand driven applications with om.next and react native
 
Why Everyone else writes bad code
Why Everyone else writes bad codeWhy Everyone else writes bad code
Why Everyone else writes bad code
 
1 of 15
Back to the ng2 Future @JEREMYLIKNESS
About iVision A privately held, IT consulting firm headquartered in Midtown, Atlanta. At iVision, we seek to understand our clients’ business first. We work with clients to architect, transform and support their technology — enabling them to realize their vision of a better tomorrow. Jeremy Likness| Director of App Dev https://github.com/JeremyLikness http://bit.ly/coderblog The iVision Difference  Engineering Expertise  White Glove Service  Delivery Assurance  Flexible Business Model  Proven Partner Ecosystem  Culture & People About iVision
Today’s Menu • Angular 1.x • $scope • Controller as • Components • Angular 2.x • TypeScript • ngForward • ngUpgrade • Q & A
DEMO THE FLAVORS OF NG1 AND PURE NG2 HTTPS://GITHUB.COM/JEREMYLIKNESS/BACK2NGFUTURE/
TypeScript • All JavaScript *is* TypeScript • Learn how to declare module definitions • Use a module loader • Convert to classes • Add annotations • Consider the Angular-CLI (http://bit.ly/ngclidocs)
DEMO TYPESCRIPT CODE
ngForward … or not
ngUpgrade WHEN “ALL OR NOTHING” WON’T CUT IT
Components: NG1 from the Top, then Children Switch NG1 NG1 NG2 NG2 NG1 NG1 NG2
Injectors: Up and Down, and All Around Source: https://angular.io/docs/
Steps • JavaScript • Remove ng-app or Angular 1 bootstrap code • Include Angular 2 libraries, including the upgrade library • Bootstrap with the upgrade adapter • Begin migrating components and services • Finally, remove Angular 1 and upgrade references and run directly • TypeScript • Organize into TypeScript files • Configure compiler workflow • Choose module loader
Caveats (There always are some, no?) • 1.5 Components • Elements • Isolated Scope • Bind to controller, not $scope • Own controller and templates • Not Compatible: • compile • replace: true • priority/terminal (ignored) • Angular 2 use Angular 2 binding syntax even when downgraded • For Angular 1 templates, use kebab-case not camelCase! • Project ng1 into ng2 with ng-content in template • Transclude ng2 into ng1 with ng-transclude in template
Quick Note on Services • upgradeNg1Provider(‘name’) • addProvider(type) • downgradeNg2Provider(type)
DEMO PUTTING IT ALL TOGETHER
Questions? @JEREMYLIKNESS Jeremy Likness| Director of App Dev https://github.com/JeremyLikness http://bit.ly/coderblog

More Related Content

Back to the ng2 Future

  • 1. Back to the ng2 Future @JEREMYLIKNESS
  • 2. About iVision A privately held, IT consulting firm headquartered in Midtown, Atlanta. At iVision, we seek to understand our clients’ business first. We work with clients to architect, transform and support their technology — enabling them to realize their vision of a better tomorrow. Jeremy Likness| Director of App Dev https://github.com/JeremyLikness http://bit.ly/coderblog The iVision Difference  Engineering Expertise  White Glove Service  Delivery Assurance  Flexible Business Model  Proven Partner Ecosystem  Culture & People About iVision
  • 3. Today’s Menu • Angular 1.x • $scope • Controller as • Components • Angular 2.x • TypeScript • ngForward • ngUpgrade • Q & A
  • 4. DEMO THE FLAVORS OF NG1 AND PURE NG2 HTTPS://GITHUB.COM/JEREMYLIKNESS/BACK2NGFUTURE/
  • 5. TypeScript • All JavaScript *is* TypeScript • Learn how to declare module definitions • Use a module loader • Convert to classes • Add annotations • Consider the Angular-CLI (http://bit.ly/ngclidocs)
  • 8. ngUpgrade WHEN “ALL OR NOTHING” WON’T CUT IT
  • 9. Components: NG1 from the Top, then Children Switch NG1 NG1 NG2 NG2 NG1 NG1 NG2
  • 10. Injectors: Up and Down, and All Around Source: https://angular.io/docs/
  • 11. Steps • JavaScript • Remove ng-app or Angular 1 bootstrap code • Include Angular 2 libraries, including the upgrade library • Bootstrap with the upgrade adapter • Begin migrating components and services • Finally, remove Angular 1 and upgrade references and run directly • TypeScript • Organize into TypeScript files • Configure compiler workflow • Choose module loader
  • 12. Caveats (There always are some, no?) • 1.5 Components • Elements • Isolated Scope • Bind to controller, not $scope • Own controller and templates • Not Compatible: • compile • replace: true • priority/terminal (ignored) • Angular 2 use Angular 2 binding syntax even when downgraded • For Angular 1 templates, use kebab-case not camelCase! • Project ng1 into ng2 with ng-content in template • Transclude ng2 into ng1 with ng-transclude in template
  • 13. Quick Note on Services • upgradeNg1Provider(‘name’) • addProvider(type) • downgradeNg2Provider(type)
  • 15. Questions? @JEREMYLIKNESS Jeremy Likness| Director of App Dev https://github.com/JeremyLikness http://bit.ly/coderblog