Angular 2 is now in release candidate and can be used for new projects, though Angular 1 will still be supported for the next 1.5-2 years. There are two main approaches to upgrading an existing Angular 1 app to Angular 2: big bang, where the entire app is rewritten at once in Angular 2, or incremental, where individual components are upgraded one by one. Components and directives are now unified under the component model in Angular 2. TypeScript is recommended for Angular 2 development but not required, as JavaScript can also be used.

1. ANGULAR 2…
SO CAN I USE IT NOW??
Laurent Duveau
July 7, 2016
1

2. LAURENT DUVEAU
@LaurentDuveau
Founder of the Angular Academy
2-day Angular Classroom Training
23 classes in the last 10 months
Montreal, Quebec, Toronto, Vancouver,
Ottawa, Calgary, …

3. THIS TALK IS ABOUT…

5. ANGULAR 2 IS IN
RELEASE CANDIDATE
#RC4
www.angular.io

6. ANGULAR 2
FINAL ?

7. everything’s
changed but
nothing is
different

8. it is still a client side MVC
framework, but adopting a
modern approach
(ES2015, Web Components)

9. most of the concepts you’ve
learned from ng1 will carry over…
…implementations and syntax
are changing

10. “Angular 1.x will be supported at
least 1.5 - 2 years after the first
*stable* release of Angular 2”
- Brad Green, Angular team

11. Angular 2 is built
using TypeScript

12. Wait…

13. you can use TypeScript
or JavaScript (ES2015)

14. you should learn TypeScript
www.typescriptlang.org/docs/tutorial.html
really

15. TypeScript
• Types
• Annotations
ES6
• Classes
• Modules
ES5

16. How does TypeScript work?
TypeScript
file.ts
JavaScript
file.js
TypeScript Compiler
Output ES3/ES5/ES6/…
compliant code
“Transpiling”

17. Controller
Web Component
ES6 Module
$scope
jqLite
Module
Raw DOM
AngularJS 1.x Angular 2
Directives

18. CODE…
AngularJS 1.x Angular 2
<div ng-controller="TodoController">
<input type="text" ng-model="newTodoTitle">
<button ng-click="addTodo()">+</button>
<tab-container>
<tab-pane title="Laurent">
<div ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
{{todo.title}}
<button ng-click="deleteTodo(todo)">X</button>
</div>
</tab-pane>
...
<div>
<input type="text" [(ngModel)]="newTodoTitle">
<button (click)="addTodo()">+</buton>
<tab-container>
<tab-pane title="Laurent">
<div *ngFor="let todo of todos">
<input type="checkbox"
[checked]="todo.done">
{{todo.title}}
<button (click)="deleteTodo(todo)">X</button>
</div>
</tab-pane>
...

19. ANGULAR 2 COMPONENT
Angular 1.x: Directives and Controllers were two different things
Angular 2: Directives and Controllers unified into the Component model
7/9/2016 19
@Component({
selector:'tab-container'
})
class TabContainer {
...
constructor(todos:Array<Todo>) {
this.todos = todos;
}
deleteTodo(selectedTodo:Todo) { ... }
}

20. NG1 VS NG2
ng1 has 46 directives
ng2 has () and []
7/9/2016 20

21. DEMONSTRATION

22. MIGRATION FROM
ANGULAR 1
22

23. MIGRATION…
ng1
ng2

24. TWO PHASES
24
ng1 ng2

25. PREPARING THE UPGRADE
Things you can do today to make your life easier:
Follow the Angular Style Guide!
Use .service() instead of .factory()
Remove dependencies on $scope
•Use controller as and this
Use the new component syntax (ng 1.5)
Adopt TypeScript!
ADOPT TYPESCRIPT!!
25

26. UPGRADE STRATEGIES
2 options:
Big Bang: Start a spike in Angular 2 and replace entire
app once done
Incremental: Upgrade existing app one service or
component at a time
26

27. BIG BANG
27

28. BIG BANG
28

29. BIG BANG
29

30. INCREMENTAL UPGRADE
30

31. INCREMENTAL UPGRADE
31

32. INCREMENTAL UPGRADE
32

33. INCREMENTAL UPGRADE
33

34. NGUPGRADE
Angular 1 + 2 together!
Include Angular 2 and the upgrade module (ngUpgrade)
Replace Angular 1 bootstrap with Angular 2 bootstrap
Pick directive to upgrade and change its template/controller
Export ng2 component in Angular 1 app
Repeat…
34
https://angular.io/docs/ts/latest/guide/upgrade.html

35. NGUPGRADE
7/9/2016 35

36. UPGRADE ADAPTER
Create an upgrade adapter instance
Bootstrap the ng1 app from the adapter (remove ng-app=…)
36
import {UpgradeAdapter} from '@angular/upgrade';
export const upgradeAdapter = new UpgradeAdapter();
import {upgradeAdapter} from 'upgrade-adapter';
angular.module('store-app', [...]);
upgradeAdapter
.bootstrap(document.body, ['store-app']);

37. NG2 => NG1

38. DOWNGRADING NG2 COMPONENTS…
… to use them as ng1 directive
38
@Component({
selector: 'product-list-item',
template: `
<a href="#/product/{{product.id}}">
<img [src]="product.image">
<span>{{product.name}}</span>
</a>
`
})
export class ProductListItemComponent {
@Input() product: Product;
}
ng2

39. DOWNGRADING NG2 COMPONENTS
Create an ng1 module with directive
39
import {upgradeAdapter} from 'upgrade-adapter';
import {ProductListItemComponent} from '...';
angular
.module('ang2-components', [])
.directive('productListItem',
upgradeAdapter
.downgradeNg2Component(ProductListItemComponent)
);
ng1

40. DOWNGRADING NG2 COMPONENTS
Inject our new module
40
angular.module('store-app', [
...
'ang2-components'
]);
ng1

41. DOWNGRADING NG2 COMPONENTS
Use the directive!
41
<ul>
<li ng-repeat="product in products">
<product-list-item [product]="product">
</product-list-item>
</li>
</ul>
ng1

42. NG1 => NG2

43. UPGRADING NG1 COMPONENTS
43
angular
.module('ang1-components', [])
.component('ang1Component', {
templateUrl: '...',
transclude: true,
bindings: {
closed: '<',
title: '@',
toggle: '&'
},
controller: function () { ... }
})
ng1

44. UPGRADING NG1 COMPONENTS
Migration from Angular 1
44
@Component({
selector: 'product-detail-component',
templateUrl: '...',
})
export class ProductDetailComponent {
...
}
ng2

45. UPGRADING NG1 COMPONENTS
Migration from Angular 1
45
import {upgradeAdapter} from 'upgrade-adapter';
const Ang1Component =
upgradeAdapter.upgradeNg1Component('ang1Component');
@Component({
selector: 'product-detail-component',
templateUrl: '...',
directives: [Ang1Component]
})
export class ProductDetailComponent {
...
}
ng2

46. UPGRADING NG1 COMPONENTS
Use it in ng2 component’s template!
46
<div>
{{product.name}}
<ang1-component
[title]="productCaption"
(toggle)="toggleCaption($event.closed)">
</ang1-component>
<div>
ng2 template

47. DEMONSTRATION

48. Thank you!