Upgrading from Angular 1.x to Angular 2.x

Upgrading from Angular 1.x to Angular 2.x

• 5.
  import { UpgradeAdapter} from '@angular/upgrade'; /* . . . */ const upgradeAdapter = new UpgradeAdapter(AppModule); upgradeAdapter.bootstrap( document.body, ['heroApp'], {strictDi: true} );
• 6.
  // Angular 2Component import { HeroDetailComponent } from './hero-detail.component'; /* . . . */ angular.module('heroApp', []) .directive( 'heroDetail', upgradeAdapter .downgradeNg2Component( HeroDetailComponent ) );
• 7.
  Angular 2 Component <div ng-controller="MainControlleras mainCtrl"> <hero-detail [hero] = "mainCtrl.hero" (deleted)= "mainCtrl.onDelete($event)" ng-repeat= "hero in mainCtrl.heroes"> </hero-detail> </div>
• 9.
  const HeroDetail =upgradeAdapter .upgradeNg1Component('heroDetail'); @NgModule({ imports: [ BrowserModule ], declarations: [ ContainerComponent, HeroDetail ] }) export class AppModule {} Angular 1 directive name
• 10.
  Binding definition Templatesyntax Attribute binding myAttr : '@' <my-cmp myAttr="value"> Expression binding myOutput : '&' <my-cmp (myOutput)="action()"> One-way binding myValue : '<' <my-cmp [myValue]="Exp"> Two-way binding myValue : '=' <my-cmp [(myValue)]="Exp">
• 12.
  angular.module('heroApp', []) .service ('heroes',HeroesService) .directive('heroDetail', upgradeAdapter .downgradeNg2Component(HeroDetailComponent)); upgradeAdapter.upgradeNg1Provider('heroes');
• 13.
  angular.module('heroApp', []) .factory('heroes', upgradeAdapter.downgradeNg2Provider(Heroes)) .component('heroDetail', heroDetailComponent); exportconst heroDetailComponent = { template: ` <h2>{{$ctrl.hero.id}}: {{$ctrl.hero.name}}</h2> `, controller: ['heroes', function(heroes: Heroes) { this.hero = heroes.get()[0]; }] };
• 15.
  Upgrading from 1.X