Angular 2... so can I use it now??
3 likes1,181 views
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.
![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>
...](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-18-320.jpg)
![NG1 VS NG2
ng1 has 46 directives
ng2 has () and []
7/9/2016 20](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-20-320.jpg)
![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']);](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-36-320.jpg)
![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](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-38-320.jpg)
![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](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-39-320.jpg)
![DOWNGRADING NG2 COMPONENTS
Inject our new module
40
angular.module('store-app', [
...
'ang2-components'
]);
ng1](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-40-320.jpg)
![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](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-41-320.jpg)
![UPGRADING NG1 COMPONENTS
43
angular
.module('ang1-components', [])
.component('ang1Component', {
templateUrl: '...',
transclude: true,
bindings: {
closed: '<',
title: '@',
toggle: '&'
},
controller: function () { ... }
})
ng1](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-43-320.jpg)
![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](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-45-320.jpg)
![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](https://image.slidesharecdn.com/anguar2-160709151310/85/Angular-2-so-can-I-use-it-now-46-320.jpg)
Angular 2... so can I use it now??
- 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
- 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
- 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
- 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
- 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!