diff --git a/aio/content/examples/forms/src/app/app.component.ts b/aio/content/examples/forms/src/app/app.component.ts deleted file mode 100644 index 454f7e03db..0000000000 --- a/aio/content/examples/forms/src/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'my-app', - template: '' -}) -export class AppComponent { } diff --git a/aio/content/examples/reactive-forms/src/index.html b/aio/content/examples/reactive-forms/src/index.html deleted file mode 100644 index 802d12f211..0000000000 --- a/aio/content/examples/reactive-forms/src/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - Hero Form - - - - - - - - - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/upgrade-module/e2e-spec.ts b/aio/content/examples/upgrade-module/e2e-spec.ts index 257e53d2cc..5c32ccd347 100644 --- a/aio/content/examples/upgrade-module/e2e-spec.ts +++ b/aio/content/examples/upgrade-module/e2e-spec.ts @@ -162,22 +162,4 @@ describe('Upgrade Tests', function () { }); - describe('Dividing routes', function() { - - beforeAll(function () { - browser.get('/index-divide-routes.html'); - }); - - it('allows ng1 routes', function () { - browser.get('/index-divide-routes.html#/villain'); - expect(element(by.css('h2')).getText()).toBe('Mr. Nice - No More Mr. Nice Guy'); - }); - - it('allows ng2 routes', function () { - browser.get('/index-divide-routes.html#/hero'); - expect(element(by.css('h2')).getText()).toBe('Windstorm - Specific powers of controlling winds'); - }); - - }); - }); diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts index 91235a1485..2ac7ee76bf 100644 --- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts @@ -6,8 +6,9 @@ import { UpgradeModule } from '@angular/upgrade/static'; import { heroDetailComponent } from './hero-detail.component'; -// #docregion ngmodule +// #docregion ngmodule, register import { Heroes } from './heroes'; +// #enddocregion register @NgModule({ imports: [ @@ -17,7 +18,10 @@ import { Heroes } from './heroes'; providers: [ Heroes ] }) export class AppModule { - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + } } // #enddocregion ngmodule // #docregion register @@ -28,7 +32,4 @@ angular.module('heroApp', []) .component('heroDetail', heroDetailComponent); // #enddocregion register -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts index 599e711b5e..e95104cbcc 100644 --- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts @@ -22,7 +22,10 @@ import { ContainerComponent } from './container.component'; ] }) export class AppModule { - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + } } // #enddocregion heroupgrade @@ -33,7 +36,4 @@ angular.module('heroApp', []) downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory ); -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts index a1bec385e0..9d467a5411 100644 --- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts +++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts @@ -8,7 +8,8 @@ export const heroDetail = {
- ` + `, + transclude: true }; // #enddocregion diff --git a/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts index 7a6b82cf92..3b8794d4de 100644 --- a/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts @@ -11,7 +11,10 @@ import { UpgradeModule } from '@angular/upgrade/static'; ] }) export class AppModule { - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + } } // #enddocregion ngmodule angular.module('heroApp', []) @@ -22,8 +25,5 @@ angular.module('heroApp', []) // #docregion bootstrap import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); +platformBrowserDynamic().bootstrapModule(AppModule); // #enddocregion bootstrap diff --git a/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts index 639b780d1b..15dc5743c2 100644 --- a/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts @@ -1,10 +1,12 @@ +// #docregion ng1module angular.module('heroApp', []) .controller('MainCtrl', function() { this.message = 'Hello world'; }); +// #enddocregion ng1module document.addEventListener('DOMContentLoaded', function() { // #docregion bootstrap - angular.bootstrap(document.body, ['heroApp'], {strictDi: true}); + angular.bootstrap(document.body, ['heroApp'], { strictDi: true }); // #enddocregion bootstrap }); diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts index 080f80f0ef..ab48681354 100644 --- a/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts @@ -20,7 +20,10 @@ import { HeroDetailComponent } from './hero-detail.component'; ] }) export class AppModule { - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + } } angular.module('heroApp', []) @@ -30,7 +33,4 @@ angular.module('heroApp', []) inputs: ['hero'] }) as angular.IDirectiveFactory); -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts index 4e0eca003a..8386a995f4 100644 --- a/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts @@ -27,7 +27,10 @@ import { heroesServiceProvider } from './ajs-upgraded-providers'; // #docregion register }) export class AppModule { - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + } } // #enddocregion register @@ -38,7 +41,4 @@ angular.module('heroApp', []) downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory ); -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts deleted file mode 100644 index 1fae3f84c6..0000000000 --- a/aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'my-app', - template: ` - -
- `, -}) -export class AppComponent { } diff --git a/aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts deleted file mode 100644 index 7d85a23c94..0000000000 --- a/aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts +++ /dev/null @@ -1,62 +0,0 @@ -// #docregion -declare var angular: angular.IAngularStatic; -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; - -import { HeroModule } from './hero.module'; - -// #docregion router-config -import { HashLocationStrategy, LocationStrategy } from '@angular/common'; -import { RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router'; -import { AppComponent } from './app.component'; - -class HybridUrlHandlingStrategy implements UrlHandlingStrategy { - // use only process the `/hero` url - shouldProcessUrl(url: UrlTree) { return url.toString().startsWith('/hero'); } - extract(url: UrlTree) { return url; } - merge(url: UrlTree, whole: UrlTree) { return url; } -} - -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule, - HeroModule, - RouterModule.forRoot([]) - ], - providers: [ - // use hash location strategy - { provide: LocationStrategy, useClass: HashLocationStrategy }, - // use custom url handling strategy - { provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy } - ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion router-config - -import { Villain } from '../villain'; - -export const villainDetail = { - template: ` -

Villain detail

-

{{$ctrl.villain.name}} - {{$ctrl.villain.description}}

- `, - controller: function() { - this.villain = new Villain(1, 'Mr. Nice', 'No More Mr. Nice Guy'); - } -}; - -angular.module('heroApp', ['ngRoute']) - .component('villainDetail', villainDetail) - .config(['$locationProvider', '$routeProvider', - function config($locationProvider: angular.ILocationProvider, - $routeProvider: angular.route.IRouteProvider) { - // #docregion ajs-route - $routeProvider - .when('/villain', { template: '' }); - // #enddocregion ajs-route - } - ]); diff --git a/aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts deleted file mode 100644 index 33099d0a9f..0000000000 --- a/aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { Hero } from '../hero'; - -@Component({ - template: ` -

Hero detail

-

{{hero.name}} - {{hero.description}}

- ` -}) -export class HeroDetailComponent { - hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds'); -} - -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; - -@NgModule({ - imports: [ - CommonModule, - // #docregion a-route - RouterModule.forChild([ - { path: 'hero', children: [ - { path: '', component: HeroDetailComponent }, - ] }, - ]) - // #enddocregion a-route - ], - declarations: [ HeroDetailComponent ] -}) -export class HeroModule {} diff --git a/aio/content/examples/upgrade-module/src/app/divide-routes/main.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/main.ts deleted file mode 100644 index 9b4d37ebc3..0000000000 --- a/aio/content/examples/upgrade-module/src/app/divide-routes/main.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { UpgradeModule } from '@angular/upgrade/static'; - -import { AppModule } from './app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts index 1e836cfc9d..22dd29ae6d 100644 --- a/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts @@ -23,21 +23,17 @@ import { HeroDetailComponent } from './hero-detail.component'; ] }) export class AppModule { - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + } } // #docregion downgradecomponent angular.module('heroApp', []) .controller('MainController', MainController) - .directive('heroDetail', downgradeComponent({ - component: HeroDetailComponent, - inputs: ['hero'], - outputs: ['deleted'] - }) as angular.IDirectiveFactory); + .directive('heroDetail', downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory); // #enddocregion downgradecomponent -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts b/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts index 4d621d2f03..5925082197 100644 --- a/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts @@ -21,7 +21,10 @@ import { HeroDetailComponent } from './hero-detail.component'; ] }) export class AppModule { - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + } } // #enddocregion ngmodule // #docregion downgradecomponent @@ -31,12 +34,9 @@ import { downgradeComponent } from '@angular/upgrade/static'; angular.module('heroApp', []) .directive( 'heroDetail', - downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory + downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory ); // #enddocregion downgradecomponent -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts b/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts index e1b14d2dfc..23fc7853d7 100644 --- a/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts +++ b/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts @@ -8,15 +8,15 @@ export function heroDetailDirective() { deleted: '&' }, template: ` -

{{ctrl.hero.name}} details!

-
{{ctrl.hero.id}}
- +

{{$ctrl.hero.name}} details!

+
{{$ctrl.hero.id}}
+ `, controller: function() { this.onDelete = () => { this.deleted({hero: this.hero}); }; }, - controllerAs: 'ctrl' + controllerAs: '$ctrl' }; } diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts index 599e711b5e..e95104cbcc 100644 --- a/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts @@ -22,7 +22,10 @@ import { ContainerComponent } from './container.component'; ] }) export class AppModule { - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + } } // #enddocregion heroupgrade @@ -33,7 +36,4 @@ angular.module('heroApp', []) downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory ); -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts index 401963c35e..d6377ecda8 100644 --- a/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts +++ b/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts @@ -24,7 +24,10 @@ import { ContainerComponent } from './container.component'; ] }) export class AppModule { - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + } } // #enddocregion hero-detail-upgrade @@ -35,7 +38,4 @@ angular.module('heroApp', []) downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory ); -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); -}); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts index 02ddd293eb..7e649022f2 100644 --- a/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts +++ b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts @@ -11,7 +11,7 @@ export const heroDetail = { // #enddocregion hero-detail // #docregion hero-detail-upgrade -import { Directive, ElementRef, Injector } from '@angular/core'; +import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core'; import { UpgradeComponent } from '@angular/upgrade/static'; @Directive({ diff --git a/aio/content/examples/upgrade-module/src/index-divide-routes.html b/aio/content/examples/upgrade-module/src/index-divide-routes.html deleted file mode 100644 index ee9a56ab36..0000000000 --- a/aio/content/examples/upgrade-module/src/index-divide-routes.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - Angular 2 Upgrade - - - - - - - - - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts index ea570e3cbf..ba8b01c246 100644 --- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts +++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts @@ -67,7 +67,10 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; }) export class AppModule { // #enddocregion bare - ngDoBootstrap() {} + constructor(private upgrade: UpgradeModule) { } + ngDoBootstrap() { + this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); + } // #docregion bare } // #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts index 23a741c684..bbf091409d 100644 --- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts +++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts @@ -1,10 +1,6 @@ // #docregion import { platformBrowser } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory'; -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.documentElement, ['phonecatApp']); -}); +platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts deleted file mode 100644 index 886e8ffac8..0000000000 --- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion bootstrap -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { UpgradeModule } from '@angular/upgrade/static'; - -import { AppModule } from './app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.documentElement, ['phonecatApp']); -}); -// #enddocregion bootstrap diff --git a/aio/content/examples/upgrade-phonecat-4-final/README.md b/aio/content/examples/upgrade-phonecat-3-final/README.md similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/README.md rename to aio/content/examples/upgrade-phonecat-3-final/README.md diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/app-routing.module.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/app-routing.module.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/app.component.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app.component.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/app.component.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/app.component.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.css b/aio/content/examples/upgrade-phonecat-3-final/app/app.css similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/app.css rename to aio/content/examples/upgrade-phonecat-3-final/app/app.css diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/app.module.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/app.module.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.spec.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.spec.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-3-final/app/img/.gitkeep similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/.gitkeep rename to aio/content/examples/upgrade-phonecat-3-final/app/img/.gitkeep diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.1.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.2.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.3.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.4.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-venue.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-venue.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-venue.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-venue.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-2-global-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-2-global-by-motorola.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-2-global-by-motorola.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-2-global-by-motorola.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-pro-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-pro-by-motorola.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-pro-by-motorola.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-pro-by-motorola.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/lg-axis.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/lg-axis.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/lg-axis.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/lg-axis.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.1.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.2.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.3.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-bravo-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-charm-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-charm-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-charm-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-charm-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-defy-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-defy-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-defy-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-defy-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.1.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.2.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.3.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.4.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.5.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.1.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.2.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.1.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.2.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.3.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-galaxy-tab.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-galaxy-tab.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-galaxy-tab.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-galaxy-tab.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-gem.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-gem.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-gem.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-gem.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-transform.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-transform.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-transform.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-transform.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/sanyo-zio.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/sanyo-zio.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/sanyo-zio.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/sanyo-zio.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-g2.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-g2.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-g2.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-g2.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-mytouch-4g.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-mytouch-4g.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-mytouch-4g.0.jpg rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-mytouch-4g.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/main.ts b/aio/content/examples/upgrade-phonecat-3-final/app/main.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/main.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/main.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.spec.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.template.html rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.spec.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.ts rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.template.html rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/dell-streak-7.json rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-atrix-4g.json rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom-with-wi-fi.json rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom.json rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/nexus-s.json rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/phones.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/phones.json rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/phones.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/e2e-spec.ts rename to aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/example-config.json b/aio/content/examples/upgrade-phonecat-3-final/example-config.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/example-config.json rename to aio/content/examples/upgrade-phonecat-3-final/example-config.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/index.html b/aio/content/examples/upgrade-phonecat-3-final/index.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/index.html rename to aio/content/examples/upgrade-phonecat-3-final/index.html diff --git a/aio/content/examples/upgrade-phonecat-4-final/run-unit-tests.sh b/aio/content/examples/upgrade-phonecat-3-final/run-unit-tests.sh similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/run-unit-tests.sh rename to aio/content/examples/upgrade-phonecat-3-final/run-unit-tests.sh diff --git a/aio/content/examples/upgrade-phonecat-4-final/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/systemjs.config.1.js rename to aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js diff --git a/aio/content/examples/upgrade-phonecat-3-router/tsconfig.json b/aio/content/examples/upgrade-phonecat-3-final/tsconfig.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/tsconfig.json rename to aio/content/examples/upgrade-phonecat-3-final/tsconfig.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/.gitignore b/aio/content/examples/upgrade-phonecat-3-router/.gitignore deleted file mode 100644 index 7f5c313a3e..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/.gitignore +++ /dev/null @@ -1,7 +0,0 @@ -**/*.js -aot/**/* -!aot/bs-config.json -!aot/index.html -!copy-dist-files.js -!rollup-config.js -!systemjs.config.1.js diff --git a/aio/content/examples/upgrade-phonecat-3-router/README.md b/aio/content/examples/upgrade-phonecat-3-router/README.md deleted file mode 100644 index 4f8e4928af..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/README.md +++ /dev/null @@ -1,34 +0,0 @@ -This is the Angular Phonecat application adjusted to fit our boilerplate project -structure. - -The following changes from vanilla Phonecat are applied: - -* Karma config for unit tests is in karma.conf.ng1.js because the boilerplate - Karma config is not compatible with the way Angular 1 tests need to be run. - The shell script run-unit-tests.sh can be used to run the unit tests. -* There's a `package.ng1.json`, which is not used to run anything but only to - show an example of changing the PhoneCat http-server root path. -* Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't - used but is shown in the test appendix. -* Instead of using Bower, Angular 1 and its dependencies are fetched from a CDN - in index.html and karma.conf.ng1.js. -* E2E tests have been moved to the parent directory, where `run-e2e-tests` can - discover and run them along with all the other examples. -* Most of the phone JSON and image data removed in the interest of keeping - repo weight down. Keeping enough to retain testability of the app. - -## Running the app - -Start like any example - - npm run start - -## Running unit tests - - ./run-unit-tests.sh - -## Running E2E tests - -Like for any example (at the project root): - - gulp run-e2e-tests --filter=phonecat-2 diff --git a/aio/content/examples/upgrade-phonecat-3-router/aot/index.html b/aio/content/examples/upgrade-phonecat-3-router/aot/index.html deleted file mode 100644 index 0d6cf5946e..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/aot/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - Google Phone Gallery - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/ajs-upgraded-providers.ts b/aio/content/examples/upgrade-phonecat-3-router/app/ajs-upgraded-providers.ts deleted file mode 100644 index f6e1654d74..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/ajs-upgraded-providers.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -export abstract class RouteParams { - [key: string]: string; -} - -export function routeParamsFactory(i: any) { - return i.get('$routeParams'); -} - -export const routeParamsProvider = { - provide: RouteParams, - useFactory: routeParamsFactory, - deps: ['$injector'] -}; diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app-routing.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app-routing.module.ts deleted file mode 100644 index 0485b1848d..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/app-routing.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { Routes, RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router'; -import { APP_BASE_HREF, HashLocationStrategy, LocationStrategy } from '@angular/common'; - -import { PhoneListComponent } from './phone-list/phone-list.component'; - -export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy { - shouldProcessUrl(url: UrlTree) { - return url.toString() === '/' || url.toString() === '/phones'; - } - extract(url: UrlTree) { return url; } - merge(url: UrlTree, whole: UrlTree) { return url; } -} - -const routes: Routes = [ - { path: '', redirectTo: 'phones', pathMatch: 'full' }, - { path: 'phones', component: PhoneListComponent } -]; - -@NgModule({ - imports: [ RouterModule.forRoot(routes) ], - exports: [ RouterModule ], - providers: [ - { provide: APP_BASE_HREF, useValue: '!' }, - { provide: LocationStrategy, useClass: HashLocationStrategy }, - { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy } - ] -}) -export class AppRoutingModule { } diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.css b/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.css deleted file mode 100644 index 175320b509..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.css +++ /dev/null @@ -1,67 +0,0 @@ -/* Animate `ngRepeat` in `phoneList` component */ -.phone-list-item.ng-enter, -.phone-list-item.ng-leave, -.phone-list-item.ng-move { - overflow: hidden; - transition: 0.5s linear all; -} - -.phone-list-item.ng-enter, -.phone-list-item.ng-leave.ng-leave-active, -.phone-list-item.ng-move { - height: 0; - margin-bottom: 0; - opacity: 0; - padding-bottom: 0; - padding-top: 0; -} - -.phone-list-item.ng-enter.ng-enter-active, -.phone-list-item.ng-leave, -.phone-list-item.ng-move.ng-move-active { - height: 120px; - margin-bottom: 20px; - opacity: 1; - padding-bottom: 4px; - padding-top: 15px; -} - -/* Animate view transitions with `ngView` */ -.view-container { - position: relative; -} - -.view-frame { - margin-top: 20px; -} - -.view-frame.ng-enter, -.view-frame.ng-leave { - background: white; - left: 0; - position: absolute; - right: 0; - top: 0; -} - -.view-frame.ng-enter { - animation: 1s fade-in; - z-index: 100; -} - -.view-frame.ng-leave { - animation: 1s fade-out; - z-index: 99; -} - -@keyframes fade-in { - from { opacity: 0; } - to { opacity: 1; } -} - -@keyframes fade-out { - from { opacity: 1; } - to { opacity: 0; } -} - -/* Older browsers might need vendor-prefixes for keyframes and animation! */ diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.ts deleted file mode 100644 index f0739b6405..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.ts +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; - -angular. - module('phonecatApp'). - animation('.phone', function phoneAnimationFactory() { - return { - addClass: animateIn, - removeClass: animateOut - }; - - function animateIn(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } - - element.css({ - display: 'block', - position: 'absolute', - top: 500, - left: 0 - }).animate({ - top: 0 - }, done); - - return function animateInEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; - } - - function animateOut(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } - - element.css({ - position: 'absolute', - top: 0, - left: 0 - }).animate({ - top: -500 - }, done); - - return function animateOutEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; - } - }); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.component.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.component.ts deleted file mode 100644 index 6ecd19ab80..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/app.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'phonecat-app', - template: ` - -
-
-
- ` -}) -export class AppComponent { } diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.config.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.config.ts deleted file mode 100644 index 51a5d82422..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/app.config.ts +++ /dev/null @@ -1,16 +0,0 @@ -'use strict'; - -angular. - module('phonecatApp'). - config(['$locationProvider', '$routeProvider', - function config($locationProvider: angular.ILocationProvider, - $routeProvider: angular.route.IRouteProvider) { - $locationProvider.hashPrefix('!'); - // #docregion ajs-routes - $routeProvider - .when('/phones/:phoneId', { - template: '' - }); - // #enddocregion ajs-routes - } - ]); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ajs.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ajs.ts deleted file mode 100644 index e493137966..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ajs.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -'use strict'; - -// Define the `phonecatApp` Angular 1 module -angular.module('phonecatApp', [ - 'ngAnimate', - 'ngRoute', - 'core', - 'phoneDetail', - 'phoneList', -]); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ts deleted file mode 100644 index e0bb64f4e4..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ts +++ /dev/null @@ -1,42 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; -import { HttpModule } from '@angular/http'; -import { FormsModule } from '@angular/forms'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { Phone } from './core/phone/phone.service'; -import { CheckmarkPipe } from './core/checkmark/checkmark.pipe'; -import { PhoneListComponent } from './phone-list/phone-list.component'; -import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; -import { routeParamsProvider } from './ajs-upgraded-providers'; - -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule, - HttpModule, - FormsModule, - AppRoutingModule - ], - declarations: [ - AppComponent, - PhoneListComponent, - PhoneDetailComponent, - CheckmarkPipe - ], - entryComponents: [ - PhoneListComponent, - PhoneDetailComponent - ], - providers: [ - Phone, - routeParamsProvider - ], - // #docregion bootstrap - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion bootstrap diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.spec.ts deleted file mode 100644 index f7485ec2ba..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { CheckmarkPipe } from './checkmark.pipe'; - -describe('CheckmarkPipe', function() { - - it('should convert boolean values to unicode checkmark or cross', function () { - const checkmarkPipe = new CheckmarkPipe(); - expect(checkmarkPipe.transform(true)).toBe('\u2713'); - expect(checkmarkPipe.transform(false)).toBe('\u2718'); - }); -}); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/core.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/core.module.ts deleted file mode 100644 index 84a91dc7a6..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/core/core.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -// Define the `core` module -angular.module('core', ['core.phone']); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.module.ts deleted file mode 100644 index 0b6b348899..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -// Define the `core.phone` module -angular.module('core.phone', ['ngResource']); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.spec.ts deleted file mode 100644 index a0c1655c20..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.spec.ts +++ /dev/null @@ -1,51 +0,0 @@ -// #docregion -import { inject, TestBed } from '@angular/core/testing'; -import { - Http, - BaseRequestOptions, - ResponseOptions, - Response -} from '@angular/http'; -import { MockBackend, MockConnection } from '@angular/http/testing'; -import { Phone, PhoneData } from './phone.service'; - -describe('Phone', function() { - let phone: Phone; - let phonesData: PhoneData[] = [ - {name: 'Phone X', snippet: '', images: []}, - {name: 'Phone Y', snippet: '', images: []}, - {name: 'Phone Z', snippet: '', images: []} - ]; - let mockBackend: MockBackend; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [ - Phone, - MockBackend, - BaseRequestOptions, - { provide: Http, - useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options), - deps: [MockBackend, BaseRequestOptions] - } - ] - }); - }); - - beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => { - mockBackend = _mockBackend_; - phone = _phone_; - })); - - it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => { - mockBackend.connections.subscribe((conn: MockConnection) => { - conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)}))); - }); - phone.query().subscribe(result => { - expect(result).toEqual(phonesData); - done(); - }); - }); - -}); - diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.ts deleted file mode 100644 index ccbd1fdd72..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.ts +++ /dev/null @@ -1,32 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; -import { Observable } from 'rxjs/Rx'; - -declare var angular: angular.IAngularStatic; -import { downgradeInjectable } from '@angular/upgrade/static'; - -import 'rxjs/add/operator/map'; - -export interface PhoneData { - name: string; - snippet: string; - images: string[]; -} - -@Injectable() -export class Phone { - constructor(private http: Http) { } - query(): Observable { - return this.http.get(`phones/phones.json`) - .map((res: Response) => res.json()); - } - get(id: string): Observable { - return this.http.get(`phones/${id}.json`) - .map((res: Response) => res.json()); - } -} - -angular.module('core.phone') - .factory('phone', downgradeInjectable(Phone)); - diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/main-aot.ts b/aio/content/examples/upgrade-phonecat-3-router/app/main-aot.ts deleted file mode 100644 index 23a741c684..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/main-aot.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { platformBrowser } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; - -import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory'; - -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.documentElement, ['phonecatApp']); -}); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/main.ts b/aio/content/examples/upgrade-phonecat-3-router/app/main.ts deleted file mode 100644 index 51b8e4d2a8..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/main.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { UpgradeModule } from '@angular/upgrade/static'; - -import { AppModule } from './app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.documentElement, ['phonecatApp']); -}); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts deleted file mode 100644 index e9e666ceef..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docplaster -// #docregion -declare var angular: angular.IAngularStatic; -import { downgradeComponent } from '@angular/upgrade/static'; -import { Component } from '@angular/core'; - -import { Phone, PhoneData } from '../core/phone/phone.service'; -import { RouteParams } from '../ajs-upgraded-providers'; - -@Component({ - templateUrl: './phone-detail.template.html', -}) -export class PhoneDetailComponent { - phone: PhoneData; - mainImageUrl: string; - - constructor(routeParams: RouteParams, phone: Phone) { - phone.get(routeParams['phoneId']).subscribe(phone => { - this.phone = phone; - this.setImage(phone.images[0]); - }); - } - - setImage(imageUrl: string) { - this.mainImageUrl = imageUrl; - } -} - -angular.module('phoneDetail') - .directive( - 'phoneDetail', - downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory - ); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.module.ts deleted file mode 100644 index fd7cb3b920..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.module.ts +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -// Define the `phoneDetail` module -angular.module('phoneDetail', [ - 'ngRoute', - 'core.phone' -]); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.spec.ts deleted file mode 100644 index 2bb9d2b62f..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.spec.ts +++ /dev/null @@ -1,66 +0,0 @@ -/* tslint:disable */ -// #docregion -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs/Rx'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { SpyLocation } from '@angular/common/testing'; - -import { PhoneListComponent } from './phone-list.component'; -import { Phone, PhoneData } from '../core/phone/phone.service'; - -class ActivatedRouteMock { - constructor(public snapshot: any) {} -} - -class MockPhone { - query(): Observable { - return Observable.of([ - {name: 'Nexus S', snippet: '', images: []}, - {name: 'Motorola DROID', snippet: '', images: []} - ]); - } -} - -let fixture: ComponentFixture; - -describe('PhoneList', () => { - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ PhoneListComponent ], - providers: [ - { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }, - { provide: Location, useClass: SpyLocation }, - { provide: Phone, useClass: MockPhone }, - ], - schemas: [ NO_ERRORS_SCHEMA ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(PhoneListComponent); - }); - - it('should create "phones" model with 2 phones fetched from xhr', () => { - fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelectorAll('.phone-list-item').length).toBe(2); - expect( - compiled.querySelector('.phone-list-item:nth-child(1)').textContent - ).toContain('Motorola DROID'); - expect( - compiled.querySelector('.phone-list-item:nth-child(2)').textContent - ).toContain('Nexus S'); - }); - - xit('should set the default value of orderProp model', () => { - fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - expect( - compiled.querySelector('select option:last-child').selected - ).toBe(true); - }); - -}); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts deleted file mode 100644 index e730024952..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts +++ /dev/null @@ -1,60 +0,0 @@ -// #docregion -declare var angular: angular.IAngularStatic; -import { downgradeComponent } from '@angular/upgrade/static'; - -import { Component } from '@angular/core'; -import { Phone, PhoneData } from '../core/phone/phone.service'; - -@Component({ - templateUrl: './phone-list.template.html' -}) -export class PhoneListComponent { - phones: PhoneData[]; - query: string; - orderProp: string; - - constructor(phone: Phone) { - phone.query().subscribe(phones => { - this.phones = phones; - }); - this.orderProp = 'age'; - } - - getPhones(): PhoneData[] { - return this.sortPhones(this.filterPhones(this.phones)); - } - - private filterPhones(phones: PhoneData[]) { - if (phones && this.query) { - return phones.filter(phone => { - let name = phone.name.toLowerCase(); - let snippet = phone.snippet.toLowerCase(); - return name.indexOf(this.query) >= 0 || snippet.indexOf(this.query) >= 0; - }); - } - return phones; - } - - private sortPhones(phones: PhoneData[]) { - if (phones && this.orderProp) { - return phones - .slice(0) // Make a copy - .sort((a, b) => { - if (a[this.orderProp] < b[this.orderProp]) { - return -1; - } else if ([b[this.orderProp] < a[this.orderProp]]) { - return 1; - } else { - return 0; - } - }); - } - return phones; - } -} - -angular.module('phoneList') - .directive( - 'phoneList', - downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory - ); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.module.ts deleted file mode 100644 index 8ade7c5b88..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -// Define the `phoneList` module -angular.module('phoneList', ['core.phone']); diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.template.html deleted file mode 100644 index 2678d384c2..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.template.html +++ /dev/null @@ -1,38 +0,0 @@ -
-
-
- - -

- Search: - -

- -

- Sort by: - -

- -
-
- - - - - - -
-
-
diff --git a/aio/content/examples/upgrade-phonecat-3-router/bs-config.aot.json b/aio/content/examples/upgrade-phonecat-3-router/bs-config.aot.json deleted file mode 100644 index e59a7403a0..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/bs-config.aot.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "open": false, - "logLevel": "silent", - "port": 8080, - "server": { - "baseDir": "aot", - "routes": { - "/node_modules": "node_modules" - }, - "middleware": { - "0": null - } - } -} diff --git a/aio/content/examples/upgrade-phonecat-3-router/copy-dist-files.js b/aio/content/examples/upgrade-phonecat-3-router/copy-dist-files.js deleted file mode 100644 index a857af085c..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/copy-dist-files.js +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -var fsExtra = require('fs-extra'); -var resources = [ - // polyfills - 'node_modules/core-js/client/shim.min.js', - 'node_modules/zone.js/dist/zone.min.js', - // css - 'app/app.css', - 'app/app.animations.css', - // images and json files - 'app/img/', - 'app/phones/', - // app files - 'app/app.module.ajs.js', - 'app/app.config.js', - 'app/app.animations.js', - 'app/core/core.module.js', - 'app/core/phone/phone.module.js', - 'app/phone-list/phone-list.module.js', - 'app/phone-detail/phone-detail.module.js' -]; -resources.map(function(sourcePath) { - var destPath = `aot/${sourcePath}`; - fsExtra.copySync(sourcePath, destPath); -}); diff --git a/aio/content/examples/upgrade-phonecat-3-router/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-3-router/e2e-spec.ts deleted file mode 100644 index c0669774b9..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/e2e-spec.ts +++ /dev/null @@ -1,108 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -// Angular E2E Testing Guide: -// https://docs.angularjs.org/guide/e2e-testing - -describe('PhoneCat Application', function() { - - beforeAll(function () { - // Set protractor to hybrid mode. - browser.rootEl = 'body'; - browser.ng12Hybrid = true; - }); - - it('should redirect `index.html` to `index.html#!/phones', function() { - browser.get('index.html'); - expect(browser.getLocationAbsUrl()).toBe('/phones'); - }); - - describe('View: Phone list', function() { - - beforeEach(function() { - browser.get('index.html#!/phones'); - }); - - it('should filter the phone list as a user types into the search box', function() { - let phoneList = element.all(by.css('.phones li')); - let query = element(by.css('input')); - - expect(phoneList.count()).toBe(20); - - query.sendKeys('nexus'); - expect(phoneList.count()).toBe(1); - - query.clear(); - query.sendKeys('motorola'); - expect(phoneList.count()).toBe(8); - }); - - it('should be possible to control phone order via the drop-down menu', function() { - let queryField = element(by.css('input')); - let orderSelect = element(by.css('select')); - let nameOption = orderSelect.element(by.css('option[value="name"]')); - let phoneNameColumn = element.all(by.css('.phones .name')); - - function getNames() { - return phoneNameColumn.map(function(elem) { - return elem.getText(); - }); - } - - queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter - - expect(getNames()).toEqual([ - 'Motorola XOOM\u2122 with Wi-Fi', - 'MOTOROLA XOOM\u2122' - ]); - - nameOption.click(); - - expect(getNames()).toEqual([ - 'MOTOROLA XOOM\u2122', - 'Motorola XOOM\u2122 with Wi-Fi' - ]); - }); - - it('should render phone specific links', function() { - let query = element(by.css('input')); - query.sendKeys('nexus'); - - element.all(by.css('.phones li a')).first().click(); - browser.sleep(200); // Not sure why this is needed but it is. The route change works fine. - expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s'); - }); - - }); - - describe('View: Phone detail', function() { - - beforeEach(function() { - browser.get('index.html#!/phones/nexus-s'); - }); - - it('should display the `nexus-s` page', function() { - expect(element(by.css('h1')).getText()).toBe('Nexus S'); - }); - - it('should display the first phone image as the main phone image', function() { - let mainImage = element(by.css('img.phone.selected')); - - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); - }); - - it('should swap the main image when clicking on a thumbnail image', function() { - let mainImage = element(by.css('img.phone.selected')); - let thumbnails = element.all(by.css('.phone-thumbs img')); - - thumbnails.get(2).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); - - thumbnails.get(0).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); - }); - - }); - -}); diff --git a/aio/content/examples/upgrade-phonecat-3-router/index.html b/aio/content/examples/upgrade-phonecat-3-router/index.html deleted file mode 100644 index 572c80d315..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - Google Phone Gallery - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/aio/content/examples/upgrade-phonecat-3-router/rollup-config.js b/aio/content/examples/upgrade-phonecat-3-router/rollup-config.js deleted file mode 100644 index aeb227689c..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/rollup-config.js +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import rollup from 'rollup' -import nodeResolve from 'rollup-plugin-node-resolve' -import commonjs from 'rollup-plugin-commonjs'; -import uglify from 'rollup-plugin-uglify' - -//paths are relative to the execution path -export default { - entry: 'app/main-aot.js', - dest: 'aot/dist/build.js', // output a single application bundle - sourceMap: true, - sourceMapFile: 'aot/dist/build.js.map', - format: 'iife', - plugins: [ - nodeResolve({jsnext: true, module: true}), - commonjs({ - include: ['node_modules/rxjs/**'] - }), - uglify() - ] -} diff --git a/aio/content/examples/upgrade-phonecat-3-router/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-3-router/systemjs.config.1.js deleted file mode 100644 index 82dd2d3890..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/systemjs.config.1.js +++ /dev/null @@ -1,54 +0,0 @@ -/** - * System configuration for Angular samples - * Adjust as necessary for your application needs. - */ -(function (global) { - // #docregion paths - System.config({ - paths: { - // paths serve as alias - 'npm:': '/node_modules/' - }, - map: { - 'ng-loader': '../src/systemjs-angular-loader.js', - app: '/app', - // #enddocregion paths - // angular bundles - '@angular/core': 'npm:@angular/core/bundles/core.umd.js', - '@angular/common': 'npm:@angular/common/bundles/common.umd.js', - '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', - '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', - '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', - '@angular/http': 'npm:@angular/http/bundles/http.umd.js', - '@angular/router': 'npm:@angular/router/bundles/router.umd.js', - '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', - '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', - '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', - - // other libraries - 'rxjs': 'npm:rxjs', - 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', - // #docregion paths - }, - // #enddocregion paths - // packages tells the System loader how to load when no filename and/or no extension - packages: { - 'app': { - main: './main.js', - defaultExtension: 'js', - meta: { - './*.js': { - loader: 'ng-loader' - } - } - }, - rxjs: { - defaultExtension: 'js' - }, - 'angular-in-memory-web-api': { - main: './index.js', - defaultExtension: 'js' - } - } - }); -})(this); diff --git a/aio/content/examples/upgrade-phonecat-3-router/tsconfig-aot.json b/aio/content/examples/upgrade-phonecat-3-router/tsconfig-aot.json deleted file mode 100644 index 91807a25a9..0000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/tsconfig-aot.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "es2015", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": ["es2015", "dom"], - "removeComments": false, - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true, - "typeRoots": [ - "./node_modules/@types/" - ] - }, - - "files": [ - "app/app.module.ts", - "app/main-aot.ts" - ], - - "angularCompilerOptions": { - "genDir": "aot", - "skipMetadataEmit" : true - } -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/app.css b/aio/content/examples/upgrade-phonecat-4-final/app/app.css deleted file mode 100644 index f4b45b02a5..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/app.css +++ /dev/null @@ -1,93 +0,0 @@ -body { - padding: 20px; -} - -h1 { - border-bottom: 1px solid gray; - margin-top: 0; -} - -/* View: Phone list */ -.phones { - list-style: none; -} - -.phones li { - clear: both; - height: 115px; - padding-top: 15px; -} - -.thumb { - float: left; - height: 100px; - margin: -0.5em 1em 1.5em 0; - padding-bottom: 1em; - width: 100px; -} - -/* View: Phone detail */ -.phone { - background-color: white; - display: none; - float: left; - height: 400px; - margin-bottom: 2em; - margin-right: 3em; - padding: 2em; - width: 400px; -} - -.phone:first-child { - display: block; -} - -.phone-images { - background-color: white; - float: left; - height: 450px; - overflow: hidden; - position: relative; - width: 450px; -} - -.phone-thumbs { - list-style: none; - margin: 0; -} - -.phone-thumbs img { - height: 100px; - padding: 1em; - width: 100px; -} - -.phone-thumbs li { - background-color: white; - border: 1px solid black; - cursor: pointer; - display: inline-block; - margin: 1em; -} - -.specs { - clear: both; - list-style: none; - margin: 0; - padding: 0; -} - -.specs dt { - font-weight: bold; -} - -.specs > li { - display: inline-block; - vertical-align: top; - width: 200px; -} - -.specs > li > span { - font-size: 1.2em; - font-weight: bold; -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.ts b/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.ts deleted file mode 100644 index 888017e15c..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({name: 'checkmark'}) -export class CheckmarkPipe implements PipeTransform { - transform(input: boolean) { - return input ? '\u2713' : '\u2718'; - } -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-4-final/app/img/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.0.jpg deleted file mode 100644 index 7ce0dce4ee..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.1.jpg deleted file mode 100644 index ed8cad89fb..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.1.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.2.jpg deleted file mode 100644 index c83529e0f9..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.2.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.3.jpg deleted file mode 100644 index cd2c30280d..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.3.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.4.jpg deleted file mode 100644 index b4d8472da8..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.4.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-venue.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-venue.0.jpg deleted file mode 100644 index b4cb4eb25f..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-venue.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-2-global-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-2-global-by-motorola.0.jpg deleted file mode 100644 index 60700a2ab3..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-2-global-by-motorola.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-pro-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-pro-by-motorola.0.jpg deleted file mode 100644 index c7710de986..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-pro-by-motorola.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/lg-axis.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/lg-axis.0.jpg deleted file mode 100644 index 55e5a23bb2..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/lg-axis.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.0.jpg deleted file mode 100644 index 2446159e93..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.1.jpg deleted file mode 100644 index 867f207459..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.1.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.2.jpg deleted file mode 100644 index 27d78338c4..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.2.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.3.jpg deleted file mode 100644 index 29459a68a4..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.3.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg deleted file mode 100644 index e452ae7e7c..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-charm-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-charm-with-motoblur.0.jpg deleted file mode 100644 index 21e4b8d741..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-charm-with-motoblur.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-defy-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-defy-with-motoblur.0.jpg deleted file mode 100644 index c7c5e3ba0c..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-defy-with-motoblur.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg deleted file mode 100644 index a6c993291e..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg deleted file mode 100644 index 400b89e2df..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg deleted file mode 100644 index 86b55d28dd..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg deleted file mode 100644 index 85ec293ae5..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg deleted file mode 100644 index 75ef1464cb..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg deleted file mode 100644 index 4d42db4330..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.0.jpg deleted file mode 100644 index bf6954bbd5..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.1.jpg deleted file mode 100644 index 659688a47d..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.1.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.2.jpg deleted file mode 100644 index ce0ff1002e..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.2.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.0.jpg deleted file mode 100644 index 0952bc79c2..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.1.jpg deleted file mode 100644 index f33004dd7f..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.1.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.2.jpg deleted file mode 100644 index c5c63621f1..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.2.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.3.jpg deleted file mode 100644 index e51f75b0ed..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.3.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-galaxy-tab.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-galaxy-tab.0.jpg deleted file mode 100644 index 3750377ad9..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-galaxy-tab.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-gem.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-gem.0.jpg deleted file mode 100644 index 0d5024a026..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-gem.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg deleted file mode 100644 index 11b8f860cb..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg deleted file mode 100644 index 11b8f860cb..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-transform.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-transform.0.jpg deleted file mode 100644 index 0e3107caf5..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-transform.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/sanyo-zio.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/sanyo-zio.0.jpg deleted file mode 100644 index 9eeb9b96ed..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/sanyo-zio.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-g2.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-g2.0.jpg deleted file mode 100644 index 6b6c09e058..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-g2.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-mytouch-4g.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-mytouch-4g.0.jpg deleted file mode 100644 index beba1f6827..0000000000 Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-mytouch-4g.0.jpg and /dev/null differ diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.spec.ts deleted file mode 100644 index e3b9143a94..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -// #docregion -// #docregion activatedroute -import { ActivatedRoute } from '@angular/router'; - -// #enddocregion activatedroute -import { Observable } from 'rxjs/Rx'; - -import { async, TestBed } from '@angular/core/testing'; - -import { PhoneDetailComponent } from './phone-detail.component'; -import { Phone, PhoneData } from '../core/phone/phone.service'; -import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe'; - -function xyzPhoneData(): PhoneData { - return { - name: 'phone xyz', - snippet: '', - images: ['image/url1.png', 'image/url2.png'] - }; -} - -class MockPhone { - get(id: string): Observable { - return Observable.of(xyzPhoneData()); - } -} - -// #docregion activatedroute - -class ActivatedRouteMock { - constructor(public snapshot: any) {} -} - -// #enddocregion activatedroute - -describe('PhoneDetailComponent', () => { - - // #docregion activatedroute - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CheckmarkPipe, PhoneDetailComponent ], - providers: [ - { provide: Phone, useClass: MockPhone }, - { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) } - ] - }) - .compileComponents(); - })); - // #enddocregion activatedroute - - it('should fetch phone detail', () => { - const fixture = TestBed.createComponent(PhoneDetailComponent); - fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain(xyzPhoneData().name); - }); - -}); diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.template.html deleted file mode 100644 index 46a96d66c3..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.template.html +++ /dev/null @@ -1,120 +0,0 @@ - -
-
- -
- -

