Upgrading to Angular 2 using ngUpgrade

Transcript

1. Upgrading to Angular 2 @mattdsteele https://steele.blue
2. Everything is terrible
3. Everything is terrible Your App
4. Upgrade Options
5. Upgrade Options
6. Upgrade Options Big Bang Rewrite
7. Upgrade Options Big Bang Rewrite ngForward
8. Upgrade Options Big Bang Rewrite ngForward ngUpgrade
9. Upgrade Options Big Bang Rewrite ngForward ngUpgrade
10. ngYourAppIsSaved
11. Angular 2 Module
12. Angular 2 Module import { UpgradeAdapter } from 'angular2/upgrade';
13. Run In Parallel
14. Component Interoperability
15. Component Interoperability In Both Directions*
16. What can be upgraded?
17. Components & Services
18. Angular 1 Components
19. Angular 1 Components Must Be:
20. Angular 1 Components restrict: 'E' Must Be:
21. Angular 1 Components restrict: 'E' scope: {}, Must Be:
22. Angular 1 Components restrict: 'E' scope: {}, bindToController: {}, Must Be:
23. Angular 1 Components restrict: 'E' scope: {}, bindToController: {}, controllerAs, Must Be:
24. Angular 1 Components restrict: 'E' scope: {}, bindToController: {}, controllerAs, template Must Be:
25. Angular 1 Components Can Be:
26. Angular 1 Components Can Be: transclude: true,
27. Angular 1 Components Can Be: transclude: true, require
28. Angular 1 Components Must Not Be: compile replace: true priority terminal
29. .component()
30. Angular 1 Services
31. Angular 1 Services Pretty Straightforward
32. Angular 2 Components
33. Angular 2 Services
34. Transclusion/Content Projection
35. Transclusion/Content Projection
36. Transclusion/Content Projection
37. Component Tree
38. Component Tree
39. angular.io/docs/ts/latest/guide/upgrade.html
40. Upgrade Strategy
41. Stuff You Can Do Now
42. Stuff You Can Do Now • Code in TypeScript/ES6
43. Stuff You Can Do Now • Code in TypeScript/ES6 • Use a module loader
44. Stuff You Can Do Now • Code in TypeScript/ES6 • Use a module loader • Convert factories/services/providers to Services (ES6 Classes)
45. Stuff You Can Do Now • Code in TypeScript/ES6 • Use a module loader • Convert factories/services/providers to Services (ES6 Classes) • Convert Directives to Components
46. Upgrade Time
47. Upgrade Time • Launch as hybrid app (UpgradeAdapter)
48. Upgrade Time • Launch as hybrid app (UpgradeAdapter) • Migrate components
49. In The Future
50. In The Future Drop ng1
51. In The Future Drop ng1 Bask in glory
52. Let's Upgrade Something
53. Super Bowl Squares http://www.zpoolz.com/main/Poolz_Football/2015/2016sbs5.jpg
54. Services Datasets Data
55. square-cell Components superbowl-header superbowl-squares square-cell square-cell
56. square-cell Components + Services superbowl-header superbowl-squares square-cell square-cell Datasets Data
57. square-cell Angular 1 Components superbowl-header superbowl-squares square-cell square-cell Datasets Data
58. square-cell 1. Boot with UpgradeAdapter superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter
59. square-cell 2. Services superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter
60. square-cell 3. Add Top Level App superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter superbowl-app
61. square-cell 4. Header Component superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter superbowl-app
62. square-cell 5. App superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter superbowl-app
63. square-cell 6. Cells superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter superbowl-app
64. square-cell 7. Squares superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter superbowl-app
65. square-cell 8. Bootstrap with ng2 superbowl-header superbowl-squares square-cell square-cell Datasets Data superbowl-app
66. Gotchas
67. Testing
68. Testing • Testing w/o Angular? Easy
69. Testing • Testing w/o Angular? Easy • Good recipes for ng2 tests
 https://medium.com/google-developer-experts/angular-2-unit- testing-with-jasmine-defe20421584#.pevppwgy2
 https://speakerdeck.com/cironunes/unit-testing-in-angular-2
70. End To End Tests
71. Testing Hybrid Components superbowl-squares Datasets Data http://stackoverflow.com/questions/36827715/testing-an-angular-app-with- ngupgrade-fails-with-unknown-provider-ng2-injector
72. Testing Hybrid Components https://github.com/mattdsteele/football-squares/commit/ 77c1d42d4ef5e1546f1de46efa56db4caff232f7 superbowl-header superbowl-squares Datasets Data superbowl-app
73. Template Syntax square-cell superbowl-squares square-cell square-cell <td ng-repeat="column in columns track by $index"> <square-cell score-data="$ctrl.data" stats="$ctrl.stats" home="$ctrl.rows[row]" away="$ctrl.columns[column]" always-visible="$ctrl.allNumbers"> </square-cell> </td>
74. Template Syntax square-cell superbowl-squares square-cell square-cell <td ng-repeat="column in columns track by $index"> <square-cell [score-data]="$ctrl.data" [stats]="$ctrl.stats" [home]="$ctrl.rows[row]" [away]="$ctrl.columns[column]" [always-visible]="$ctrl.allNumbers"> </square-cell> </td>
75. Template Syntax square-cell superbowl-squares square-cell square-cell <td ng-repeat="column in columns track by $index"> <square-cell [scoreData]="data" [stats]="stats" [home]="rows[row]" [away]="columns[column]" [alwaysVisible]="allNumbers"> </square-cell> </td>
76. Bookmark These Sites • http://angularjs.blogspot.com/2015/08/angular-1-and-angular-2-coexistence.html • https://angular.io/docs/ts/latest/guide/upgrade.html • http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html • http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html
77. /mattdsteele/football-squares @mattdsteele https://steele.blue
78. Routing • Component Router • UI Router • http://slides.com/christhielen/ui-router-ng1-to-ng2 • https://youtu.be/mnkG-RRkZtU