Having an existing Angular 1 application doesn't mean that we can't begin enjoying everything Angular 2 has to offer. That's because Angular 2 comes with built-in tools for migrating Angular 1 projects over to the Angular 2 platform.

5. import { UpgradeAdapter } from '@angular/upgrade';
/* . . . */
const upgradeAdapter = new UpgradeAdapter(AppModule);
upgradeAdapter.bootstrap(
document.body,
['heroApp'],
{strictDi: true}
);

6. // Angular 2 Component
import { HeroDetailComponent } from './hero-detail.component';
/* . . . */
angular.module('heroApp', [])
.directive(
'heroDetail',
upgradeAdapter
.downgradeNg2Component( HeroDetailComponent )
);

7. Angular 2
Component
<div ng-controller="MainController as 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 Template syntax
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);
export const 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