Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 2... so can I use it now??

Technical presentation given by Laurent Duveau at DevTeach Montreal on July 07, 2016.

  • Be the first to comment

Angular 2... so can I use it now??

  1. 1. ANGULAR 2… SO CAN I USE IT NOW?? Laurent Duveau July 7, 2016 1
  2. 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. 3. THIS TALK IS ABOUT…
  4. 4. ANGULAR 2 IS IN RELEASE CANDIDATE #RC4 www.angular.io
  5. 5. ANGULAR 2 FINAL ?
  6. 6. everything’s changed but nothing is different
  7. 7. it is still a client side MVC framework, but adopting a modern approach (ES2015, Web Components)
  8. 8. most of the concepts you’ve learned from ng1 will carry over… …implementations and syntax are changing
  9. 9. “Angular 1.x will be supported at least 1.5 - 2 years after the first *stable* release of Angular 2” - Brad Green, Angular team
  10. 10. Angular 2 is built using TypeScript
  11. 11. Wait…
  12. 12. you can use TypeScript or JavaScript (ES2015)
  13. 13. you should learn TypeScript www.typescriptlang.org/docs/tutorial.html really
  14. 14. TypeScript • Types • Annotations ES6 • Classes • Modules ES5
  15. 15. How does TypeScript work? TypeScript file.ts JavaScript file.js TypeScript Compiler Output ES3/ES5/ES6/… compliant code “Transpiling”
  16. 16. Controller Web Component ES6 Module $scope jqLite Module Raw DOM AngularJS 1.x Angular 2 Directives
  17. 17. 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> ...
  18. 18. 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) { ... } }
  19. 19. NG1 VS NG2 ng1 has 46 directives ng2 has () and [] 7/9/2016 20
  20. 20. DEMONSTRATION
  21. 21. MIGRATION FROM ANGULAR 1 22
  22. 22. MIGRATION… ng1 ng2
  23. 23. TWO PHASES 24 ng1 ng2
  24. 24. 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
  25. 25. 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
  26. 26. BIG BANG 27
  27. 27. BIG BANG 28
  28. 28. BIG BANG 29
  29. 29. INCREMENTAL UPGRADE 30
  30. 30. INCREMENTAL UPGRADE 31
  31. 31. INCREMENTAL UPGRADE 32
  32. 32. INCREMENTAL UPGRADE 33
  33. 33. 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
  34. 34. NGUPGRADE 7/9/2016 35
  35. 35. 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']);
  36. 36. NG2 => NG1
  37. 37. 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
  38. 38. 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
  39. 39. DOWNGRADING NG2 COMPONENTS Inject our new module 40 angular.module('store-app', [ ... 'ang2-components' ]); ng1
  40. 40. 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
  41. 41. NG1 => NG2
  42. 42. UPGRADING NG1 COMPONENTS 43 angular .module('ang1-components', []) .component('ang1Component', { templateUrl: '...', transclude: true, bindings: { closed: '<', title: '@', toggle: '&' }, controller: function () { ... } }) ng1
  43. 43. UPGRADING NG1 COMPONENTS Migration from Angular 1 44 @Component({ selector: 'product-detail-component', templateUrl: '...', }) export class ProductDetailComponent { ... } ng2
  44. 44. 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
  45. 45. 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
  46. 46. DEMONSTRATION
  47. 47. Thank you!

×