Angular Migration Workshop

Transcript

1. Angular Migration Workshop Manfred Steyer ManfredSteyer
2. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Google Developer Expert • Focus: Angular Page  2 Manfred Steyer
3. Goals • Find out how to prepare for a migration to Angular 2 • Find out how to migrate to Angular 2 step by step
4. Contents • General Approaches for Migrating to Angular 2 • Preparation • Controller-as • Components in AngularJS 1.5+ • One Way Binding • Communication between Components in AngularJS 1.5+ • Routing to Components • TypeScript and AngularJS 1.x • Webpack • Migrating to Angular 2 with ngUpgrade • Demonstration without Exercises • Exercises
5. Sample Application
6. General Approaches Page  6
7. Ostrich-Strategy Page  7 [https://creativecommons.org/licenses/by/2.0/] [(c) weisserstier, 110613_Straussenland 089, http://tinyurl.com/jza7wcy]
8. Microservice Approach Page  8 Module 1 AngularJS 1.x Module 2 Angular 2 Module 3 Angular 2
9. Page  9 FlightCard FlightSvc FlightList App 1 1 1 1 Migrating step by step with ngUpgrade
10. Migrating step by step with ngUpgrade Page  10 FlightCard FlightSvc FlightList App 1 1 2 2
11. Migrating step by step with ngUpgrade Page  11 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App 1 1 1 1 2 2 2
12. Migrating step by step with ngUpgrade Page  12 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App 2 2 2 2 2 2 2
13. Two Steps Preparation Migration Page  13
14. Preparation Page  14
15. Components in Angular 2 Page  15 Component Controller Template
16. Components in Angular 2 Page  16 Component Controller Template controller new
17. Application as a Component-Tree Page  17
18. Why components? • Break down complexity • Reusable units • Testable units
19. Controller in AngularJS 1.x Page  19 Controller Template Scope x y z
20. Controller in AngularJS 1.x Page  20 Controller Template Scope vm
21. Controller-as Page  21 Controller Template Scope myCtrl <div ng-controller="Controller as myCtrl"> […] </div> new
22. Controller-as Page  22 Controller Template Scope myCtrl <div ng-controller="Controller as myCtrl"> <input ng-model="myCtrl.from"> <input ng-model="myCtrl.to"> […] </div> new
23. Constructor-Function for Controller Page  23 function FlightListController($http, $log) { this.from = "Graz"; this.to = "Hamburg"; this.selectedFlight = null; this.flights = []; this.message = ""; this.search = function() { … } this.select = function() { … } }
24. Controller-as and UI-Router Page  24 $stateProvider.state('home', { url: '/home', templateUrl: '/app/home/home.html', controller: 'home', controllerAs: 'home' })
25. Controller-as and Directives Page  25 app.directive('passengerCard', function() { return { restrict: 'E', templateUrl: '…', controller: function() { this.select = function() { this.selectedItem = this.item; } }, controllerAs: 'myCtrl', scope: { item: '=', selectedItem: '=' }, bindToController: true } }); <passenger-card item="myPassenger" selectedItem="selected"> </passagier-card> <a ng-click="myCtrl.select()"> … </a>
26. Controller-as and Directives Page  26 app.directive('passengerCard', function() { return { restrict: 'E', templateUrl: '…', controller: function() { this.select = function() { this.selectedItem = this.item; } }, controllerAs: 'myCtrl', bindToController: { item: '=', selectedItem: '=' } } }); <passenger-card item="myPassenger" selectedItem="selected"> </passagier-card> <a ng-click="myCtrl.select()"> … </a>
27. Components in Angular 1.5 Page  27 app.component('passengerCard', { templateUrl: '[…]', controller: function() { this.select = function() { this.selectedItem = this.item; } }, controllerAs: 'myCtrl', // <-- Default: $ctrl bindings: { item: '=', selectedItem: '=' } });
28. Components in ng1.5 Page  28 restrict: 'E' scope: {} bindToController controllerAs (Default $ctrl) No compile No link No replace
29. Why components in AngularJS 1.5+ • Alignment to Angular 2 • Components can be migrated to Angular 2 one by one
30. One Way Binding Page  30
31. Data Binding in Angular 1.x Page  31 Model Model Directive Nearly everything can depend on everything Solution: Multiple Digest-Cycles
32. Component Tree in Angular 2 Page  32 Component for whole App Component (e. g. list) Component (e. g. list-item) Component (e. g. list-item)
33. Rules for Property Bindings • A Component only depends on its own data (and indirectly on its parent‘s data) • A Component must not depend on its childrens‘ data! • Dependency Graph is a tree • Angular only needs one digest cycle to update tree Page  33
34. Property Binding Page  34 model item item {{ item.title }} {{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]
35. Event Bindings (One Way, Bottom/Up) Page  35 {{ item.title }} {{ item.title }} Event-Handler Event-Handler
36. Event Bindings (One Way, Bottom/Up) • No digest cycles for propagating events • But: Events can change state  Property Bindings Page  36
37. Property and Event Bindings Page  37 Performing Property Bindings Executing Event Handlers Event occurs App is ready All handlers executed Properties bound
38. Two Way Binding in Angular 2 • Combination of Property- and Event-Binding • For instance: ngModel and ngModelChange • Good performance because of unidirectional data flow • Syntactical Sugar: <input [(ngModel)]="departure">
39. passenger-card
40. passenger-card Page  40 passenger-card item selectedItem > > > selectedItemChange passenger selectedPassenger
41. One Way Bindings Page  41 app.component('passengerCard', { templateUrl: '[…]', controller: function() { this.select = function() { this.selectedItem = this.item; this.selectedItemChange(this.item); } }, controllerAs: 'myCtrl', // <-- Default: $ctrl bindings: { item: '<', selectedItem: '<', selectedItemChange: '&' } });
42. Less Watchers == Better Performance
43. Life Cycle Hooks Page  43 $onInit $onChanges $onDestroy $postLink Only for one way bindings (< und @)
44. Communication between Components
45. Application as a Component-Tree Page  45 Tabs Tab Tab
46. Tabs and Tab Tabs Tab
47. Tab Component app.component('tab', { require: { tabs: '^tabs' }, controller: function() { this.$onInit = function() { this.tabs.register(this); } }, bindings: { title: '@' }, transclude: true, template: '[...]' });
48. Tabs Component app.component('tabs', { controller: function() { this.tabs = []; this.register = function(tab) { this.tabs.push(tab); } this.activate = function(tab) {…} this.$postLink = function() { if (this.tabs.length == 0) return; this.activate(this.tabs[0]); } } […] });
49. Routing to Components Page  49
50. Components and UI-Router 0.x Page  50 $stateProvider.state('passenger-list', { url: '/passenger-list', template: '<passenger-list></passenger-list>' });
51. TypeScript Page  51
52. TypeScript ES 6 ES 5 < ES 6 < TypeScript Page  52 ES 5
53. Controller in TypeScript Page  53 export class FlightSearchController { public from: string; public to: string; constructor() { this.from = "Vienna"; this.to = "London"; } public search() { […] } public select() { […] } }
54. Using TypeScript TypeScript-Compiler compiles TypeScript down to ES6, ES5 oder ES3 Page  55
55. tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node" "outDir": "dist/ts", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, }, "exclude": [ "node_modules" "dist" ] }
56. Typings • Files that define types for JavaScript libraries • TypeScript uses them to work with preexisting JavaScript code • Huge repository: http://definitelytyped.org/ • typings install angular • npm install @types/angular
57. Webpack Page  58 File A File B File C File D File E Entry Point Bundle Bundle Loader (z.B. .ts  .js)
58. Why webpack • Works declarative and not imperative • Aligns to NodeJS convetions • Fast solution • Huge community
59. webpack.config.js […] devtool: 'source-map', entry: { 'vendor': './app/vendor.ts', 'app': './app/app.ts' }, […]
60. webpack.config.js […] module: { loaders: [ […] { test: /\.ts$/, loaders: [ 'angular2-template-loader', 'awesome-typescript-loader‚ ] } ] }, […]
61. Migrating to Angular 2 Page  62
62. ngUpgrade Page  63 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App 1 1 1 1 2 2 2
63. What do we need? • AngularJS 1.x • Angular 2 (+ upgrade.js) Page  64
64. Using ngUpgrade var app = angular.module('flight-app', [...]); [...]
65. Using ngUpgrade var app = angular.module('flight-app', [...]); [...] const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
66. Using ngUpgrade var app = angular.module('flight-app', [...]); [...] const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); @NgModule({ imports: [ ... ], declarations: [ ... ], providers: [ ... ] }) class AppModule { }
67. Using ngUpgrade var app = angular.module('flight-app', [...]); [...] const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); @NgModule({ imports: [ ... ], declarations: [ ... ], providers: [ ... ] }) class AppModule { } // Upgrade ng1 services and providers // Downgrade ng2 services and providers
68. Using ngUpgrade var app = angular.module('flight-app', [...]); [...] const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); @NgModule({ imports: [ ... ], declarations: [ ... ], providers: [ ... ] }) class AppModule { } // Upgrade ng1 services and providers // Downgrade ng2 services and providers upgradeAdapter.bootstrap(document.body, ['flight-app']);
69. UpgradeAdapter Page  70 upgradeNg1 Component upgradeNg1 Provider downgradeNg2 Component downgradeNg2 Provider
70. Angular 2 in a Nutshell
71. Component Controller Page  72 @Component({ selector: 'flight-sarch', templateUrl: 'flight-search.html' }) export class FlightSearchComponent { from: string; to: string; flights: Array<Flight>; constructor(http: Http) { } search() { [...] } select(flug: Flight) { [...] } }
72. Template Page  73 <input [(ngModel)]="from"> <input [(ngModel)]="to"> <button [disabled]="!from || !to" (click)="search()"> Search </button> <table> <tr *ngFor="let flight of flights"> <td>{{flug.id}}</td> <td>{{flug.datum}}</td> <td>{{flug.von}}</td> <td>{{flug.nach}}</td> </tr> </table>
73. Service Page  74 @Injectable() export class FlightService { […] }
74. AppModule Page  75 @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule ], declarations: [ AppComponent, FlightSearchComponent ], providers: [ FlightService ], bootstrap: [ AppComponent ] }) export class AppModule { }
75. DEMO
76. Exercise
77. Your turn • Labs (Step-by-Step): https://goo.gl/vCEdBy • If there are any questions, feel free to ask. • Solution: https://goo.gl/RRYGrF • Slides: https://goo.gl/oC6jBn Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer
78. Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer