Download - Upgrading from Angular 1.x to Angular 2.x
![Page 1: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/1.jpg)
Upgrading From 1.x
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com
![Page 2: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/2.jpg)
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.
![Page 3: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/3.jpg)
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.
![Page 4: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/4.jpg)
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.
![Page 5: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/5.jpg)
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}
);
![Page 6: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/6.jpg)
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 ) );
![Page 7: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/7.jpg)
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
![Page 8: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/8.jpg)
Using Angular 2 Components from Angular 1
![Page 9: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/9.jpg)
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
![Page 10: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/10.jpg)
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">
![Page 11: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/11.jpg)
Using Angular 1 Directive from Angular 2
![Page 12: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/12.jpg)
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');
![Page 13: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/13.jpg)
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]; }]};
![Page 14: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/14.jpg)
Summary Use UpgradeAdapter to allow
AngularJS v1 and Angular v2 to coexist in a single application.
Downgrade methods: downgradeNg2Component downgradeNg2Provider
Upgrade methods: upgradeNg1Component upgradeNg1Provider
![Page 15: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/15.jpg)
Resources Upgrading from 1.X
![Page 16: Upgrading from Angular 1.x to Angular 2.x](https://reader035.vdocuments.site/reader035/viewer/2022062523/5872b3261a28ab523c8b5f17/html5/thumbnails/16.jpg)
Thankseyalvardi.wordpress.com
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com