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.

Angular 2: Migration - SSD 2016 London

421 views

Published on

Angular 2: Migration - SSD 2016 London

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Angular 2: Migration - SSD 2016 London

  1. 1. 1 Angular 2.0: Migration paths from 1.x to 2.0 Manfred Steyer About me … Manfred Steyer Trainer & Consultant Angular & .NET Page  2
  2. 2. 2 Contents  General Approaches  Preparation  Components in AngularJS 1.5  Component Router in AngularJS 1.x  ES6 and TypeScript  Overview of Decorators and ng-forward  Migration  ngUpgrade Page  3 GENERAL APPROACHES Page  5
  3. 3. 3 Ostrich-Strategy Page  6 [https://creativecommons.org/licenses/by/2.0/] [(c) weisserstier, 110613_Straussenland 089, http://tinyurl.com/jza7wcy] Microservice Approach Page  7 Module 1 AngularJS 1.x Module 2 Angular 2 Module 3 Angular 2
  4. 4. 4 (Stepwise) Migration Page  8 FlightCard FlightSvc FlightList App1 1 1 1 (Stepwise) Migration with ngUpgrade Page  9 FlightCard FlightSvc FlightList App1 1 2 2
  5. 5. 5 (Stepwise) Migration with ngUpgrade Page  10 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App1 1 1 1 2 2 2 (Stepwise) Migration with ngUpgrade Page  11 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App2 2 2 2 2 2 2
  6. 6. 6 Two Steps Preparation Migration Page  12 PREPARATION Page  13
  7. 7. 7 Components in Angular 2 Page  16 Component Controller Template Controller Page  19 Controller Template Scope x y z
  8. 8. 8 Controller Page  20 Controller Template Scope vm Controller-as Page  21 Controller Template Scope myCtrl <div ng-controller="Controller as myCtrl"> […] </div> new
  9. 9. 9 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 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() { … } }
  10. 10. 10 Controller-as and UI-Router Page  24 $stateProvider.state('home', { url: '/home', templateUrl: '/app/home/home.html', controller: 'home', controllerAs: 'home' }) ControllerAs 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>
  11. 11. 11 ControllerAs 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> Components in Angular 1.5 Page  27 app.component('passengerCard', { templateUrl: '[…]', controller: function() { this.select = () => { this.selectedItem = this.item; } }, controllerAs: 'myCtrl', // <-- Default: $ctrl bindings: { item: '=', selectedItem: '=' } });
  12. 12. 12 Components in ng1.5 Page  28 restrict: 'E' scope: {} bindToController controllerAs (Default $ctrl) No compile No link No replace Recap controllerAs bindToController Components in Angular 1.5 Page  29
  13. 13. 13 COMPONENT ROUTER IN ANGULAR 1.X Page  30 Why Component Router in Angular 1.5 Routing-Solution for Angular 2 Back-ported to Angular 1.x Directly activates Components Makes Migration to Angular 2 easier Page  31
  14. 14. 14 Components and UI-Router Page  32 $stateProvider.state('passenger-list', { url: '/passenger-list', template: '<passenger-list></passenger-list>' }); Component Router in Angular 1.x Page  33 app.component('home', { … }); app.component('bookFlight', { … }); app.component('app', { controller: AppController, controllerAs: 'app', templateUrl: "app.html", $routeConfig: [ { path: '/', component: 'home', name: 'Home', useAsDefault: true }, { path: '/bookFlight', component: 'bookFlight', name: 'BookFlight' } ] }); app.value('$routerRootComponent', 'app');
  15. 15. 15 TYPESCRIPT AND ES 6 Page  36 TypeScriptES 6 ES 5 < ES 6 < TypeScript Page  37 ES 5
  16. 16. 16 Controller in ES 6 Page  38 export class FlightSearchController { constructor() { this.from = "Vienna"; this.to = "London"; } search() { […] } select(flight) { […] } } import {FlightSearchController} from './some-file'; var ctrl = new FlightSearchController(); Controller in TypeScript Page  39 export class FlightSearchController { public from: string; public to: string; constructor() { this.from = "Vienna"; this.to = "London"; } public search() { […] } public select() { […] } }
  17. 17. 17 Using EcmaScript 6 today Compile to ES5 („Transpilation“) Popular Transpiler: Babel Page  40 Using TypeScript today TypeScript-Compiler compiles TypeScript down to ES6, ES5 oder ES3 Page  41
  18. 18. 18 NG-FORWARD Page  42 NG-Forward Page  43
  19. 19. 19 Recap Page  44  controller-as, bindToController, .component  ES6/ TypeScript  Decorators and ngForward  Component Router in AngularJS 1.x Recap Page  45  controller-as, bindToController, .component  ES6/ TypeScript  Decorators and ngForward  Component Router in AngularJS 1.x
  20. 20. 20 NGUPGRADE Page  46 ngUpgrade Page  47 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App1 1 1 1 2 2 2
  21. 21. 21 What do we need? AngularJS 1.x Angular 2 (+ upgrade.js) Page  48 Bootstrapping Page  50 import {upgradeAdapter} from './upgrade-adapter'; // Upgrade, Downgrade upgradeAdapter.bootstrap(document.body, ['app']); Instead of ng-app bzw. angular.bootstrap
  22. 22. 22 UpgradeAdapter Page  51 upgradeNg1 Component upgradeNg1 Provider downgradeNg2 Component downgradeNg2 Provider addProvider (DI for ng2) DEMO Page  52
  23. 23. 23 ngUpgrade Page  54 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App1 1 1 1 2 2 2 manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer Contact

×