{{phone.name}}

- -

{{phone.description}}

- -
    -
  • - -
    • -
- -
    -
  • - Availability and Networks -
    -
    Availability
    -
    {{availability}}
    -
    -
    • -
  • - Battery -
    -
    Type
    -
    {{phone.battery?.type}}
    -
    Talk Time
    -
    {{phone.battery?.talkTime}}
    -
    Standby time (max)
    -
    {{phone.battery?.standbyTime}}
    -
    -
    • -
  • - Storage and Memory -
    -
    RAM
    -
    {{phone.storage?.ram}}
    -
    Internal Storage
    -
    {{phone.storage?.flash}}
    -
    -
    • -
  • - Connectivity -
    -
    Network Support
    -
    {{phone.connectivity?.cell}}
    -
    WiFi
    -
    {{phone.connectivity?.wifi}}
    -
    Bluetooth
    -
    {{phone.connectivity?.bluetooth}}
    -
    Infrared
    -
    {{phone.connectivity?.infrared | checkmark}}
    -
    GPS
    -
    {{phone.connectivity?.gps | checkmark}}
    -
    -
    • -
  • - Android -
    -
    OS Version
    -
    {{phone.android?.os}}
    -
    UI
    -
    {{phone.android?.ui}}
    -
    -
    • -
  • - Size and Weight -
    -
    Dimensions
    -
    {{dim}}
    -
    Weight
    -
    {{phone.sizeAndWeight?.weight}}
    -
    -
    • -
  • - Display -
    -
    Screen size
    -
    {{phone.display?.screenSize}}
    -
    Screen resolution
    -
    {{phone.display?.screenResolution}}
    -
    Touch screen
    -
    {{phone.display?.touchScreen | checkmark}}
    -
    -
    • -
  • - Hardware -
    -
    CPU
    -
    {{phone.hardware?.cpu}}
    -
    USB
    -
    {{phone.hardware?.usb}}
    -
    Audio / headphone jack
    -
    {{phone.hardware?.audioJack}}
    -
    FM Radio
    -
    {{phone.hardware?.fmRadio | checkmark}}
    -
    Accelerometer
    -
    {{phone.hardware?.accelerometer | checkmark}}
    -
    -
    • -
  • - Camera -
    -
    Primary
    -
    {{phone.camera?.primary}}
    -
    Features
    -
    {{phone.camera?.features?.join(', ')}}
    -
    -
    • -
  • - Additional Features -
    {{phone.additionalFeatures}}
    -
    • -
