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 Upgrade: Migration von AngularJS 1.x zu 2.0

547 views

Published on

Präsentation von DWX 2016, Juni 2016 in Nürnberg

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0

  1. 1. 1 Angular 2 Upgrade Manfred Steyer Über mich … Manfred Steyer Trainer & Consultant Angular & .NET Page  2
  2. 2. 2 Inhalt  Ansätze  Vorbereitung  Komponenten in AngularJS 1.5  ES6 und TypeScript  Migration  ngUpgrade  DEMO  ÜBUNG Page  3 Didaktik Kurze Präsentation Code-Beispiele Übung Page  4
  3. 3. 3 Setup Visual Studio Code NodeJS (aktuelle Version, min 4.x) Page  5 ANSÄTZE Page  6
  4. 4. 4 Vogel-Strauß-Strategie Page  7 [https://creativecommons.org/licenses/by/2.0/] [(c) weisserstier, 110613_Straussenland 089, http://tinyurl.com/jza7wcy] Micro-Service Ansatz Page  8 Module 1 AngularJS 1.x Module 2 Angular 2 Module 3 Angular 2
  5. 5. 5 (Schrittweise) Migration Page  9 FlightCard FlightSvc FlightList App1 1 1 1 (Schrittweise) Migration with ngUpgrade Page  10 FlightCard FlightSvc FlightList App1 1 2 2
  6. 6. 6 (Schrittweise) Migration with ngUpgrade Page  11 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App1 1 1 1 2 2 2 (Schrittweise) Migration with ngUpgrade Page  12 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App2 2 2 2 2 2 2
  7. 7. 7 Zwei Schritte Vorbereitung Migration Page  13 VORBEREITUNG Page  14
  8. 8. 8 Vorbereitung "Schreiben Sie das beste/ modernste AngularJS 1.x, das möglich ist" Page  15 ng-europe 2014 Page  16
  9. 9. 9 Konzepte in ng1 und ng2 Page  17 AngularJS 1.x Angular 2 Controller Component DDO Component/ Directive $scope Component angular.module EcmaScript Modules jqLite Renderer Komponenten in Angular 2 Page  18 Component Controller Template
  10. 10. 10 Direktiven Page  27 app.directive('passengerCard', function() { return { restrict: 'E', templateUrl: '…', controller: function($scope) { $scope.select = function() { this.selectedItem = this.item; } }, scope: { item: '=', selectedItem: '=' }, bindToController: true } }); Direktiven Page  28 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 und Direktiven Page  29 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> Komponenten in Angular 1.5 Page  30 app.component('passengerCard', { templateUrl: '[…]', controller: function() { this.select = function() { this.selectedItem = this.item; } }, controllerAs: 'myCtrl', // <-- Default: $ctrl bindings: { item: '=', selectedItem: '=' } });
  12. 12. 12 Kommunikation mit Parent-Komponenten Page  31 app.component('passengerCard', { templateUrl: '[…]', controller: function() { this.select = function() { this.selectedItem = this.item; this.parent.infom(); } }, controllerAs: 'myCtrl', // <-- Default: $ctrl bindings: { item: '=', selectedItem: '=' }, require: { parent: '^passengerList' } }); One-Way-Bindings Page  32 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: '&' }, require: { parent: '^passengerList' } });
  13. 13. 13 Eigenschaften von ng1-Komponenten Page  33 restrict: 'E' scope: {} bindToController controllerAs (Standard $ctrl) Kein compile Kein link Kein replace Life-Cycle-Hooks Page  34 $onInit $onChanges $onDestroy $postLink Nur für One-Way-Bindings (< und @)
  14. 14. 14 Post-Link Page  35 app.component('passengerCard', { templateUrl: '[…]', controller: function() { this.select = function() { this.selectedItem = this.item; } this.$postLink = function() { … } }, controllerAs: 'myCtrl', // <-- Default: $ctrl bindings: { item: '<', selectedItem: '<', selectedItemChange: '&' }, require: { parent: '^passengerList' } }); Components und UI-Router Page  36 $stateProvider.state('passenger-list', { url: '/passenger-list', template: '<passenger-list></passenger-list>' });
  15. 15. 15 Recap controllerAs bindToController Components in Angular 1.5 Page  38 TYPESCRIPT UND ES 6 Page  45
  16. 16. 16 TypeScriptES 6 ES 5 < ES 6 < TypeScript Page  46 ES 5 NGUPGRADE Page  55
  17. 17. 17 ngUpgrade Page  56 FlightCard FlightSvc PassengerCard PassengerSvc FlightList PassengerList App1 1 1 1 2 2 2 Was wird benötigt? AngularJS 1.x Angular 2 (+ upgrade.js) Page  57
  18. 18. 18 Bootstrapping Page  59 import {upgradeAdapter} from './upgrade-adapter'; // Upgrade, Downgrade upgradeAdapter.bootstrap(document.body, ['app']); Anstatt ng-app bzw. angular.bootstrap UpgradeAdapter Page  60 upgradeNg1 Component upgradeNg1 Provider downgradeNg2 Component downgradeNg2 Provider addProvider (DI für ng2)
  19. 19. 19 DEMO Page  61 ÜBUNG Page  62
  20. 20. 20 Übung Page  63 Starterkit Übungsblatt Lösung Unterlagen http://tinyurl.com/ dwx-angular1-to-2-2016 Page  64
  21. 21. 21 manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer Kontakt

×