Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Upgrading from 1.x

Avatar for Ciro Nunes Ciro Nunes
January 29, 2016

Upgrading from 1.x

Avatar for Ciro Nunes

Ciro Nunes

January 29, 2016
Tweet

More Decks by Ciro Nunes

Other Decks in Programming

Transcript

  1. #3

  2. ES5

  3. 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
  4. 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
  5. angular.module('myApp')      .component('myGreeting',  myGreeting);         var

     myGreeting  =  {      template:  '<h1>Hello  {{  $ctrl.person  }}</h1>',      bindings:  {          person:  '@'      }   }; my-greeting.component.js
  6. import  {Injectable}  from  'angular2/core';   @Injectable()   export  class  SampleService

     {      getItems()  {          return  [1,  2,  3];      }   } sample.service.ts
  7. import  {SampleService}  from  './sample-­‐service';   upgradeAdapter.addProvider(SampleService);   angular.module('heroApp',  [])  

       .factory(   'heroes',   upgradeAdapter.downgradeNg2Provider(SampleService)) app.module.ts
  8. 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
  9. import  {MyGreeting}  from  './my-­‐greeting.component';   angular.module('myApp')      .directive(  

           'myGreeting',          upgradeAdapter.downgradeNg2Component(MyGreeting)); my-app.module.ts
  10. export  const  myGreeting  =  {      bindings:  {  name:

     '@'  },      template:  '<h1>Hello  {{  myGreeting.name  }}!</h1>',      controller:  function()  {  ...  }   }; my-greeting.directives.ts
  11. 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