Upgrading from 1.x

Interesting related links:

- http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications
- https://medium.com/google-developer-experts/angular-2-introduction-to-redux-1cf18af27e6e#.bnpgsdaev
- https://github.com/ngrx/store

Transcript

1. UPGRADING FROM 1.x
2. Ciro Nunes FRONTEND ENGINEER @cironunesdev
4. 1. Preparation
5. 1. Preparation 2. Migration
6. follow STYLE GUIDE the #1
8. use MODULE LOADER #2 a system.js
9. #3
11. ES5
12. ES6 ES2015 ES5
13. ES7 ES2016 ES6 ES2015 ES5
14. TS ES7 ES2016 ES6 ES2015 ES5
15. use COMPONENT DIRECTIVES #4
16. COMPONENT DIRECTIVES
17. angular.module('myApp')      .directive('myGreeting',  MyGreeting);         function  MyGreeting()  {      return  {          template:  '<h1>Hello  {{  vm.person  }}</h1>',          controller:  function()  {  ...  },          controllerAs:  'vm',          scope:  {},          bindToController:  {              person:  '@'          }      };   } my-greeting.directive.js
18. angular.module('myApp')      .directive('myGreeting',  MyGreeting);         function  MyGreeting()  {      return  {          template:  '<h1>Hello  {{  vm.person  }}</h1>',          controller:  function()  {  ...  },          controllerAs:  'vm',          scope:  {},          bindToController:  {              person:  '@'          }      };   } my-greeting.directive.js
19. AVOID: ng-­‐controller   ng-­‐include   replace:  true   terminal:  true
20. COMPONENTS
21. angular.module('myApp')      .component('myGreeting',  myGreeting);         var  myGreeting  =  {      template:  '<h1>Hello  {{  $ctrl.person  }}</h1>',      bindings:  {          person:  '@'      }   }; my-greeting.component.js
24. MIGRATING AN 1.x APP INCREMENTALLY
31. BOOTSTRAPING HYBRID A1 + A2 APP
33. INSTALLING THE UpgradeAdapter
34. import  {UpgradeAdapter}  from  'angular2/upgrade';   const  upgradeAdapter  =  new  UpgradeAdapter();   export  default  upgradeAdapter; upgrade-adapter.ts
35. import  {upgradeAdapter}  from  'upgrade-­‐adapter';   upgradeAdapter.bootstrap(   document.body,  ['myApp'],  {  strictDi:  true  }); boot.ts
36. MIGRATING SERVICES
37. INJECTING 2 INTO 1
38. import  {Injectable}  from  'angular2/core';   @Injectable()   export  class  SampleService  {      getItems()  {          return  [1,  2,  3];      }   } sample.service.ts
39. import  {SampleService}  from  './sample-­‐service';   upgradeAdapter.addProvider(SampleService);   angular.module('heroApp',  [])      .factory(   'heroes',   upgradeAdapter.downgradeNg2Provider(SampleService)) app.module.ts
40. INJECTING 1 INTO 2
41. import  {upgradeAdapter}  from  './upgrade-­‐adapter';   angular.module('myApp')      .service('someService',  SomeService);         upgradeAdapter.upgradeNg1Provider('someService'); sample.service.ts
42. MIGRATING COMPONENTS
43. DOWGRADING USING A2 INTO A1
44. import  {Component,  Input}  from  'angular2/core';   @Component({      selector:  'my-­‐greeting',      template:  `          <h1>{{  name  }}</h1>      `   })   export  class  MyGreeting  {      @Input()  name:  string  =  'World';   } my-greeting.component.ts
45. import  {MyGreeting}  from  './my-­‐greeting.component';   angular.module('myApp')      .directive(          'myGreeting',          upgradeAdapter.downgradeNg2Component(MyGreeting)); my-app.module.ts
46. UPGRADING USING A1 INTO A2
47. export  const  myGreeting  =  {      bindings:  {  name:  '@'  },      template:  '<h1>Hello  {{  myGreeting.name  }}!</h1>',      controller:  function()  {  ...  }   }; my-greeting.directives.ts
48. import  {Component}  from  'angular2/core';   import  {upgradeAdapter}  from  './upgrade_adapter';   const  MyGreeting  =   upgradeAdapter.upgradeNg1Component('myGreeting');   @Component({      selector:  'my-­‐container',      template:  `          <h1>Greeting  Component</h1>          <my-­‐greeting></my-­‐greeting>      `,      directives:  [MyGreeting]   })   export  class  ContainerComponent  {   } my-container.component.ts
49. MIGRATING THE ROUTER & BOOTSTRAPING ON A2
51. R.I.P ma friend : ’)