Upgrading From 1.x
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com
UpgradeAdapter Service Bootstrap method manage hybrid
applications that support both Angular 2 and Angular 1 code.
Both versions of Angular running at the same time.
Hybrid Application Every element in the DOM is owned by
exactly one of the two frameworks. The root of the application is always an
Angular 1 template.
Change Detection Everything that happens in the application runs
inside the Angular 2 zone. The UpgradeAdapter will invoke the Angular 1
$rootScope.$apply() after every turn of the Angular zone.
Bootstrapping Hybrid Applications Angular 1:
ng-app angular.bootstrap(…)
Angular 2:import { UpgradeAdapter } from '@angular/upgrade';
/* . . . */
const upgradeAdapter = new UpgradeAdapter(AppModule);
upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true}
);
Using Angular 2 Components from Angular 1 All Angular 2 components, directives and
pipes must be declared in an NgModule.// Angular 2 Componentimport { HeroDetailComponent } from './hero-detail.component';
/* . . . */
angular.module('heroApp', []) .directive(
'heroDetail', upgradeAdapter
.downgradeNg2Component( HeroDetailComponent ) );
Angular 1 Template Using Angular 2 Component Note that even though we are in an Angular 1
template, we're using Angular 2 attribute syntax to bind the inputs and outputs.
Angular 2Component
<div ng-controller="MainController as mainCtrl">
<hero-detail [hero] = "mainCtrl.hero"
(deleted)= "mainCtrl.onDelete($event)"
ng-repeat= "hero in mainCtrl.heroes">
</hero-detail>
</div>
Angular1Expressions
Using Angular 2 Components from Angular 1
Using Angular 1 Directives from Angular 2 Not all kinds of Angular 1 directives can
be upgraded. The directive has to be a component directive.
const HeroDetail = upgradeAdapter
.upgradeNg1Component('heroDetail');
@NgModule({
imports: [ BrowserModule ],
declarations: [ ContainerComponent, HeroDetail ]
})
export class AppModule {}
Angular 1directive
name
Angular 2 Template Syntax for Angular 1 Directive
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">
Using Angular 1 Directive from Angular 2
Angular 1 Dependencies Injectable to Angular 2 We can upgrade the service using the
UpgradeAdapter's upgradeNg1Provider method by giving it the name of the service.
Angular 2 using a string token that matches its original name in Angular 1, @Inject('heroes').
angular.module('heroApp', [])
.service ('heroes', HeroesService)
.directive('heroDetail',
upgradeAdapter
.downgradeNg2Component(HeroDetailComponent)
);
upgradeAdapter.upgradeNg1Provider('heroes');
Angular 2 Dependencies Injectable to Angular 1 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]; }]};
Summary Use UpgradeAdapter to allow
AngularJS v1 and Angular v2 to coexist in a single application.
Downgrade methods: downgradeNg2Component downgradeNg2Provider
Upgrade methods: upgradeNg1Component upgradeNg1Provider
Resources Upgrading from 1.X
Thankseyalvardi.wordpress.com
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com