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