O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
1
Angular 2 Upgrade
Manfred Steyer
Über mich …
Manfred Steyer
Trainer & Consultant
Angular & .NET
Page  2
2
Inhalt
 Ansätze
 Vorbereitung
 Komponenten in AngularJS 1.5
 ES6 und TypeScript
 Migration
 ngUpgrade
 DEMO
 ÜBU...
3
Setup
Visual Studio Code
NodeJS (aktuelle Version, min 4.x)
Page  5
ANSÄTZE
Page  6
4
Vogel-Strauß-Strategie
Page  7
[https://creativecommons.org/licenses/by/2.0/]
[(c) weisserstier, 110613_Straussenland 0...
5
(Schrittweise) Migration
Page  9
FlightCard
FlightSvc
FlightList
App1
1
1
1
(Schrittweise) Migration with ngUpgrade
Pag...
6
(Schrittweise) Migration with ngUpgrade
Page  11
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerLi...
7
Zwei Schritte
Vorbereitung Migration
Page  13
VORBEREITUNG
Page  14
8
Vorbereitung
"Schreiben Sie das beste/ modernste
AngularJS 1.x, das möglich ist"
Page  15
ng-europe 2014
Page  16
9
Konzepte in ng1 und ng2
Page  17
AngularJS 1.x Angular 2
Controller Component
DDO Component/ Directive
$scope Component...
10
Direktiven
Page  27
app.directive('passengerCard', function() {
return {
restrict: 'E',
templateUrl: '…',
controller: ...
11
ControllerAs und Direktiven
Page  29
app.directive('passengerCard', function() {
return {
restrict: 'E',
templateUrl: ...
12
Kommunikation mit Parent-Komponenten
Page  31
app.component('passengerCard', {
templateUrl: '[…]',
controller: functio...
13
Eigenschaften von ng1-Komponenten
Page  33
restrict: 'E' scope: {} bindToController
controllerAs
(Standard $ctrl)
Kein...
14
Post-Link
Page  35
app.component('passengerCard', {
templateUrl: '[…]',
controller: function() {
this.select = functio...
15
Recap
controllerAs
bindToController
Components in Angular 1.5
Page  38
TYPESCRIPT UND ES 6
Page  45
16
TypeScriptES 6
ES 5 < ES 6 < TypeScript
Page  46
ES 5
NGUPGRADE
Page  55
17
ngUpgrade
Page  56
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerList
App1
1
1
1
2
2
2
Was wird ...
18
Bootstrapping
Page  59
import {upgradeAdapter} from './upgrade-adapter';
// Upgrade, Downgrade
upgradeAdapter.bootstra...
19
DEMO
Page  61
ÜBUNG
Page  62
20
Übung
Page  63
Starterkit Übungsblatt
Lösung
Unterlagen
http://tinyurl.com/
dwx-angular1-to-2-2016
Page  64
21
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Kontakt
Próximos SlideShares
Carregando em…5
×

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

643 visualizações

Publicada em

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

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×