Embed Size (px)
Citation preview
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
ÜBUNG
Page 3
Didaktik
Kurze Präsentation
Code-Beispiele
Übung
Page 4
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 089, http://tinyurl.com/jza7wcy]
Micro-Service Ansatz
Page 8
Module 1
AngularJS 1.x
Module 2
Angular 2
Module 3
Angular 2
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
(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
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
angular.module EcmaScript Modules
jqLite Renderer
Komponenten in Angular 2
Page 18
Component
ControllerTemplate
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-carditem="myPassenger"selectedItem="selected">
</passagier-card>
<a ng-click="myCtrl.select()">…
</a>
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-carditem="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: $ctrlbindings: {
item: '=',selectedItem: '='
}});
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: $ctrlbindings: {
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: $ctrlbindings: {
item: '<',selectedItem: '<',selectedItemChange: '&'
},require: {
parent: '^passengerList'}
});
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
Post-Link
Page 35
app.component('passengerCard', {templateUrl: '[…]',controller: function() {
this.select = function() {this.selectedItem = this.item;
}this.$postLink = function() { … }
},controllerAs: 'myCtrl', // <-- Default: $ctrlbindings: {
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
Recap
controllerAs
bindToController
Components in Angular 1.5
Page 38
TYPESCRIPT UND ES 6
Page 45
16
TypeScript ES 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 benötigt?
AngularJS 1.x
Angular 2 (+ upgrade.js)
Page 57
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
upgradeNg1Component
upgradeNg1Provider
downgradeNg2Component
downgradeNg2Provider
addProvider(DI für ng2)
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
