Angular 2: Migration - SSD 2016 London

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 AngularJS 1.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 2

4
(Stepwise) Migration
Page  8
FlightCard
FlightSvc
FlightList
App1
1
1
1
(Stepwise) Migration with ngUpgrade
Page  9
FlightCard
FlightSvc
FlightList
App1
1
2
2

5
Page  10
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerList
App1
1
1
1
2
2
2
Page  11
FlightCard
FlightSvc
PassengerCard
PassengerSvc
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
Controller
Template
Controller
Page  19
Controller Template
Scope
x
y
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
myCtrl
<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-card
item="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: '…',
this.select = function() {
}
},
controllerAs: 'myCtrl',
bindToController: {
item: '=',
selectedItem: '='
}
}
});
<passenger-card
item="myPassenger"
selectedItem="selected">
</passagier-card>
<a ng-click="myCtrl.select()">
…
</a>
Components in Angular 1.5
Page  27
app.component('passengerCard', {
templateUrl: '[…]',
this.select = () => {
}
},
controllerAs: 'myCtrl', // <-- Default: $ctrl
bindings: {
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('home', { … });
app.component('bookFlight', { … });
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
TypeScriptES 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) { […] }
}
import {FlightSearchController} from './some-file';
var ctrl = new FlightSearchController();
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
Recap
Page  45
 controller-as, bindToController, .component
 ES6/ TypeScript
 Decorators and ngForward

20
NGUPGRADE
Page  46
ngUpgrade
Page  47
FlightCard
FlightSvc
PassengerCard
PassengerSvc
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, Downgrade
upgradeAdapter.bootstrap(document.body, ['app']);
Instead of ng-app bzw. angular.bootstrap

22
UpgradeAdapter
Page  51
upgradeNg1
Component
upgradeNg1
Provider
downgradeNg2
Component
downgradeNg2
Provider
addProvider
(DI for ng2)
DEMO
Page  52

23
ngUpgrade
Page  54
FlightCard
FlightSvc
PassengerCard
PassengerSvc
App1
1
1
1
2
2
2
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact

Angular 2: Migration - SSD 2016 London

Related slideshows

More Related Content

Angular 2: Migration - SSD 2016 London