This document discusses various migration paths from AngularJS 1.x to Angular 2.0. It begins by outlining general approaches like the ostrich strategy of ignoring Angular 2, or taking a microservice approach. It then covers preparation steps like using components in AngularJS 1.5. Next it explains how to use the component router in AngularJS 1.x to more easily migrate to Angular 2. It also discusses using TypeScript and ES6 features. The document concludes by explaining ngUpgrade which allows building an application with both AngularJS 1.x and Angular 2 modules.

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. 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. 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. 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. 5
(Stepwise) Migration with ngUpgrade
Page  10
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerList
App1
1
1
1
2
2
2
(Stepwise) Migration with ngUpgrade
Page  11
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerList
App2
2
2
2
2
2
2

6. 6
Two Steps
Preparation Migration
Page  12
PREPARATION
Page  13

7. 7
Components in Angular 2
Page  16
Component
Controller
Template
Controller
Page  19
Controller Template
Scope
x
y
z

8. 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. 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. 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. 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-card
item="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: $ctrl
bindings: {
item: '=',
selectedItem: '='
}
});

12. 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. 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. 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. 15
TYPESCRIPT AND ES 6
Page  36
TypeScriptES 6
ES 5 < ES 6 < TypeScript
Page  37
ES 5

16. 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. 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. 18
NG-FORWARD
Page  42
NG-Forward
Page  43

19. 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. 20
NGUPGRADE
Page  46
ngUpgrade
Page  47
FlightCard
FlightSvc
PassengerCard
PassengerSvc
FlightList PassengerList
App1
1
1
1
2
2
2

21. 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. 22
UpgradeAdapter
Page  51
upgradeNg1
Component
upgradeNg1
Provider
downgradeNg2
Component
downgradeNg2
Provider
addProvider
(DI for ng2)
DEMO
Page  52

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