-
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/dell-streak-7.json deleted file mode 100644 index a32eb6ff98..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/dell-streak-7.json +++ /dev/null @@ -1,64 +0,0 @@ -{ - "additionalFeatures": "Front Facing 1.3MP Camera", - "android": { - "os": "Android 2.2", - "ui": "Dell Stage" - }, - "availability": [ - "T-Mobile" - ], - "battery": { - "standbyTime": "", - "talkTime": "", - "type": "Lithium Ion (Li-Ion) (2780 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "T-mobile HSPA+ @ 2100/1900/AWS/850 MHz", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g" - }, - "description": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around. Android\u2122 2.2-based tablet with over-the-air upgrade capability for future OS releases. A vibrant 7-inch, multitouch display with full Adobe\u00ae Flash 10.1 pre-installed. Includes a 1.3 MP front-facing camera for face-to-face chats on popular services such as Qik or Skype. 16 GB of internal storage, plus Wi-Fi, Bluetooth and built-in GPS keeps you in touch with the world around you. Connect on your terms. Save with 2-year contract or flexibility with prepaid pay-as-you-go plans", - "display": { - "screenResolution": "WVGA (800 x 480)", - "screenSize": "7.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "nVidia Tegra T20", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "dell-streak-7", - "images": [ - "img/phones/dell-streak-7.0.jpg", - "img/phones/dell-streak-7.1.jpg", - "img/phones/dell-streak-7.2.jpg", - "img/phones/dell-streak-7.3.jpg", - "img/phones/dell-streak-7.4.jpg" - ], - "name": "Dell Streak 7", - "sizeAndWeight": { - "dimensions": [ - "199.9 mm (w)", - "119.8 mm (h)", - "12.4 mm (d)" - ], - "weight": "450.0 grams" - }, - "storage": { - "flash": "16000MB", - "ram": "512MB" - } -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-atrix-4g.json deleted file mode 100644 index ccca00e3b2..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-atrix-4g.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "additionalFeatures": "", - "android": { - "os": "Android 2.2", - "ui": "MOTOBLUR" - }, - "availability": [ - "AT&T" - ], - "battery": { - "standbyTime": "400 hours", - "talkTime": "5 hours", - "type": "Lithium Ion (Li-Ion) (1930 mAH)" - }, - "camera": { - "features": [ - "" - ], - "primary": "" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "WCDMA 850/1900/2100, GSM 850/900/1800/1900, HSDPA 14Mbps (Category 10) Edge Class 12, GPRS Class 12, eCompass, AGPS", - "gps": true, - "infrared": false, - "wifi": "802.11 a/b/g/n" - }, - "description": "MOTOROLA ATRIX 4G gives you dual-core processing power and the revolutionary webtop application. With webtop and a compatible Motorola docking station, sold separately, you can surf the Internet with a full Firefox browser, create and edit docs, or access multimedia on a large screen almost anywhere.", - "display": { - "screenResolution": "QHD (960 x 540)", - "screenSize": "4.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-atrix-4g", - "images": [ - "img/phones/motorola-atrix-4g.0.jpg", - "img/phones/motorola-atrix-4g.1.jpg", - "img/phones/motorola-atrix-4g.2.jpg", - "img/phones/motorola-atrix-4g.3.jpg" - ], - "name": "MOTOROLA ATRIX\u2122 4G", - "sizeAndWeight": { - "dimensions": [ - "63.5 mm (w)", - "117.75 mm (h)", - "10.95 mm (d)" - ], - "weight": "135.0 grams" - }, - "storage": { - "flash": "", - "ram": "" - } -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom-with-wi-fi.json deleted file mode 100644 index 4ba9c8d5b5..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom-with-wi-fi.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "additionalFeatures": "Sensors: proximity, ambient light, barometer, gyroscope", - "android": { - "os": "Android 3.0", - "ui": "Honeycomb" - }, - "availability": [ - "" - ], - "battery": { - "standbyTime": "336 hours", - "talkTime": "24 hours", - "type": "Other ( mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g/n" - }, - "description": "Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", - "display": { - "screenResolution": "WXGA (1200 x 800)", - "screenSize": "10.1 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core Tegra 2", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-xoom-with-wi-fi", - "images": [ - "img/phones/motorola-xoom-with-wi-fi.0.jpg", - "img/phones/motorola-xoom-with-wi-fi.1.jpg", - "img/phones/motorola-xoom-with-wi-fi.2.jpg", - "img/phones/motorola-xoom-with-wi-fi.3.jpg", - "img/phones/motorola-xoom-with-wi-fi.4.jpg", - "img/phones/motorola-xoom-with-wi-fi.5.jpg" - ], - "name": "Motorola XOOM\u2122 with Wi-Fi", - "sizeAndWeight": { - "dimensions": [ - "249.1 mm (w)", - "167.8 mm (h)", - "12.9 mm (d)" - ], - "weight": "708.0 grams" - }, - "storage": { - "flash": "32000MB", - "ram": "1000MB" - } -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom.json deleted file mode 100644 index f0f0c8711d..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "additionalFeatures": "Front-facing camera. Sensors: proximity, ambient light, barometer, gyroscope.", - "android": { - "os": "Android 3.0", - "ui": "Android" - }, - "availability": [ - "Verizon" - ], - "battery": { - "standbyTime": "336 hours", - "talkTime": "24 hours", - "type": "Other (3250 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "CDMA 800 /1900 LTE 700, Rx diversity in all bands", - "gps": true, - "infrared": false, - "wifi": "802.11 a/b/g/n" - }, - "description": "MOTOROLA XOOM has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", - "display": { - "screenResolution": "WXGA (1200 x 800)", - "screenSize": "10.1 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core Tegra 2", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-xoom", - "images": [ - "img/phones/motorola-xoom.0.jpg", - "img/phones/motorola-xoom.1.jpg", - "img/phones/motorola-xoom.2.jpg" - ], - "name": "MOTOROLA XOOM\u2122", - "sizeAndWeight": { - "dimensions": [ - "249.0 mm (w)", - "168.0 mm (h)", - "12.7 mm (d)" - ], - "weight": "726.0 grams" - }, - "storage": { - "flash": "32000MB", - "ram": "1000MB" - } -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/nexus-s.json deleted file mode 100644 index 5e712e2ff8..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/nexus-s.json +++ /dev/null @@ -1,69 +0,0 @@ -{ - "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope, Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)", - "android": { - "os": "Android 2.3", - "ui": "Android" - }, - "availability": [ - "M1,", - "O2,", - "Orange,", - "Singtel,", - "StarHub,", - "T-Mobile,", - "Vodafone" - ], - "battery": { - "standbyTime": "428 hours", - "talkTime": "6 hours", - "type": "Lithium Ion (Li-Ion) (1500 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "Quad-band GSM: 850, 900, 1800, 1900\r\nTri-band HSPA: 900, 2100, 1700\r\nHSPA type: HSDPA (7.2Mbps) HSUPA (5.76Mbps)", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g/n" - }, - "description": "Nexus S is the next generation of Nexus devices, co-developed by Google and Samsung. The latest Android platform (Gingerbread), paired with a 1 GHz Hummingbird processor and 16GB of memory, makes Nexus S one of the fastest phones on the market. It comes pre-installed with the best of Google apps and enabled with new and popular features like true multi-tasking, Wi-Fi hotspot, Internet Calling, NFC support, and full web browsing. With this device, users will also be the first to receive software upgrades and new Google mobile apps as soon as they become available. For more details, visit http://www.google.com/nexus.", - "display": { - "screenResolution": "WVGA (800 x 480)", - "screenSize": "4.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1GHz Cortex A8 (Hummingbird) processor", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "nexus-s", - "images": [ - "img/phones/nexus-s.0.jpg", - "img/phones/nexus-s.1.jpg", - "img/phones/nexus-s.2.jpg", - "img/phones/nexus-s.3.jpg" - ], - "name": "Nexus S", - "sizeAndWeight": { - "dimensions": [ - "63.0 mm (w)", - "123.9 mm (h)", - "10.88 mm (d)" - ], - "weight": "129.0 grams" - }, - "storage": { - "flash": "16384MB", - "ram": "512MB" - } -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/phones.json deleted file mode 100644 index 339b94fbb5..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/phones.json +++ /dev/null @@ -1,155 +0,0 @@ -[ - { - "age": 0, - "id": "motorola-xoom-with-wi-fi", - "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", - "name": "Motorola XOOM\u2122 with Wi-Fi", - "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 1, - "id": "motorola-xoom", - "imageUrl": "img/phones/motorola-xoom.0.jpg", - "name": "MOTOROLA XOOM\u2122", - "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 2, - "carrier": "AT&T", - "id": "motorola-atrix-4g", - "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", - "name": "MOTOROLA ATRIX\u2122 4G", - "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone." - }, - { - "age": 3, - "id": "dell-streak-7", - "imageUrl": "img/phones/dell-streak-7.0.jpg", - "name": "Dell Streak 7", - "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around." - }, - { - "age": 4, - "carrier": "Cellular South", - "id": "samsung-gem", - "imageUrl": "img/phones/samsung-gem.0.jpg", - "name": "Samsung Gem\u2122", - "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price." - }, - { - "age": 5, - "carrier": "Dell", - "id": "dell-venue", - "imageUrl": "img/phones/dell-venue.0.jpg", - "name": "Dell Venue", - "snippet": "The Dell Venue; Your Personal Express Lane to Everything" - }, - { - "age": 6, - "carrier": "Best Buy", - "id": "nexus-s", - "imageUrl": "img/phones/nexus-s.0.jpg", - "name": "Nexus S", - "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet." - }, - { - "age": 7, - "carrier": "Cellular South", - "id": "lg-axis", - "imageUrl": "img/phones/lg-axis.0.jpg", - "name": "LG Axis", - "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens" - }, - { - "age": 8, - "id": "samsung-galaxy-tab", - "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", - "name": "Samsung Galaxy Tab\u2122", - "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility." - }, - { - "age": 9, - "carrier": "Cellular South", - "id": "samsung-showcase-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", - "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors" - }, - { - "age": 10, - "carrier": "Verizon", - "id": "droid-2-global-by-motorola", - "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", - "name": "DROID\u2122 2 Global by Motorola", - "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities." - }, - { - "age": 11, - "carrier": "Verizon", - "id": "droid-pro-by-motorola", - "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", - "name": "DROID\u2122 Pro by Motorola", - "snippet": "The next generation of DOES." - }, - { - "age": 12, - "carrier": "AT&T", - "id": "motorola-bravo-with-motoblur", - "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", - "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", - "snippet": "An experience to cheer about." - }, - { - "age": 13, - "carrier": "T-Mobile", - "id": "motorola-defy-with-motoblur", - "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", - "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", - "snippet": "Are you ready for everything life throws your way?" - }, - { - "age": 14, - "carrier": "T-Mobile", - "id": "t-mobile-mytouch-4g", - "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", - "name": "T-Mobile myTouch 4G", - "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi." - }, - { - "age": 15, - "carrier": "US Cellular", - "id": "samsung-mesmerize-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", - "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors" - }, - { - "age": 16, - "carrier": "Sprint", - "id": "sanyo-zio", - "imageUrl": "img/phones/sanyo-zio.0.jpg", - "name": "SANYO ZIO", - "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value." - }, - { - "age": 17, - "id": "samsung-transform", - "imageUrl": "img/phones/samsung-transform.0.jpg", - "name": "Samsung Transform\u2122", - "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d." - }, - { - "age": 18, - "id": "t-mobile-g2", - "imageUrl": "img/phones/t-mobile-g2.0.jpg", - "name": "T-Mobile G2", - "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible." - }, - { - "age": 19, - "id": "motorola-charm-with-motoblur", - "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", - "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", - "snippet": "Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service." - } -] diff --git a/aio/content/examples/upgrade-phonecat-4-final/example-config.json b/aio/content/examples/upgrade-phonecat-4-final/example-config.json deleted file mode 100644 index 401c14f835..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/example-config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "build": "build:upgrade", - "run": "serve:upgrade", - "unittesting": true -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/tsconfig.json b/aio/content/examples/upgrade-phonecat-4-final/tsconfig.json deleted file mode 100644 index bdf16643ce..0000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ "es2015", "dom" ], - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true, - "typeRoots": [ - "./node_modules/@types/" - ] - }, - "compileOnSave": true, - "exclude": [ - "node_modules/*", - "**/*-aot.ts" - ] -} diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md index 7ed18be2ec..deea7ad4f0 100644 --- a/aio/content/guide/upgrade.md +++ b/aio/content/guide/upgrade.md @@ -1,11 +1,4 @@ -@title -Upgrading from AngularJS - -@intro -Incrementally upgrade an AngularJS application to Angular. - -@description - +# Upgrading from AngularJS _Angular_ is the name for the Angular of today and tomorrow. _AngularJS_ is the name for all v1.x versions of Angular. @@ -17,12 +10,12 @@ This guide describes the built-in tools for efficiently migrating AngularJS proj Angular platform, a piece at a time. Some applications will be easier to upgrade than others, and there are -ways in which we can make it easier for ourselves. It is possible to +many ways to make it easier for yourself. It is possible to prepare and align AngularJS applications with Angular even before beginning the upgrade process. These preparation steps are all about making the code -more decoupled, more maintainable, and up to speed with modern development -tools. That means the preparation work will not only make the eventual upgrade -easier, but will also generally improve our AngularJS applications. +more decoupled, more maintainable, and better aligned with modern development +tools. That means in addition to making the upgrade easier, +you will also improve the existing AngularJS applications. One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and @@ -32,71 +25,33 @@ business, because the work can be done collaboratively and spread over a period of time. The `upgrade` module in Angular has been designed to make incremental upgrading seamless. - - ## Preparation -There are many ways to structure AngularJS applications. When we begin +There are many ways to structure AngularJS applications. When you begin to upgrade these applications to Angular, some will turn out to be much more easy to work with than others. There are a few key techniques -and patterns that we can apply to future proof our apps even before we +and patterns that you can apply to future proof apps even before you begin the migration. {@a follow-the-angular-styleguide} -### Follow the Angular Style Guide +### Follow the AngularJS Style Guide -The [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility) +The [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md) collects patterns and practices that have been proven to result in cleaner and more maintainable AngularJS applications. It contains a wealth -of information about how to write and organize Angular code - and equally -importantly - how **not** to write and organize Angular code. +of information about how to write and organize AngularJS code - and equally +importantly - how **not** to write and organize AngularJS code. Angular is a reimagined version of the best parts of AngularJS. In that -sense, its goals are the same as the Angular Style Guide's: To preserve +sense, its goals are the same as the AngularJS Style Guide's: To preserve the good parts of AngularJS, and to avoid the bad parts. There's a lot more to Angular than just that of course, but this does mean that *following the style guide helps make your AngularJS app more closely aligned with Angular*. There are a few rules in particular that will make it much easier to do - -*an incremental upgrade* using the Angular `upgrade` module: +*an incremental upgrade* using the Angular `upgrade/static` module: * The [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility) states that there should be one component per file. This not only makes @@ -111,13 +66,13 @@ There are a few rules in particular that will make it much easier to do When an application is laid out feature per feature in this way, it can also be migrated one feature at a time. For applications that don't already look like -this, applying the rules in the Angular style guide is a highly recommended +this, applying the rules in the AngularJS style guide is a highly recommended preparation step. And this is not just for the sake of the upgrade - it is just solid advice in general! ### Using a Module Loader -When we break application code down into one component per file, we often end +When you break application code down into one component per file, you often end up with a project structure with a large number of relatively small files. This is a much neater way to organize things than a small number of large files, but it doesn't work that well if you have to load all those files to the HTML page with @@ -126,48 +81,50 @@ order. That's why it's a good idea to start using a *module loader*. Using a module loader such as [SystemJS](https://github.com/systemjs/systemjs), [Webpack](http://webpack.github.io/), or [Browserify](http://browserify.org/) -allows us to use the built-in module systems of the TypeScript or ES2015 languages in our apps. -We can use the `import` and `export` features that explicitly specify what code can +allows us to use the built-in module systems of TypeScript or ES2015. +You can use the `import` and `export` features that explicitly specify what code can and will be shared between different parts of the application. For ES5 applications -we can use CommonJS style `require` and `module.exports` features. In both cases, +you can use CommonJS style `require` and `module.exports` features. In both cases, the module loader will then take care of loading all the code the application needs in the correct order. -When we then take our applications into production, module loaders also make it easier +When moving applications into production, module loaders also make it easier to package them all up into production bundles with batteries included. - ### Migrating to TypeScript -If part of our Angular upgrade plan is to also take TypeScript into use, it makes +If part of the Angular upgrade plan is to also take TypeScript into use, it makes sense to bring in the TypeScript compiler even before the upgrade itself begins. This means there's one less thing to learn and think about during the actual upgrade. -It also means we can start using TypeScript features in our AngularJS code. +It also means you can start using TypeScript features in your AngularJS code. Since TypeScript is a superset of ECMAScript 2015, which in turn is a superset of ECMAScript 5, "switching" to TypeScript doesn't necessarily require anything -more than installing the TypeScript compiler and switching renaming files from +more than installing the TypeScript compiler and renaming files from `*.js` to `*.ts`. But just doing that is not hugely useful or exciting, of course. Additional steps like the following can give us much more bang for the buck: * For applications that use a module loader, TypeScript imports and exports (which are really ECMAScript 2015 imports and exports) can be used to organize code into modules. + * Type annotations can be gradually added to existing functions and variables to pin down their types and get benefits like build-time error checking, great autocompletion support and inline documentation. + * JavaScript features new to ES2015, like arrow functions, `let`s and `const`s, default function parameters, and destructuring assignments can also be gradually added to make the code more expressive. + * Services and controllers can be turned into *classes*. That way they'll be a step - closer to becoming Angular service and component classes, which will make our - life easier once we do the upgrade. + closer to becoming Angular service and component classes, which will make + life easier after the upgrade. ### Using Component Directives In Angular, components are the main primitive from which user interfaces -are built. We define the different parts of our UIs as components, and then -compose the UI by using components in our templates. +are built. You define the different portions of the UI as components and +compose them into a full user experience. You can also do this in AngularJS, using *component directives*. These are directives that define their own templates, controllers, and input/output bindings - @@ -181,7 +138,7 @@ these attributes: * `restrict: 'E'`. Components are usually used as elements. * `scope: {}` - an isolate scope. In Angular, components are always isolated - from their surroundings, and we should do this in AngularJS too. + from their surroundings, and you should do this in AngularJS too. * `bindToController: {}`. Component inputs and outputs should be bound to the controller instead of using the `$scope`. * `controller` and `controllerAs`. Components have their own controllers. @@ -189,11 +146,11 @@ these attributes: Component directives may also use the following attributes: -* `transclude: true`, if the component needs to transclude content from elsewhere. +* `transclude: true/{}`, if the component needs to transclude content from elsewhere. * `require`, if the component needs to communicate with some parent component's controller. -Component directives **may not** use the following attributes: +Component directives **should not** use the following attributes: * `compile`. This will not be supported in Angular. * `replace: true`. Angular never replaces a component element with the @@ -205,15 +162,11 @@ Component directives **may not** use the following attributes: An AngularJS component directive that is fully aligned with the Angular architecture may look something like this: - - - + - - -AngularJS 1.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module) -that makes it easier to define directives like these. It is a good idea to use +AngularJS 1.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module#component) +that makes it easier to define component directives like these. It is a good idea to use this API for component directives for several reasons: * It requires less boilerplate code. @@ -223,40 +176,34 @@ this API for component directives for several reasons: The component directive example from above looks like this when expressed using the component API: - - - + - - Controller lifecycle hook methods `$onInit()`, `$onDestroy()`, and `$onChanges()` are another convenient feature that AngularJS 1.5 introduces. They all have nearly exact [equivalents in Angular](guide/lifecycle-hooks), so organizing component lifecycle logic around them will ease the eventual Angular upgrade process. +## Upgrading with ngUpgrade - -## Upgrading with The Upgrade Module - -The `upgrade` module in Angular is a very useful tool for upgrading -anything but the smallest of applications. With it we can mix and match +The ngUpgrade library in Angular is a very useful tool for upgrading +anything but the smallest of applications. With it you can mix and match AngularJS and Angular components in the same application and have them interoperate -seamlessly. That means we don't have to do the upgrade work all at once, +seamlessly. That means you don't have to do the upgrade work all at once, since there's a natural coexistence between the two frameworks during the transition period. -### How The Upgrade Module Works +### How ngUpgrade Works -The primary tool provided by the upgrade module is called the `UpgradeModule`. -This is a service that can bootstrap and manage hybrid applications that support -both Angular and AngularJS code. +The primary tool provided by ngUpgrade is called the `UpgradeModule`. +This is a module that contains utilities for bootstrapping and managing hybrid +applications that support both Angular and AngularJS code. -When we use `UpgradeModule`, what we're really doing is *running both versions -of Angular at the same time*. All Angular code is running in the Angular +When you use ngUpgrade, what you're really doing is *running both AngularJS and +Angular at the same time*. All Angular code is running in the Angular framework, and AngularJS code in the AngularJS framework. Both of these are the actual, fully featured versions of the frameworks. There is no emulation going on, -so we can expect to have all the features and natural behavior of both frameworks. +so you can expect to have all the features and natural behavior of both frameworks. What happens on top of this is that components and services managed by one framework can interoperate with those from the other framework. This happens @@ -268,62 +215,43 @@ Dependency injection is front and center in both AngularJS and Angular, but there are some key differences between the two frameworks in how it actually works. - - - - - - - - - - - - - -
AngularJS Angular
- - Dependency injection tokens are always strings - Tokens [can have different types](guide/dependency-injection). They are often classes. They may also be strings. +
- There is exactly one injector. Even in multi-module applications, everything is poured into one big namespace. + - There is a [tree hierarchy of injectors](guide/hierarchical-dependency-injection), with a root injector and an additional injector for each component.
- - -Even accounting for these differences we can still have dependency injection +Even accounting for these differences you can still have dependency injection interoperability. The `UpgradeModule` resolves the differences and makes everything work seamlessly: @@ -335,74 +263,58 @@ everything work seamlessly: * You can also make Angular services available for injection to AngularJS code by *downgrading* them. Only services from the Angular root injector can be downgraded. Again, the same singleton instances are shared between the frameworks. - When we register a downgrade, we explicitly specify a *string token* that we want to + When you register a downgraded service, you must explicitly specify a *string token* that you want to use in AngularJS. -
The two injectors in a hybrid application
- - #### Components and the DOM -What we'll find in the DOM of a hybrid application are components and +In the DOM of a hybrid ngUpgrade application are components and directives from both AngularJS and Angular. These components communicate with each other by using the input and output bindings -of their respective frameworks, which the `UpgradeModule` bridges -together. They may also communicate through shared injected dependencies, -as described above. +of their respective frameworks, which ngUpgrade bridges together. They may also +communicate through shared injected dependencies, as described above. -There are two key things to understand about what happens in the DOM -of a hybrid application: +The key thing to understand about a hybrid application is that every element in the DOM is owned by exactly one of the two frameworks. +The other framework ignores it. If an element is +owned by AngularJS, Angular treats it as if it didn't exist, +and vice versa. -1. Every element in the DOM is owned by exactly one of the two - frameworks. The other framework ignores it. If an element is - owned by AngularJS, Angular treats it as if it didn't exist, - and vice versa. - -2. The root of the application *is always an AngularJS template*. - -So a hybrid application begins life as an AngularJS application, -and it is AngularJS that processes its root template. Angular then steps -into the picture when an Angular component is used somewhere in -the application templates. That component's view will then be managed -by Angular, and it may use any number of Angular components and +So normally a hybrid application begins life as an AngularJS application, +and it is AngularJS that processes the root template, e.g. the index.html. +Angular then steps into the picture when an Angular component is used somewhere +in an AngularJS template. That component's template will then be managed +by Angular, and it may contain any number of Angular components and directives. -Beyond that, we may interleave the two frameworks as much as we need to. -We always cross the boundary between the two frameworks by one of two +Beyond that, you may interleave the two frameworks. +You always cross the boundary between the two frameworks by one of two ways: 1. By using a component from the other framework: An AngularJS template using an Angular component, or an Angular template using an AngularJS component. -2. By transcluding or projecting content from the other framework. The - `UpgradeModule` bridges the related concepts of AngularJS transclusion - and Angular content projection together. - +2. By transcluding or projecting content from the other framework. ngUpgrade + bridges the related concepts of AngularJS transclusion and Angular content + projection together.
DOM element ownership in a hybrid application
- - -Whenever we use a component that belongs to the other framework, a +Whenever you use a component that belongs to the other framework, a switch between framework boundaries occurs. However, that switch only -happens to the *children* of the component element. Consider a situation -where we use an Angular component from AngularJS like this: - +happens to the elements in the template of that component. Consider a situation +where you use an Angular component from AngularJS like this: - - + <a-component></a-component> - - The DOM element `` will remain to be an AngularJS managed element, because it's defined in an AngularJS template. That also means you can apply additional AngularJS directives to it, but *not* @@ -410,14 +322,11 @@ Angular directives. It is only in the template of the `` where Angular steps in. This same rule also applies when you use AngularJS component directives from Angular. - #### Change Detection -Change detection in AngularJS is all about `scope.$apply()`. After every -event that occurs, `scope.$apply()` gets called. This is done either -automatically by the framework, or in some cases manually by our own -code. It is the point in time when change detection occurs and data -bindings get updated. +The `scope.$apply()` is how AngularJS detects changes and updates data bindings. +After every event that occurs, `scope.$apply()` gets called. This is done either +automatically by the framework, or manually by you. In Angular things are different. While change detection still occurs after every event, no one needs to call `scope.$apply()` for @@ -433,37 +342,33 @@ AngularJS and Angular approaches. Here's what happens: * Everything that happens in the application runs inside the Angular zone. This is true whether the event originated in AngularJS or Angular code. The zone triggers Angular change detection after every event. + * The `UpgradeModule` will invoke the AngularJS `$rootScope.$apply()` after every turn of the Angular zone. This also triggers AngularJS change detection after every event. -
Change detection in a hybrid application
+In practice, you do not need to call `$apply()`, +regardless of whether it is in AngularJS on Angular. The +`UpgradeModule` does it for us. You *can* still call `$apply()` so there +is no need to remove such calls from existing code. Those calls just trigger +additional AngularJS change detection checks in a hybrid application. - -What this means in practice is that we do not need to call `$apply()` in -our code, regardless of whether it is in AngularJS on Angular. The -`UpgradeModule` does it for us. We *can* still call `$apply()` so there -is no need to remove such calls from existing code. Those calls just don't -have any effect in a hybrid application. - - - -When we downgrade an Angular component and then use it from AngularJS, +When you downgrade an Angular component and then use it from AngularJS, the component's inputs will be watched using AngularJS change detection. When those inputs change, the corresponding properties in the component -are set. We can also hook into the changes by implementing the +are set. You can also hook into the changes by implementing the [OnChanges](api/core/OnChanges) interface in the component, -just like we could if it hadn't been downgraded. +just like you could if it hadn't been downgraded. -Correspondingly, when we upgrade an AngularJS component and use it from Angular, +Correspondingly, when you upgrade an AngularJS component and use it from Angular, all the bindings defined for the component directive's `scope` (or `bindToController`) will be hooked into Angular change detection. They will be treated -as regular Angular inputs and set onto the scope (or controller) when -they change. +as regular Angular inputs. Their values will be written to the upgraded component's +scope (or controller) when they change. ### Using UpgradeModule with Angular _NgModules_ @@ -475,469 +380,334 @@ In AngularJS, you add Angular assets to the `angular.module` property. In Angular, you create one or more classes adorned with an `NgModule` decorator that describes Angular assets in metadata. The differences blossom from there. -In a hybrid application we run both versions of Angular at the same time. -That means that we need at least one module each from both AngularJS and Angular. -We will import `UpgradeModule` inside our Angular module, and then use it for -bootstrapping our AngularJS module. Let's see how. - +In a hybrid application you run both versions of Angular at the same time. +That means that you need at least one module each from both AngularJS and Angular. +You will import `UpgradeModule` inside the Angular module, and then use it for +bootstrapping the AngularJS module.
- - Learn more about Angular modules at the [NgModule guide](guide/ngmodule). -
- - ### Bootstrapping hybrid applications -The first step to upgrading an application using the `UpgradeModule` is -always to bootstrap it as a hybrid that supports both AngularJS and -Angular, but still is an AngularJS app at top level. +To bootstrap a hybrid application, you must bootstrap each of the Angular and +AngularJS parts of the application. You must bootstrap the Angular bits first and +then ask the `UpgradeModule` to bootstrap the AngularJS bits next. -Pure AngularJS applications can be bootstrapped in two ways: By using an `ng-app` -directive somewhere on the HTML page, or by calling -[angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap) -from JavaScript. In Angular, only the second method is possible - there is -no `ng-app` in Angular. This is also the case for hybrid applications. -Therefore, it is a good preliminary step to switch AngularJS applications to use the -JavaScript bootstrap method even before switching them to hybrid mode. - -Say we have an `ng-app` driven bootstrap such as this one: - - - +In an AngularJS application you have a root AngularJS module, which will also +be used to bootstrap the AngularJS application. + +Pure AngularJS applications can be automatically bootstrapped by using an `ng-app` +directive somewhere on the HTML page. But for hybrid applications, you manually bootstrap via the +`UpgradeModule`. Therefore, it is a good preliminary step to switch AngularJS applications to use the +manual JavaScript [`angular.bootstrap`](https://docs.angularjs.org/api/ng/function/angular.bootstrap) +method even before switching them to hybrid mode. +Say you have an `ng-app` driven bootstrap such as this one: -We can remove the `ng-app` and `ng-strict-di` directives from the HTML + + + +You can remove the `ng-app` and `ng-strict-di` directives from the HTML and instead switch to calling `angular.bootstrap` from JavaScript, which will result in the same thing: - - - + +To begin converting your AngularJS application to a hybrid, you need to load the Angular framework. +You can see how this can be done with SystemJS by following the instructions in [Setup](guide/setup), +selectively copying code from the [QuickStart github repository](https://github.com/angular/quickstart). +You also need to install the `@angular/upgrade` package via `npm install @angular/upgrade --save` +and add a mapping for the `@angular/upgrade/static` package: -Now introduce Angular to the project. Inspired by instructions in -[the Setup](guide/setup), you can selectively copy in material from the -QuickStart github repository. + + Next, create an `app.module.ts` file and add the following `NgModule` class: - - - + - - This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have. +It also imports `UpgradeModule` from `@angular/upgrade/static`, which exports providers that will be used +for upgrading and downgrading services and components. -It also imports `UpgradeModule` from `@angular/upgrade/static`, and adds an override to prevent -Angular from bootstrapping itself in the form of the `ngDoBootstrap` empty class method. - -Now we bootstrap `AppModule` using `platformBrowserDynamic`'s `bootstrapModule` method. -Then we use dependency injection to get a hold of the `UpgradeModule` instance in `AppModule`, -and use it to bootstrap our AngularJS app. +In the constructor of the `AppModule`, use dependency injection to get a hold of the `UpgradeModule` instance, +and use it to bootstrap the AngularJS app in the `AppModule.ngDoBootstrap` method. The `upgrade.bootstrap` method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap): +
- +Note that you do not add a `bootstrap` declaration to the `@NgModule` decorator, since +AngularJS will own the root template of the application. +
+ +Now you can bootstrap `AppModule` using the `platformBrowserDynamic.bootstrapModule` method. + + - - -We also need to install the `@angular/upgrade` package via `npm install @angular/upgrade --save` -and add a mapping for the `@angular/upgrade/static` package: - - - - - - - - Congratulations! You're running a hybrid application! The -existing AngularJS code works as before _and_ you're ready to run Angular code. - +existing AngularJS code works as before _and_ you're ready to start adding Angular code. ### Using Angular Components from AngularJS Code Using an Angular component from AngularJS code - - -Once we're running a hybrid app, we can start the gradual process of upgrading +Once you're running a hybrid app, you can start the gradual process of upgrading code. One of the more common patterns for doing that is to use an Angular component in an AngularJS context. This could be a completely new component or one that was previously AngularJS but has been rewritten for Angular. -Say we have a simple Angular component that shows information about a hero: - +Say you have a simple Angular component that shows information about a hero: - +If you want to use this component from AngularJS, you need to *downgrade* it +using the `downgradeComponent()` method. The result is an AngularJS +*directive*, which you can then register in the AngularJS module: - -If we want to use this component from AngularJS, we need to *downgrade* it -using the `downgradeComponent()` method. What we get when we do that is an AngularJS -*directive*, which we can then register into our AngularJS module: - - - - + - - -Because `HeroDetailComponent` is an Angular component, we must also add it to the +Because `HeroDetailComponent` is an Angular component, you must also add it to the `declarations` in the `AppModule`. And because this component is being used from the AngularJS module, and is an entry point into -our Angular application, we also need to add it to the `entryComponents` for our +the Angular application, you must add it to the `entryComponents` for the Angular module. - - - + - -
- - All Angular components, directives and pipes must be declared in an NgModule. -
+The net result is an AngularJS directive called `heroDetail`, that you can +use like any other directive in AngularJS templates. - -The net result is an AngularJS directive called `heroDetail`, that we can -use like any other directive in our AngularJS templates. - - - - + - -
- - Note that this AngularJS is an element directive (`restrict: 'E'`) called `heroDetail`. An AngularJS element directive is matched based on its _name_. *The `selector` metadata of the downgraded Angular component is ignored.* - -
- - Most components are not quite this simple, of course. Many of them have *inputs and outputs* that connect them to the outside world. An Angular hero detail component with inputs and outputs might look like this: - - - - These inputs and outputs can be supplied from the AngularJS template, and the -`downgradeComponent()` method takes care of bridging them over via the `inputs` -and `outputs` arrays: - - - +`downgradeComponent()` method takes care of wiring them up: + - - - - - - - - -Note that even though we are in an AngularJS template, **we're using Angular +Note that even though you are in an AngularJS template, **you're using Angular attribute syntax to bind the inputs and outputs**. This is a requirement for downgraded components. The expressions themselves are still regular AngularJS expressions. -
- -
Use kebab-case for downgraded component attributes
- - There's one notable exception to the rule of using Angular attribute syntax for downgraded components. It has to do with input or output names that consist -of multiple words. In Angular we would bind these attributes using camelCase: +of multiple words. In Angular, you would bind these attributes using camelCase: [myHero]="hero" - - -But when using them from AngularJS templates, we need to use kebab-case: +But when using them from AngularJS templates, you must use kebab-case: [my-hero]="hero" - - -
- - The `$event` variable can be used in outputs to gain access to the object that was emitted. In this case it will be the `Hero` object, because that is what was passed to `this.deleted.emit()`. -Since this is an AngularJS template, we can still use other AngularJS +Since this is an AngularJS template, you can still use other AngularJS directives on the element, even though it has Angular binding attributes on it. -For example, we can easily make multiple copies of the component using `ng-repeat`: - - - +For example, you can easily make multiple copies of the component using `ng-repeat`: + - - ### Using AngularJS Component Directives from Angular Code Using an AngularJS component from Angular code - -So, we can write an Angular component and then use it from AngularJS -code. This is very useful when we start our migration from lower-level -components and work our way up. But in some cases it is more convenient +So, you can write an Angular component and then use it from AngularJS +code. This is useful when you start to migrate from lower-level +components and work your way up. But in some cases it is more convenient to do things in the opposite order: To start with higher-level components -and work our way down. This too can be done using the `UpgradeModule`. -We can *upgrade* AngularJS component directives and then use them from +and work your way down. This too can be done using the `UpgradeModule`. +You can *upgrade* AngularJS component directives and then use them from Angular. Not all kinds of AngularJS directives can be upgraded. The directive really has to be a *component directive*, with the characteristics [described in the preparation guide above](guide/upgrade#using-component-directives). -Our safest bet for ensuring compatibility is using the +The safest bet for ensuring compatibility is using the [component API](https://docs.angularjs.org/api/ng/type/angular.Module) introduced in AngularJS 1.5. A simple example of an upgradable component is one that just has a template and a controller: - - - - -We can *upgrade* this component to Angular using the `UpgradeComponent` class. +You can *upgrade* this component to Angular using the `UpgradeComponent` class. By creating a new Angular **directive** that extends `UpgradeComponent` and doing a `super` call -inside it's constructor, we have a fully upgrade AngularJS component to be used inside Angular. +inside it's constructor, you have a fully upgraded AngularJS component to be used inside Angular. All that is left is to add it to `AppModule`'s `declarations` array. - - - - - - + - -
- - Upgraded components are Angular **directives**, instead of **components**, because Angular is unaware that AngularJS will create elements under it. As far as Angular knows, the upgraded component is just a directive - a tag - and Angular doesn't have to concern itself with it's children. -
- - An upgraded component may also have inputs and outputs, as defined by the scope/controller bindings of the original AngularJS component -directive. When we use the component from an Angular template, -we provide the inputs and outputs using **Angular template syntax**, -with the following rules: - +directive. When you use the component from an Angular template, +provide the inputs and outputs using **Angular template syntax**, +observing the following rules: - - - - - - - - - - - - + - - - - - - - - - - -
- Binding definition Template syntax
Attribute binding - `myAttribute: '@myAttribute'` + - `` +
Expression binding - `myOutput: '&myOutput'` - - `` +
One-way binding - `myValue: ' + - `` +
Two-way binding - `myValue: '=myValue'` + - As a two-way binding: ``. Since most AngularJS two-way bindings actually only need a one-way binding in practice, `` is often enough.
- - -As an example, say we have a hero detail AngularJS component directive +For example, imagine a hero detail AngularJS component directive with one input and one output: - - - - -We can upgrade this component to Angular, annotate inputs and outputs in the upgrade directive, +You can upgrade this component to Angular, annotate inputs and outputs in the upgrade directive, and then provide the input and output using Angular template syntax: - - - - - - - ### Projecting AngularJS Content into Angular Components Projecting AngularJS content into Angular - -When we are using a downgraded Angular component from an AngularJS +When you are using a downgraded Angular component from an AngularJS template, the need may arise to *transclude* some content into it. This is also possible. While there is no such thing as transclusion in Angular, there is a very similar concept called *content projection*. The `UpgradeModule` @@ -946,500 +716,288 @@ is able to make these two features interoperate. Angular components that support content projection make use of an `` tag within them. Here's an example of such a component: - - - - -When using the component from AngularJS, we can supply contents for it. Just +When using the component from AngularJS, you can supply contents for it. Just like they would be transcluded in AngularJS, they get projected to the location of the `` tag in Angular: - - - + - -
- - When AngularJS content gets projected inside an Angular component, it still remains in "AngularJS land" and is managed by the AngularJS framework. -
- - ### Transcluding Angular Content into AngularJS Component Directives Projecting Angular content into AngularJS -Just like we can project AngularJS content into Angular components, -we can *transclude* Angular content into AngularJS components, whenever -we are using upgraded versions from them. +Just as you can project AngularJS content into Angular components, +you can *transclude* Angular content into AngularJS components, whenever +you are using upgraded versions from them. When an AngularJS component directive supports transclusion, it may use the `ng-transclude` directive in its template to mark the transclusion point: - - - - -
- - - -The directive also needs to have the `transclude: true` option enabled. -It is on by default for component directives defined with the -1.5 component API. - - -
- - - -If we upgrade this component and use it from Angular, we can populate +If you upgrade this component and use it from Angular, you can populate the component tag with contents that will then get transcluded: - - - - ### Making AngularJS Dependencies Injectable to Angular -When running a hybrid app, we may bump into situations where we need to have -some AngularJS dependencies to be injected to Angular code. This may be -because we have some business logic still in AngularJS services, or because -we need some of AngularJS's built-in services like `$location` or `$timeout`. +When running a hybrid app, you may encounter situations where you need to inject +some AngularJS dependencies into your Angular code. +Maybe you have some business logic still in AngularJS services. +Maybe you want access to AngularJS's built-in services like `$location` or `$timeout`. In these situations, it is possible to *upgrade* an AngularJS provider to Angular. This makes it possible to then inject it somewhere in Angular -code. For example, we might have a service called `HeroesService` in AngularJS: - +code. For example, you might have a service called `HeroesService` in AngularJS: - - - -We can upgrade the service using a Angular [Factory provider](guide/dependency-injection#factory-providers) +You can upgrade the service using a Angular [factory provider](guide/dependency-injection#factory-providers) that requests the service from the AngularJS `$injector`. -We recommend declaring the Factory Provider in a separate `ajs-upgraded-providers.ts` file +Many developers prefer to declare the factory provider in a separate `ajs-upgraded-providers.ts` file so that they are all together, making it easier to reference them, create new ones and delete them once the upgrade is over. It's also recommended to export the `heroesServiceFactory` function so that Ahead-of-Time compilation can pick it up. - - - - - - - -We can then inject it in Angular using it's class as a type annotation: - +You can then inject it in Angular using it's class as a type annotation: - -
- - -In this example we upgraded a service class, which has the added benefit that -we can use a TypeScript type annotation when we inject it. While it doesn't +In this example you upgraded a service class. +You can use a TypeScript type annotation when you inject it. While it doesn't affect how the dependency is handled, it enables the benefits of static type checking. This is not required though, and any AngularJS service, factory, or provider can be upgraded. -
- - ### Making Angular Dependencies Injectable to AngularJS -In addition to upgrading AngularJS dependencies, we can also *downgrade* -Angular dependencies, so that we can use them from AngularJS. This can be -useful when we start migrating services to Angular or creating new services -in Angular while we still have components written in AngularJS. - -For example, we might have an Angular service called `Heroes`: +In addition to upgrading AngularJS dependencies, you can also *downgrade* +Angular dependencies, so that you can use them from AngularJS. This can be +useful when you start migrating services to Angular or creating new services +in Angular while retaining components written in AngularJS. +For example, you might have an Angular service called `Heroes`: - - - Again, as with Angular components, register the provider with the `NgModule` by adding it to the module's `providers` list. - - - - -Now wrap the Angular `Heroes` in an *AngularJS factory function* using `downgradeInjectable()`. +Now wrap the Angular `Heroes` in an *AngularJS factory function* using `downgradeInjectable()` and plug the factory into an AngularJS module. The name of the AngularJS dependency is up to you: - - - - -After this, the service is injectable anywhere in our AngularJS code: - +After this, the service is injectable anywhere in AngularJS code: - - - ## Using Ahead-of-time compilation with hybrid apps -We can take advantage of Ahead-of-time (AoT) compilation on hybrid apps just like on any other +You can take advantage of Ahead-of-time (AOT) compilation on hybrid apps just like on any other Angular application. The setup for an hybrid app is mostly the same as described in [the Ahead-of-time Compilation chapter](guide/aot-compiler) save for differences in `index.html` and `main-aot.ts` -Our `index.html` will likely have script tags loading AngularJS files, so the `index.html` we -use for AoT must also load those files. +The `index.html` will likely have script tags loading AngularJS files, so the `index.html` +for AOT must also load those files. An easy way to copy them is by adding each to the `copy-dist-files.js` file. -We also need to use `UpgradeModule` to bootstrap a hybrid app after bootstrapping the -Module Factory: - +You'll need to use the generated `AppModuleFactory`, instead of the original `AppModule` to +bootstrap the hybrid app: - - - -And that's all we need to get the full benefit of AoT for Angular apps! - - -
- - - -The AoT metadata collector will not detect lifecycle hook methods on a parent class' prototype, -so in order for upgraded components to work we needs to implement the lifecycle hooks -on the upgraded component class and forward them to the `UpgradeComponent` parent. - - -
- - - -## Dividing routes between Angular and AngularJS - -Another important part of upgrading is upgrading routes. -We could upgrade our whole app while still using the AngularJS router and then -migrate all the routes in one fell swoop. -But it would be much better to migrate routes one by one as they become upgraded. - -The first step to have a dual router setup is to add an Angular root component containing -one outlet for each router. -AngularJS will use `ng-view`, and Angular will use `router-outlet`. -When one is using it's router, the other outlet will be empty. - - - - - - - - -We want to use this component in the body of our `index.html` instead of an AngularJS component: - - - - - - - - -Next we declare both AngularJS and Angular routes as normal: - - - - - - - - - - - - - - -In our `app.module.ts` we need to add `AppComponent` to the declarations and boostrap array. - -Next we configure the router itself. -We want to use [hash navigation](guide/router#hashlocationstrategy) in Angular -because that's what we're also using in AngularJS. - -Lastly, and most importantly, we want to use a custom `UrlHandlingStrategy` that will tell -the Angular router which routes it should render - and only those. - - - - - - - - -That's it! Now we're running both routers at the same time. - - - +And that's all you need do to get the full benefit of AOT for Angular apps! ## PhoneCat Upgrade Tutorial -In this section and we will look at a complete example of -preparing and upgrading an application using the `upgrade` module. The app -we're going to work on is [Angular PhoneCat](https://github.com/angular/angular-phonecat) +In this section, you'll learn to prepare and upgrade an application with `ngUpgrade`. +The example app is [Angular PhoneCat](https://github.com/angular/angular-phonecat) from [the original AngularJS tutorial](https://docs.angularjs.org/tutorial), -which is where many of us began our Angular adventures. Now we'll see how to +which is where many of us began our Angular adventures. Now you'll see how to bring that application to the brave new world of Angular. -During the process we'll learn how to apply the steps outlined in the -[preparation guide](guide/upgrade#preparation) in practice: We'll align the application -with Angular and also take TypeScript into use. +During the process you'll learn how to apply the steps outlined in the +[preparation guide](guide/upgrade#preparation). You'll align the application +with Angular and also start writing in TypeScript. To follow along with the tutorial, clone the [angular-phonecat](https://github.com/angular/angular-phonecat) repository -and apply the steps as we go. - -In terms of project structure, this is where our work begins: +and apply the steps as you go. +In terms of project structure, this is where the work begins:
-
angular-phonecat
-
-
bower.json
-
karma.conf.js
-
package.json
-
app
-
-
core
-
-
checkmark
-
-
checkmark.filter.js
-
checkmark.filter.spec.js
-
-
phone
-
-
phone.module.js
-
phone.service.js
-
phone.service.spec.js
-
-
core.module.js
-
-
phone-detail
-
-
phone-detail.component.js
-
phone-detail.component.spec.js
-
phone-detail.module.js
-
phone-detail.template.html
-
-
phone-list
-
-
phone-list.component.js
-
phone-list.component.spec.js
-
phone-list.module.js
-
phone-list.template.html
-
-
img
-
-
...
-
-
phones
-
-
...
-
-
app.animations.js
-
app.config.js
-
app.css
-
app.module.js
-
index.html
-
-
e2e-tests
-
-
protractor-conf.js
-
scenarios.js
-
-
-
- - This is actually a pretty good starting point. The code uses the AngularJS 1.5 component API and the organization follows the [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md), @@ -1448,83 +1006,63 @@ a successful upgrade. * Each component, service, and filter is in its own source file, as per the [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility). + * The `core`, `phone-detail`, and `phone-list` modules are each in their own subdirectory. Those subdirectories contain the JavaScript code as well as the HTML templates that go with each particular feature. This is in line with the - [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y152) + [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure) and [Modularity](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity) rules. + * Unit tests are located side-by-side with application code where they are easily found, as described in the rules for - [Organizing Tests](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y197). - + [Organizing Tests](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#organizing-tests). ### Switching to TypeScript -Since we're going to be writing our Angular code in TypeScript, it makes sense to -bring in the TypeScript compiler even before we begin upgrading. +Since you're going to be writing Angular code in TypeScript, it makes sense to +bring in the TypeScript compiler even before you begin upgrading. -We will also start to gradually phase out the Bower package manager in favor -of NPM. We'll install all new dependencies using NPM, and will eventually be -able to remove Bower from the project. - -Let's begin by installing TypeScript to the project. +You'll also start to gradually phase out the Bower package manager in favor +of NPM, installing all new dependencies using NPM, and eventually removing Bower from the project. +Begin by installing TypeScript to the project. npm i typescript --save-dev - - - -Let's also add run scripts for the `tsc` TypeScript compiler to `package.json`: - - -We can now install type definitions for the existing libraries that -we're using but that don't come with prepackaged types: AngularJS and the +Install type definitions for the existing libraries that +you're using but that don't come with prepackaged types: AngularJS and the Jasmine unit test framework. - - npm install @types/jasmine @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev - + npm install @types/jasmine @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev +You should also configure the TypeScript compiler with a `tsconfig.json` in the project directory +as described in the [Setup](guide/setup) guide. +The `tsconfig.json` file tells the TypeScript compiler how to turn your TypeScript files +into ES5 code bundled into CommonJS modules. - -We should also configure the TypeScript compiler so that it can understand our -project. We'll add a `tsconfig.json` file to the project directory, just like we do -in the documentation [setup](guide/setup). It instructs the TypeScript compiler how -to interpret our source files. - - -We are telling the TypeScript compiler to turn our TypeScript files to ES5 code -bundled into CommonJS modules. - -We can now launch the TypeScript compiler from the command line. It will watch -our `.ts` source files and compile them to JavaScript on the fly. Those compiled -`.js` files are then loaded into the browser by SystemJS. This is a process we'll -want to have continuously running in the background as we go along. - +Now launch the TypeScript compiler from the command line in watch mode. npm run tsc:w - +Keep this process running in the background, watching and recompiling as you make changes. - -The next thing we'll do is convert our JavaScript files to TypeScript. Since -TypeScript is a superset of ECMAScript 2015, which in turn is a superset -of ECMAScript 5, we can simply switch the file extensions from `.js` to `.ts` +Next, convert your current JavaScript files into TypeScript. Since +TypeScript is a super-set of ECMAScript 2015, which in turn is a super-set +of ECMAScript 5, you can simply switch the file extensions from `.js` to `.ts` and everything will work just like it did before. As the TypeScript compiler runs, it emits the corresponding `.js` file for every `.ts` file and the compiled JavaScript is what actually gets executed. If you start the project HTTP server with `npm start`, you should see the fully functional application in your browser. -Now that we have TypeScript though, we can start benefiting from some of its +Now that you have TypeScript though, you can start benefiting from some of its features. There's a lot of value the language can provide to AngularJS applications. For one thing, TypeScript is a superset of ES2015. Any app that has previously @@ -1533,132 +1071,106 @@ start incorporating all of the JavaScript features that are new to ES2015. These include things like `let`s and `const`s, arrow functions, default function parameters, and destructuring assignments. -Another thing we can do is start adding *type safety* to our code. This has -actually partially already happened because of the AngularJS typings we installed. -TypeScript are checking that we are calling AngularJS APIs correctly when we do +Another thing you can do is start adding *type safety* to your code. This has +actually partially already happened because of the AngularJS typings you installed. +TypeScript are checking that you are calling AngularJS APIs correctly when you do things like register components to Angular modules. -But we can also start adding *type annotations* for our own code to get even more -out of TypeScript's type system. For instance, we can annotate the checkmark +But you can also start adding *type annotations* to get even more +out of TypeScript's type system. For instance, you can annotate the checkmark filter so that it explicitly expects booleans as arguments. This makes it clearer what the filter is supposed to do. - - - - -In the `Phone` service we can explicitly annotate the `$resource` service dependency +In the `Phone` service, you can explicitly annotate the `$resource` service dependency as an `angular.resource.IResourceService` - a type defined by the AngularJS typings. - - - - -We can apply the same trick to the application's route configuration file in `app.config.ts`, -where we are using the location and route services. By annotating them accordingly TypeScript -can verify we're calling their APIs with the correct kinds of arguments. - +You can apply the same trick to the application's route configuration file in `app.config.ts`, +where you are using the location and route services. By annotating them accordingly TypeScript +can verify you're calling their APIs with the correct kinds of arguments. - - -
- - The [AngularJS 1.x type definitions](https://www.npmjs.com/package/@types/angular) -we installed are not officially maintained by the Angular team, +you installed are not officially maintained by the Angular team, but are quite comprehensive. It is possible to make an AngularJS 1.x application fully type-annotated with the help of these definitions. -If this is something we wanted to do, it would be a good idea to enable +If this is something you wanted to do, it would be a good idea to enable the `noImplicitAny` configuration option in `tsconfig.json`. This would cause the TypeScript compiler to display a warning when there's any code that -does not yet have type annotations. We could use it as a guide to inform -us about how close we are to having a fully annotated project. - +does not yet have type annotations. You could use it as a guide to inform +us about how close you are to having a fully annotated project.
- - -Another TypeScript feature we can make use of is *classes*. In particular, we -can turn our component controllers into classes. That way they'll be a step -closer to becoming Angular component classes, which will make our life -easier once we do the upgrade. +Another TypeScript feature you can make use of is *classes*. In particular, you +can turn component controllers into classes. That way they'll be a step +closer to becoming Angular component classes, which will make life +easier once you upgrade. AngularJS expects controllers to be constructor functions. That's exactly what -ES2015/TypeScript classes are under the hood, so that means we can just plug in a +ES2015/TypeScript classes are under the hood, so that means you can just plug in a class as a component controller and AngularJS will happily use it. -Here's what our new class for the phone list component controller looks like: - +Here's what the new class for the phone list component controller looks like: - - - What was previously done in the controller function is now done in the class constructor function. The dependency injection annotations are attached to the class using a static property `$inject`. At runtime this becomes the `PhoneListController.$inject` property. The class additionally declares three members: The array of phones, the name of -the current sort key, and the search query. These are all things we have already +the current sort key, and the search query. These are all things you have already been attaching to the controller but that weren't explicitly declared anywhere. The last one of these isn't actually used in the TypeScript code since it's only -referred to in the template, but for the sake of clarity we want to define all the -members our controller will have. +referred to in the template, but for the sake of clarity you should define all of the +controller members. -In the Phone detail controller we'll have two members: One for the phone +In the Phone detail controller, you'll have two members: One for the phone that the user is looking at and another for the URL of the currently displayed image: - - - - -This makes our controller code look a lot more like Angular already. We're +This makes the controller code look a lot more like Angular already. You're all set to actually introduce Angular into the project. -If we had any AngularJS services in the project, those would also be +If you had any AngularJS services in the project, those would also be a good candidate for converting to classes, since like controllers, -they're also constructor functions. But we only have the `Phone` factory +they're also constructor functions. But you only have the `Phone` factory in this project, and that's a bit special since it's an `ngResource` -factory. So we won't be doing anything to it in the preparation stage. -We'll instead turn it directly into an Angular service. +factory. So you won't be doing anything to it in the preparation stage. +You'll instead turn it directly into an Angular service. ### Installing Angular -Having completed our preparation work, let's get going with the Angular -upgrade of PhoneCat. We'll do this incrementally with the help of the -[upgrade module](guide/upgrade#upgrading-with-the-upgrade-module) that comes with Angular. -By the time we're done, we'll be able to remove AngularJS from the project +Having completed the preparation work, get going with the Angular +upgrade of PhoneCat. You'll do this incrementally with the help of +[ngUpgrade](#upgrading-with-ngupgrade) that comes with Angular. +By the time you're done, you'll be able to remove AngularJS from the project completely, but the key is to do this piece by piece without breaking the application. -
-The project also contains some animations, which we are not yet upgrading in this version of the guide. This will change in a later release. +The project also contains some animations. +You won't upgrade them in this version of the guide. +Turn to the [Angular animations](guide/animations) guide to learn about that.
- - -Let's install Angular into the project, along with the SystemJS module loader. +Install Angular into the project, along with the SystemJS module loader. Take a look at the results of the [Setup](guide/setup) instructions and get the following configurations from there: @@ -1667,63 +1179,46 @@ and get the following configurations from there: Once these are done, run: - npm install - - - -We can soon load Angular dependencies into the application via `index.html`, -but first we need to do some directory path adjustments. This is because we're going -to need to load files from `node_modules` and the project root, whereas so far -in this project everything has been loaded from the `/app` directory. +Soon you can load Angular dependencies into the application via `index.html`, +but first you need to do some directory path adjustments. +You'll need to load files from `node_modules` and the project root instead of +from the `/app` directory as you've been doing to this point. Move the `app/index.html` file to the project root directory. Then change the development server root path in `package.json` to also point to the project root instead of `app`: - -Now we're able to serve everything from the project root to the web browser. But we do *not* +Now you're able to serve everything from the project root to the web browser. But you do *not* want to have to change all the image and data paths used in the application code to match -our development setup. For that reason, we'll add a `` tag to `index.html`, which will +the development setup. For that reason, you'll add a `` tag to `index.html`, which will cause relative URLs to be resolved back to the `/app` directory: - - - - -Now we can load Angular via SystemJS. We'll add the Angular polyfills and the -SystemJS config to the end of the `` section, and then we'll use `System.import` +Now you can load Angular via SystemJS. You'll add the Angular polyfills and the +SystemJS config to the end of the `` section, and then you'll use `System.import` to load the actual application: - - - - -We also need to make a couple of adjustments +You also need to make a couple of adjustments to the `systemjs.config.js` file installed during [setup](guide/setup). -We want to point the browser to the project root when loading things through SystemJS, +Point the browser to the project root when loading things through SystemJS, instead of using the `` URL. -We also need to install the `upgrade` package via `npm install @angular/upgrade --save` +Install the `upgrade` package via `npm install @angular/upgrade --save` and add a mapping for the `@angular/upgrade/static` package. - - - - ### Creating the _AppModule_ Now create the root `NgModule` class called `AppModule`. @@ -1731,67 +1226,48 @@ There is already a file named `app.module.ts` that holds the AngularJS module. Rename it to `app.module.ajs.ts` and update the corresponding script name in the `index.html` as well. The file contents remain: - - - - Now create a new `app.module.ts` with the minimum `NgModule` class: - - - - ### Bootstrapping a hybrid PhoneCat -What we'll do next is bootstrap the application as a *hybrid application* -that supports both AngularJS and Angular components. Once we've done that -we can start converting the individual pieces to Angular. +Next, you'll bootstrap the application as a *hybrid application* +that supports both AngularJS and Angular components. After that, +you can start converting the individual pieces to Angular. -To [bootstrap a hybrid application](guide/upgrade#bootstrapping-hybrid-applications), -we first need to import `UpgradeModule` in our `AppModule`, and override it's bootstrap method: +The application is currently bootstrapped using the AngularJS `ng-app` directive +attached to the `` element of the host page. This will no longer work in the hybrid +app. Switch to the [ngUpgrade bootstrap](#bootstrapping-hybrid-applications) method +instead. +First, remove the `ng-app` attribute from `index.html`. +Then import `UpgradeModule` in the `AppModule`, and override it's `ngDoBootstrap` method: - +Note that you are bootstrapping the AngularJS module from inside `ngDoBootstrap`. +The arguments are the same as you would pass to `angular.bootstrap` if you were manually +bootstrapping AngularJS: the root element of the application; and an array of the +AngularJS 1.x modules that you want to load. - -Our application is currently bootstrapped using the AngularJS `ng-app` directive -attached to the `` element of the host page. This will no longer work with -Angular. We should switch to a JavaScript-driven bootstrap instead. - -So, remove the `ng-app` attribute from `index.html`, and instead bootstrap via `src/main.ts`. +Finally, bootstrap the `AppModule` in `src/main.ts`. This file has been configured as the application entrypoint in `systemjs.config.js`, so it is already being loaded by the browser. - - - + - - -The arguments used here are the root element of the application (which is -the same element we had `ng-app` on earlier), and the AngularJS 1.x modules -that we want to load. Since we're bootstrapping the app through -an `UpgradeModule`, we're actually now running the app as a **hybrid app**. - -This means we are now running both AngularJS and Angular at the same time. That's pretty -exciting! We're not running any actual Angular components yet though, -so let's do that next. - +Now you're running both AngularJS and Angular at the same time. That's pretty +exciting! You're not running any actual Angular components yet. That's next.
- - #### Why declare _angular_ as _angular.IAngularStatic_? `@types/angular` is declared as a UMD module, and due to the way @@ -1801,322 +1277,239 @@ imported via `import` statements instead of being globally available. AngularJS is currently loaded by a script tag in `index.html`, which means that the whole app has access to it as a global and uses the same instance of the `angular` variable. -If we used `import * as angular from 'angular'` instead we would also need to overhaul how we -load every file in our AngularJS app to use ES6 modules in order to ensure AngularJS was being +If you used `import * as angular from 'angular'` instead, you'd also have to +load every file in the AngularJS app to use ES2015 modules in order to ensure AngularJS was being loaded correctly. -This is a considerable effort and it often isn't worth it, especially since we are in the -process of moving our code to Angular. -Instead we declare `angular` as `angular.IAngularStatic` to indicate it is a global variable +This is a considerable effort and it often isn't worth it, especially since you are in the +process of moving your code to Angular. +Instead, declare `angular` as `angular.IAngularStatic` to indicate it is a global variable and still have full typing support. -
- - ### Upgrading the Phone service -The first piece we'll port over to Angular is the `Phone` service, which +The first piece you'll port over to Angular is the `Phone` service, which resides in `app/core/phone/phone.service.ts` and makes it possible for components to load phone information from the server. Right now it's implemented with -ngResource and we're using it for two things: +ngResource and you're using it for two things: -* For loading the list of all phones into the phone list component +* For loading the list of all phones into the phone list component. * For loading the details of a single phone into the phone detail component. -We can replace this implementation with an Angular service class, while -keeping our controllers in AngularJS land. +You can replace this implementation with an Angular service class, while +keeping the controllers in AngularJS land. -In the new version, we import the Angular HTTP module and call its `Http` service instead of `ngResource`. +In the new version, you import the Angular HTTP module and call its `Http` service instead of `ngResource`. Re-open the `app.module.ts` file, import and add `HttpModule` to the `imports` array of the `AppModule`: - - - - -Now we're ready to upgrade the Phone service itself. We replace the ngResource-based +Now you're ready to upgrade the Phone service itself. Replace the ngResource-based service in `phone.service.ts` with a TypeScript class decorated as `@Injectable`: - - - - The `@Injectable` decorator will attach some dependency injection metadata to the class, letting Angular know about its dependencies. As described -by our [Dependency Injection Guide](guide/dependency-injection), -this is a marker decorator we need to use for classes that have no other +by the [Dependency Injection Guide](guide/dependency-injection), +this is a marker decorator you need to use for classes that have no other Angular decorators but still need to have their dependencies injected. In its constructor the class expects to get the `Http` service. It will be injected to it and it is stored as a private field. The service is then used in the two instance methods, one of which loads the list of all phones, -and the other the details of a particular phone: - - - +and the other loads the details of a specified phone: + - - The methods now return Observables of type `PhoneData` and `PhoneData[]`. This is -a type we don't have yet, so let's add a simple interface for it: - +a type you don't have yet. Add a simple interface for it: - - - `@angular/upgrade/static` has a `downgradeInjectable` method for the purpose of making Angular services available to AngularJS code. Use it to plug in the `Phone` service: - - - - Here's the full, final code for the service: - - - - -Notice that we're importing the `map` operator of the RxJS `Observable` separately. -We need to do this for all RxJS operators that we want to use, since Angular -does not load all of them by default. +Notice that you're importing the `map` operator of the RxJS `Observable` separately. +Do this for every RxJS operator. The new `Phone` service has the same features as the original, `ngResource`-based service. -Because it's an Angular service, we register it with the `NgModule` providers: - +Because it's an Angular service, you register it with the `NgModule` providers: - +Now that you are loading `phone.service.ts` through an import that is resolved +by SystemJS, you should **remove the <script> tag** for the service from `index.html`. +This is something you'll do to all components as you upgrade them. Simultaneously +with the AngularJS to Angular upgrade you're also migrating code from scripts to modules. - -Now that we are loading `phone.service.ts` through an import that is resolved -by SystemJS, we should **remove the <script> tag** for the service from `index.html`. -This is something we'll do to all our components as we upgrade them. Simultaneously -with the AngularJS to Angular upgrade we're also migrating our code from scripts to modules. - -At this point we can switch our two components to use the new service -instead of the old one. We `$inject` it as the downgraded `phone` factory, -but it's really an instance of the `Phone` class and we can annotate its type -accordingly: - +At this point, you can switch the two components to use the new service +instead of the old one. While you `$inject` it as the downgraded `phone` factory, +it's really an instance of the `Phone` class and you annotate its type accordingly: - - - - - - -What we have here are two AngularJS components using an Angular service! +Now there are two AngularJS components using an Angular service! The components don't need to be aware of this, though the fact that the service returns Observables and not Promises is a bit of a giveaway. -In any case, what we've achieved is a migration of a service to Angular +In any case, what you've achieved is a migration of a service to Angular without having to yet migrate the components that use it. -
- - -We could also use the `toPromise` method of `Observable` to turn those -Observables into Promises in the service. This can in many cases further -reduce the amount of changes needed in the component controllers. - +You could use the `toPromise` method of `Observable` to turn those +Observables into Promises in the service. In many cases that reduce +the number of changes to the component controllers.
- - ### Upgrading Components -Next, let's upgrade our AngularJS components to Angular components. We'll -do it one at a time, while still keeping the application in hybrid mode. -As we make these conversions, we'll also be defining our first Angular *pipes*. +Upgrade the AngularJS components to Angular components next. +Do it one component at a time while still keeping the application in hybrid mode. +As you make these conversions, you'll also define your first Angular *pipes*. -Let's look at the phone list component first. Right now it contains a TypeScript -controller class and a component definition object. We can morph this into +Look at the phone list component first. Right now it contains a TypeScript +controller class and a component definition object. You can morph this into an Angular component by just renaming the controller class and turning the AngularJS component definition object into an Angular `@Component` decorator. -We can then also remove the static `$inject` property from the class: - +You can then also remove the static `$inject` property from the class: - - - The `selector` attribute is a CSS selector that defines where on the page the component -should go. In AngularJS we do matching based on component names, but in Angular we +should go. In AngularJS you do matching based on component names, but in Angular you have these explicit selectors. This one will match elements with the name `phone-list`, just like the AngularJS version did. -We now also need to convert the template of this component into Angular syntax. +Now convert the template of this component into Angular syntax. The search controls replace the AngularJS `$ctrl` expressions with Angular's two-way `[(ngModel)]` binding syntax: - - - - Replace the list's `ng-repeat` with an `*ngFor` as [described in the Template Syntax page](guide/template-syntax#directives). Replace the image tag's `ng-src` with a binding to the native `src` property. - - - - #### No Angular _filter_ or _orderBy_ filters -The built-in AngularJS `filter` and `orderBy` filters do not exist in Angular, -so we need to do the filtering and sorting ourselves. -We replaced the `filter` and `orderBy` filters with bindings to the `getPhones()` controller method, +The built-in AngularJS `filter` and `orderBy` filters do not exist in Angular, +so you need to do the filtering and sorting yourself. + +You replaced the `filter` and `orderBy` filters with bindings to the `getPhones()` controller method, which implements the filtering and ordering logic inside the component itself. - - - - -Now we need to downgrade our Angular component so we can use it in AngularJS. -Instead of registering a component, we register a `phoneList` *directive*, +Now you need to downgrade the Angular component so you can use it in AngularJS. +Instead of registering a component, you register a `phoneList` *directive*, a downgraded version of the Angular component. The `as angular.IDirectiveFactory` cast tells the TypeScript compiler that the return value of the `downgradeComponent` method is a directive factory. - - - - The new `PhoneListComponent` uses the Angular `ngModel` directive, located in the `FormsModule`. Add the `FormsModule` to `NgModule` imports, declare the new `PhoneListComponent` and -finally add it to `entryComponents` since we downgraded it: - +finally add it to `entryComponents` since you downgraded it: - - - Remove the <script> tag for the phone list component from `index.html`. Now set the remaining `phone-detail.component.ts` as follows: - - - - This is similar to the phone list component. The new wrinkle is the `RouteParams` type annotation that identifies the `routeParams` dependency. The AngularJS injector has an AngularJS router dependency called `$routeParams`, which was injected into `PhoneDetails` when it was still an AngularJS controller. -We intend to inject it into the new `PhoneDetailsComponent`. +You intend to inject it into the new `PhoneDetailsComponent`. Unfortunately, AngularJS dependencies are not automatically available to Angular components. -We must use a [Factory provider](guide/upgrade#making-angularjs-dependencies-injectable-to-angular) -to make `$routeParams` an Angular provider. +You must upgrade this service via a [factory provider](guide/upgrade#making-angularjs-dependencies-injectable-to-angular) +to make `$routeParams` an Angular injectable. Do that in a new file called `ajs-upgraded-providers.ts` and import it in `app.module.ts`: - - - - - - - Convert the phone detail component template into Angular syntax as follows: - - - - There are several notable changes here: -* We've removed the `$ctrl.` prefix from all expressions. -* Just like we did in the phone list, we've replaced `ng-src` with property +* You've removed the `$ctrl.` prefix from all expressions. + +* You've replaced `ng-src` with property bindings for the standard `src` property. -* We're using the property binding syntax around `ng-class`. Though Angular + +* You're using the property binding syntax around `ng-class`. Though Angular does have [a very similar `ngClass`](guide/template-syntax#directives) as AngularJS does, its value is not magically evaluated as an expression. - In Angular we always specify in the template when an attribute's value is + In Angular, you always specify in the template when an attribute's value is a property expression, as opposed to a literal string. -* We've replaced `ng-repeat`s with `*ngFor`s. -* We've replaced `ng-click` with an event binding for the standard `click`. -* We've wrapped the whole template in an `ngIf` that causes it only to be - rendered when there is a phone present. We need this because when the component - first loads, we don't have `phone` yet and the expressions will refer to a + +* You've replaced `ng-repeat`s with `*ngFor`s. + +* You've replaced `ng-click` with an event binding for the standard `click`. + +* You've wrapped the whole template in an `ngIf` that causes it only to be + rendered when there is a phone present. You need this because when the component + first loads, you don't have `phone` yet and the expressions will refer to a non-existing value. Unlike in AngularJS, Angular expressions do not fail silently - when we try to refer to properties on undefined objects. We need to be explicit + when you try to refer to properties on undefined objects. You need to be explicit about cases where this is expected. Add `PhoneDetailComponent` component to the `NgModule` _declarations_ and _entryComponents_: - - - - -We should now also remove the phone detail component <script> tag from `index.html`. +You should now also remove the phone detail component <script> tag from `index.html`. #### Add the _CheckmarkPipe_ The AngularJS directive had a `checkmark` _filter_. -Let's turn that into an Angular **pipe**. +Turn that into an Angular **pipe**. There is no upgrade method to convert filters into pipes. You won't miss it. @@ -2124,74 +1517,47 @@ It's easy to turn the filter function into an equivalent Pipe class. The implementation is the same as before, repackaged in the `transform` method. Rename the file to `checkmark.pipe.ts` to conform with Angular conventions: - - - - Now import and declare the newly created pipe and remove the filter <script> tag from `index.html`: - - +### AOT compile the hybrid app - -## AoT compile the hybrid app - -To use AoT with our hybrid app we have to first set it up like any other Angular application, +To use AOT with a hybrid app, you have to first set it up like any other Angular application, as shown in [the Ahead-of-time Compilation chapter](guide/aot-compiler). -Then we have to change `main-aot.ts` bootstrap also bootstrap the AngularJS app -via `UpgradeModule`: - +Then change `main-aot.ts` to bootstrap the `AppComponentFactory` that was generated +by the AOT compiler: - - - -We need to load all the AngularJS files we already use in `index.html` in `aot/index.html` +You need to load all the AngularJS files you already use in `index.html` in `aot/index.html` as well: - - - - -These files need to be copied together with the polyfills. Files our application +These files need to be copied together with the polyfills. The files the application needs at runtime, like the `.json` phone lists and images, also need to be copied. Install `fs-extra` via `npm install fs-extra --save-dev` for better file copying, and change `copy-dist-files.js` to the following: - - - - -And that's all you need to use AoT while upgrading your app! - +And that's all you need to use AOT while upgrading your app! ### Adding The Angular Router And Bootstrap -At this point we've replaced all AngularJS application components with -their Angular counterparts, even though we're still serving them from the AngularJS router. - -Most AngularJS apps have more than a couple of routes though, and it's very helpful to migrate -one route at a time. - -Let's start by migrating the initial `/` and `/phones` routes to Angular, -while keeping `/phones/:phoneId` in the AngularJS router. +At this point, you've replaced all AngularJS application components with +their Angular counterparts, even though you're still serving them from the AngularJS router. #### Add the Angular router @@ -2201,18 +1567,13 @@ Like all routers, it needs a place in the UI to display routed views. For Angular that's the `` and it belongs in a *root component* at the top of the applications component tree. -We don't yet have such a root component, because the app is still managed as an AngularJS app. +You don't yet have such a root component, because the app is still managed as an AngularJS app. Create a new `app.component.ts` file with the following `AppComponent` class: - - - + - - -It has a simple template that only includes the `` for Angular routes -and `ng-view` for AngularJS routes. +It has a simple template that only includes the `. This component just renders the contents of the active route and nothing else. The selector tells Angular to plug this root component into the `` @@ -2221,13 +1582,9 @@ element on the host web page when the application launches. Add this `` element to the `index.html`. It replaces the old AngularJS `ng-view` directive: - - - + - - #### Create the _Routing Module_ A router needs configuration whether it's the AngularJS or Angular or any other router. @@ -2235,145 +1592,83 @@ The details of Angular router configuration are best left to the [Routing docume which recommends that you create a `NgModule` dedicated to router configuration (called a _Routing Module_). - - - + - - -This module defines a `routes` object with one route to the phone list component +This module defines a `routes` object with two routes to the two phone components and a default route for the empty path. It passes the `routes` to the `RouterModule.forRoot` method which does the rest. A couple of extra providers enable routing with "hash" URLs such as `#!/phones` -instead of the default "push state" strategy. - -There's a twist to our Routing Module though: we're also adding a custom `UrlHandlingStrategy` -that tells the Angular router to only process the `/` and `/phones` routes. +instead of the default "push state" strategy. Now update the `AppModule` to import this `AppRoutingModule` and also the declare the root `AppComponent` as the bootstrap component. That tells Angular that it should bootstrap the app with the _root_ `AppComponent` and insert it's view into the host web page. -We can also remove the `ngDoBootstrap()` override from `app.module.ts` since we are now -bootstrapping from Angular. - -And since `PhoneListComponent` isn't being rendered from a `` tag anymore, -but rather routed to, we can do away with it's Angular selector as well. - - - +You must also remove the bootstrap of the AngularJS module from `ngDoBootstrap()` in `app.module.ts` +and the `UpgradeModule` import. + - - -Now we need to tell the AngularJS router to only process the `/phones/:phoneId` route: - - - - - - - +And since you are routing to `PhoneListComponent` and `PhoneDetailComponent` directly rather than +using a route template with a `` or `` tag, you can do away with their +Angular selectors as well. #### Generate links for each phone -We no longer have to hardcode the links to phone details in the phone list. -We can generate data bindings for each phone's `id` to the `routerLink` directive +You no longer have to hardcode the links to phone details in the phone list. +You can generate data bindings for each phone's `id` to the `routerLink` directive and let that directive construct the appropriate URL to the `PhoneDetailComponent`: - - - + - -
- - See the [Routing](guide/router) page for details. +

- - - - -We are now running both routers at the same time! -Angular is handling the initial `/` url, redirecting to `/phones`. -Meanwhile when we click a link to the phone detail, AngularJS takes over. - -This way we can incrementally upgrade our app, reducing the risk of a massive one step router -swap. - -The next step is to migrate the `/phones/:phoneId` route. - +#### Use route parameters The Angular router passes route parameters differently. Correct the `PhoneDetail` component constructor to expect an injected `ActivatedRoute` object. Extract the `phoneId` from the `ActivatedRoute.snapshot.params` and fetch the phone data as before: - - - + - - -Since this was the last route we want to migrate over, we can also now delete the last -route config from `app/app.config.ts`, and add it to the Angular router configuration. - -We don't need our `UrlHandlingStrategy` anymore either, since now Angular is processing all -routes. - - - - - - - - You are now running a pure Angular application! ### Say Goodbye to AngularJS -It is time to take off the training wheels and let our application begin +It is time to take off the training wheels and let the application begin its new life as a pure, shiny Angular app. The remaining tasks all have to do with removing code - which of course is every programmer's favorite task! The application is still bootstrapped as a hybrid app. There's no need for that anymore. -Switch the bootstrap method of the application from the `UpgradeAdapter` -to the Angular way. - - - +Switch the bootstrap method of the application from the `UpgradeModule` to the Angular way. + - - If you haven't already, remove all references to the `UpgradeModule` from `app.module.ts`, -as well as any [Factory provider](guide/upgrade#making-angularjs-dependencies-injectable-to-angular) +as well as any [factory provider](guide/upgrade#making-angularjs-dependencies-injectable-to-angular) for AngularJS services, and the `app/ajs-upgraded-providers.ts` file. Also remove any `downgradeInjectable()` or `downgradeComponent()` you find, together with the associated AngularJS factory or directive declarations. -Since we have no downgraded components anymore, we also don't need to have them listed -in `entryComponents` either. - - - +Since you no longer have downgraded components, you no longer list them +in `entryComponents`. + - - You may also completely remove the following files. They are AngularJS module configuration files and not needed in Angular: @@ -2385,36 +1680,23 @@ module configuration files and not needed in Angular: * `app/phone-list/phone-list.module.ts` The external typings for AngularJS may be uninstalled as well. The only ones -we still need are for Jasmine and Angular polyfills. +you still need are for Jasmine and Angular polyfills. The `@angular/upgrade` package and it's mapping in `systemjs.config.js` can also go. - npm uninstall @angular/upgrade --save npm uninstall @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev - +Finally, from `index.html`, remove all references to AngularJS scripts and jQuery. +When you're done, this is what it should look like: - -Finally, from `index.html`, remove all references to -AngularJS scripts, the Angular upgrade module, and jQuery. When we're done, -this is what it should look like: - - - - + - - -That is the last we'll see of AngularJS! It has served us well but now +That is the last you'll see of AngularJS! It has served us well but now it's time to say goodbye. - - - - ## Appendix: Upgrading PhoneCat Tests Tests can not only be retained through an upgrade process, but they can also be @@ -2425,321 +1707,228 @@ break during the upgrade. E2E tests are especially useful for this purpose. The PhoneCat project has both E2E Protractor tests and some Karma unit tests in it. Of these two, E2E tests can be dealt with much more easily: By definition, -E2E tests access our application from the *outside* by interacting with +E2E tests access the application from the *outside* by interacting with the various UI elements the app puts on the screen. E2E tests aren't really that concerned with the internal structure of the application components. That -also means that although we modify our project quite a bit during the upgrade, the E2E -test suite should keep passing with just minor modifications. This is because -we don't change how the application behaves from the user's point of view. +also means that, although you modify the project quite a bit during the upgrade, the E2E +test suite should keep passing with just minor modifications. You +didn't change how the application behaves from the user's point of view. -During TypeScript conversion, there is nothing we have to do to keep E2E tests -working. It is only when we change our bootstrap to that of a Hybrid app that we need to -make some changes. +During TypeScript conversion, there is nothing to do to keep E2E tests +working. But when you change the bootstrap to that of a Hybrid app, +you must make a few changes. -The following change is needed in `protractor-conf.js` to sync with hybrid apps: +Update the `protractor-conf.js` to sync with hybrid apps: ng12Hybrid: true - - - -The next set of changes is when we start to upgrade components and their template to Angular. -This is because the E2E tests have matchers that are specific to AngularJS. -For PhoneCat we need to make the following changes in order to make things work with Angular: - +When you start to upgrade components and their templates to Angular, you'll make more changes +because the E2E tests have matchers that are specific to AngularJS. +For PhoneCat you need to make the following changes in order to make things work with Angular: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Previous code New code Notes
- `by.repeater('phone in $ctrl.phones').column('phone.name')` + - `by.css('.phones .name')` + - The repeater matcher relies on AngularJS `ng-repeat` +
- `by.repeater('phone in $ctrl.phones')` + - `by.css('.phones li')` + - The repeater matcher relies on AngularJS `ng-repeat` +
- `by.model('$ctrl.query')` + - `by.css('input')` + - The model matcher relies on AngularJS `ng-model` +
- `by.model('$ctrl.orderProp')` + - `by.css('select')` + - The model matcher relies on AngularJS `ng-model` +
- `by.binding('$ctrl.phone.name')` + - `by.css('h1')` + - The binding matcher relies on AngularJS data binding -
- - When the bootstrap method is switched from that of `UpgradeModule` to pure Angular, AngularJS ceases to exist on the page completely. -At this point we need to tell Protractor that it should not be looking for +At this point, you need to tell Protractor that it should not be looking for an AngularJS app anymore, but instead it should find *Angular apps* from the page. Replace the `ng12Hybrid` previously added with the following in `protractor-conf.js`: - useAllAngular2AppRoots: true, - - - Also, there are a couple of Protractor API calls in the PhoneCat test code that are using the AngularJS `$location` service under the hood. As that -service is no longer there after the upgrade, we need to replace those calls with ones +service is no longer present after the upgrade, replace those calls with ones that use WebDriver's generic URL APIs instead. The first of these is the redirection spec: - - - + - - And the second is the phone links spec: - - - + - - ### Unit Tests For unit tests, on the other hand, more conversion work is needed. Effectively they need to be *upgraded* along with the production code. During TypeScript conversion no changes are strictly necessary. But it may be -a good idea to convert the unit test code into TypeScript as well, as the same -benefits we from TypeScript in production code also applies to tests. - -For instance, in the phone detail component spec we can use not only ES2015 -features like arrow functions and block-scoped variables, but also type -definitions for some of the AngularJS services we're consuming: +a good idea to convert the unit test code into TypeScript as well. +For instance, in the phone detail component spec, you can use ES2015 +features like arrow functions and block-scoped variables and benefit from the type +definitions of the AngularJS services you're consuming: - - - -Once we start the upgrade process and bring in SystemJS, configuration changes -are needed for Karma. We need to let SystemJS load all the new Angular code, +Once you start the upgrade process and bring in SystemJS, configuration changes +are needed for Karma. You need to let SystemJS load all the new Angular code, which can be done with the following kind of shim file: - - - - The shim first loads the SystemJS configuration, then Angular's test support libraries, and then the application's spec files themselves. Karma configuration should then be changed so that it uses the application root dir as the base directory, instead of `app`. - - - - -Once this is done, we can load SystemJS and other dependencies, and also switch the configuration -for loading application files so that they are *not* included to the page by Karma. We'll let +Once done, you can load SystemJS and other dependencies, and also switch the configuration +for loading application files so that they are *not* included to the page by Karma. You'll let the shim and SystemJS load them. - - - - -Since the HTML templates of Angular components will be loaded as well, we need to help +Since the HTML templates of Angular components will be loaded as well, you must help Karma out a bit so that it can route them to the right paths: - - - - The unit test files themselves also need to be switched to Angular when their production counterparts are switched. The specs for the checkmark pipe are probably the most straightforward, as the pipe has no dependencies: - - - - -The unit test for the phone service is a bit more involved. We need to switch from the mocked-out +The unit test for the phone service is a bit more involved. You need to switch from the mocked-out AngularJS `$httpBackend` to a mocked-out Angular Http backend. - - - - -For the component specs we can mock out the `Phone` service itself, and have it provide -canned phone data. We use Angular's component unit testing APIs for both components. - +For the component specs, you can mock out the `Phone` service itself, and have it provide +canned phone data. You use Angular's component unit testing APIs for both components. - - - - - - -Finally, we need to revisit both of the component tests when we switch to the Angular -router. For the details component we need to provide a mock of Angular `ActivatedRoute` object +Finally, revisit both of the component tests when you switch to the Angular +router. For the details component, provide a mock of Angular `ActivatedRoute` object instead of using the AngularJS `$routeParams`. - - - + +And for the phone list component, a few adjustments to the router make +the `RouteLink` directives work. - -And for the phone list component we need to set up a few things for the router itself so that -the route link directive will work. - - - - + -