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

1. 1
Angular 2 Upgrade
Manfred Steyer
Über mich …
Manfred Steyer
Trainer & Consultant
Angular & .NET
Page  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
Setup
Visual Studio Code
NodeJS (aktuelle Version, min 4.x)
Page  5
ANSÄTZE
Page  6

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
(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
(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
Zwei Schritte
Vorbereitung Migration
Page  13
VORBEREITUNG
Page  14

8. 8
Vorbereitung
"Schreiben Sie das beste/ modernste
AngularJS 1.x, das möglich ist"
Page  15
ng-europe 2014
Page  16

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
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
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
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
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
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
Recap
controllerAs
bindToController
Components in Angular 1.5
Page  38
TYPESCRIPT UND ES 6
Page  45

16. 16
TypeScriptES 6
ES 5 < ES 6 < TypeScript
Page  46
ES 5
NGUPGRADE
Page  55

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
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
DEMO
Page  61
ÜBUNG
Page  62

20. 20
Übung
Page  63
Starterkit Übungsblatt
Lösung
Unterlagen
http://tinyurl.com/
dwx-angular1-to-2-2016
Page  64

21. 21
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Kontakt