Angular 2.0 - SDD Conferencesddconf.com/brands/sdd/library/steyer_Angular2_Migration.pdf · 1...
23
1 Angular 2.0: Migration paths from 1.x to 2.0 Manfred Steyer About me … Manfred Steyer Trainer & Consultant Angular & .NET Page 2
Transcript of Angular 2.0 - SDD Conferencesddconf.com/brands/sdd/library/steyer_Angular2_Migration.pdf · 1...
1
Angular 2.0:Migration paths from 1.x to 2.0
Manfred Steyer
About me …
Manfred Steyer
Trainer & Consultant
Angular & .NET
Page 2
2
Contents
General Approaches
Preparation
Components in ng1.5
Component Router in AngularJS 1.x
ES6 and TypeScript
Overview of Decorators and ng-forward
Migration
ngUpgrade
Page 3
GENERAL APPROACHES
Page 5
3
Ostrich-Strategy
Page 6
[https://creativecommons.org/licenses/by/2.0/]
[(c) weisserstier, 110613_Straussenland 089, http://tinyurl.com/jza7wcy]
Microservice Approach
Page 7
Module 1
AngularJS 1.x
Module 2
Angular 2
Module 3
Angular 3
4
(Stepwise) Migration
Page 8
FlightCard
FlightSvc
FlightList
App1
1
1
1
(Stepwise) Migration
Page 9
FlightCard
FlightSvc
FlightList
App1
1
2
2
5
(Stepwise) Migration
Page 10
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerList
App1
1
1
1
2
2
2
(Stepwise) Migration
Page 11
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerList
App2
2
2
2
2
2
2
6
Two Steps
Preparation Migration
Page 12
PREPARATION
Page 13
7
Components in Angular 2
Page 16
Component
ControllerTemplate
Controller
Page 19
Controller Template
Scope
xy
z
8
Controller
Page 20
Controller Template
Scope
vm
Controller-as
Page 21
Controller Template
Scope
myCtrl
<div ng-controller="Controller as myCtrl">
[…]
</div>
new
9
Controller-as
Page 22
Controller Template
Scope
controller
<div ng-controller="Controller as myCtrl">
<input ng-model="myCtrl.from">
<input ng-model="myCtrl.to">
[…]
</div>
new
Constructor-Function for Controller
Page 23
function FlightListController($http, $log) {
this.from = "Graz";this.to = "Hamburg";this.selectedFlight = null;this.flights = [];this.message = "";
this.search = function() { … }this.select = function() { … }
}
10
Controller-as and UI-Router
Page 24
$stateProvider.state('home', {url: '/home', templateUrl: '/app/home/home.html',controller: 'home',controllerAs: 'home'
})
ControllerAs and Directives
Page 25
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 and Directives
Page 26
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>
Components in Angular 1.5
Page 27
app.component('passengerCard', {templateUrl: '[…]',controller: function() {
this.select = () => {this.selectedItem = this.item;
}},controllerAs: 'myCtrl', // <-- Default: $ctrlbindings: {
item: '=',selectedItem: '='
}});
12
Components in ng1.5
Page 28
restrict: 'E' scope: {} bindToController
controllerAs(Default $ctrl)
No compile No link
No replace
Recap
controllerAs
bindToController
Components in Angular 1.5
Page 29
13
COMPONENT ROUTER IN ANGULAR 1.X
Page 30
Why Component Router in Angular 1.5
Routing-Solution for Angular 2
Back-ported to Angular 1.x
Directly activates Components
Makes Migration to Angular 2 easier
Page 31
14
Components and UI-Router
Page 32
$stateProvider.state('passenger-list', {url: '/passenger-list', template: '<passenger-list></passenger-list>'
});
Component Router in Angular 1.x
Page 33
app.component('app', { controller: AppController,controllerAs: 'app',templateUrl: "app.html",$routeConfig: [
{ path: '/', component: 'home', name: 'Home', useAsDefault: true },
{ path: '/bookFlight', component: 'bookFlight', name: 'BookFlight' }
]});
app.value('$routerRootComponent', 'app');
15
TYPESCRIPT AND ES 6
Page 36
TypeScript ES 6
ES 5 < ES 6 < TypeScript
Page 37
ES 5
16
Controller in ES 6
Page 38
export class FlightSearchController {
constructor() {this.from = "Vienna";this.to = "London";
}
search() { […] }select(flight) { […] }
}
Controller in TypeScript
Page 39
export class FlightSearchController {
public from: string;public to: string;
constructor() {this.from = "Vienna";this.to = "London";
}
public search() { […] }public select() { […] }
}
17
Using EcmaScript 6 today
Compile to ES5 („Transpilation“)
Popular Transpiler: Babel
Page 40
Using TypeScript today
TypeScript-Compiler compiles TypeScript
down to ES6, ES5 oder ES3
Page 41
18
NG-FORWARD
Page 42
NG-Forward
Page 43
19
Recap
Page 44
controller-as, bindToController, .component
ES6/ TypeScript
Decorators and ngForward
Component Router in AngularJS 1.x
Recap
Page 45
controller-as, bindToController, .component
ES6/ TypeScript
Decorators and ngForward
Component Router in AngularJS 1.x
20
NGUPGRADE
Page 46
ngUpgrade
Page 47
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerList
App1
1
1
1
2
2
2
21
What do we need?
AngularJS 1.x
Angular 2 (+ upgrade.js)
Page 48
Bootstrapping
Page 50
import {upgradeAdapter} from './upgrade-adapter';
// Upgrade von ng1.x-Services und -Komponenten// Downgrade von ng2-Services und -Komponenten
upgradeAdapter.bootstrap(document.body, ['app']);
Instead of ng-app bzw. angular.bootstrap
22
UpgradeAdapter
Page 51
upgradeNg1Component
upgradeNg1Provider
downgradeNg2Component
downgradeNg2Provider
addProvider(DI for ng2)
DEMO
Page 52
23
ngUpgrade
Page 54
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerList
App1
1
1
1
2
2
2
SOFTWAREarchitekt.at
ManfredSteyer
Contact
