More Related Content Similar to Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0 (20) More from Manfred Steyer (20) Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.02. 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
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
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>'
});
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)