diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore index d3e14b4f54..eedd04da43 100644 --- a/public/docs/_examples/.gitignore +++ b/public/docs/_examples/.gitignore @@ -15,4 +15,3 @@ protractor-helpers.js **/ts/**/*.js **/js-es6*/**/*.js **/ts-snippets/**/*.js -!**/systemjs.config.extras.js diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.js b/public/docs/_examples/_boilerplate/src/systemjs.config.js index 0d748b9e5e..5fa7e9c24f 100644 --- a/public/docs/_examples/_boilerplate/src/systemjs.config.js +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.js @@ -23,8 +23,6 @@ '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.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', diff --git a/public/docs/_examples/upgrade-module/e2e-spec.ts b/public/docs/_examples/upgrade-module/e2e-spec.ts index dbf29e3f53..0c45fb78b8 100644 --- a/public/docs/_examples/upgrade-module/e2e-spec.ts +++ b/public/docs/_examples/upgrade-module/e2e-spec.ts @@ -98,7 +98,7 @@ describe('Upgrade Tests', function () { expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!'); }); - xit('has outputs', function () { + it('has outputs', function () { element.all(by.buttonText('Delete')).first().click(); expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!'); }); @@ -161,4 +161,22 @@ 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/public/docs/_examples/upgrade-module/ts/.gitignore b/public/docs/_examples/upgrade-module/ts/.gitignore new file mode 100644 index 0000000000..7f5c313a3e --- /dev/null +++ b/public/docs/_examples/upgrade-module/ts/.gitignore @@ -0,0 +1,7 @@ +**/*.js +aot/**/* +!aot/bs-config.json +!aot/index.html +!copy-dist-files.js +!rollup-config.js +!systemjs.config.1.js diff --git a/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts b/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts new file mode 100644 index 0000000000..52d4e74a1f --- /dev/null +++ b/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts @@ -0,0 +1,12 @@ +// #docregion +import { HeroesService } from './heroes.service'; + +export function heroesServiceFactory(i: any) { + return i.get('heroes'); +} + +export const heroesServiceProvider = { + provide: HeroesService, + useFactory: heroesServiceFactory, + deps: ['$injector'] +}; diff --git a/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts b/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts index 5754494853..4e0eca003a 100644 --- a/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts @@ -6,18 +6,17 @@ import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroesService } from './heroes.service'; - // #docregion register +import { heroesServiceProvider } from './ajs-upgraded-providers'; + @NgModule({ imports: [ BrowserModule, UpgradeModule ], - providers: [{ - provide: 'heroes', - useFactory: (i: any) => i.get('heroes'), - deps: ['$injector'] - }], + providers: [ + heroesServiceProvider + ], // #enddocregion register declarations: [ HeroDetailComponent @@ -39,7 +38,6 @@ 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}); diff --git a/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/hero-detail.component.ts b/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/hero-detail.component.ts index 3ad50cd961..b02f85b99a 100644 --- a/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/hero-detail.component.ts +++ b/public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/hero-detail.component.ts @@ -1,5 +1,5 @@ // #docregion -import { Component, Inject } from '@angular/core'; +import { Component } from '@angular/core'; import { HeroesService } from './heroes.service'; import { Hero } from '../hero'; @@ -11,7 +11,7 @@ import { Hero } from '../hero'; }) export class HeroDetailComponent { hero: Hero; - constructor(@Inject('heroes') heroes: HeroesService) { + constructor(heroes: HeroesService) { this.hero = heroes.get()[0]; } } diff --git a/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.component.ts b/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.component.ts new file mode 100644 index 0000000000..1fae3f84c6 --- /dev/null +++ b/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.component.ts @@ -0,0 +1,11 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + template: ` + +
+ `, +}) +export class AppComponent { } diff --git a/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.module.ts b/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.module.ts new file mode 100644 index 0000000000..7d85a23c94 --- /dev/null +++ b/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.module.ts @@ -0,0 +1,62 @@ +// #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/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/hero.module.ts b/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/hero.module.ts new file mode 100644 index 0000000000..33099d0a9f --- /dev/null +++ b/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/hero.module.ts @@ -0,0 +1,32 @@ +// #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/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/main.ts b/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/main.ts new file mode 100644 index 0000000000..9b4d37ebc3 --- /dev/null +++ b/public/docs/_examples/upgrade-module/ts/src/app/divide-routes/main.ts @@ -0,0 +1,10 @@ +// #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/public/docs/_examples/upgrade-module/ts/src/app/villain.ts b/public/docs/_examples/upgrade-module/ts/src/app/villain.ts new file mode 100644 index 0000000000..ef3d014f11 --- /dev/null +++ b/public/docs/_examples/upgrade-module/ts/src/app/villain.ts @@ -0,0 +1,5 @@ +export class Villain { + constructor(public id: number, + public name: string, + public description?: string) { } +} diff --git a/public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-providers.html b/public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-providers.html index e220db6945..693655a53c 100644 --- a/public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-providers.html +++ b/public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-providers.html @@ -15,7 +15,7 @@ - + - + - + - + - + + + + + + + + + + + + + + + + + Loading... + + + diff --git a/public/docs/_examples/upgrade-module/ts/src/index-downgrade-io.html b/public/docs/_examples/upgrade-module/ts/src/index-downgrade-io.html index 7fbe8a4ddc..71e55db355 100644 --- a/public/docs/_examples/upgrade-module/ts/src/index-downgrade-io.html +++ b/public/docs/_examples/upgrade-module/ts/src/index-downgrade-io.html @@ -15,7 +15,7 @@ - + - + - + - + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts new file mode 100644 index 0000000000..f6e1654d74 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts @@ -0,0 +1,14 @@ +// #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/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts index 9fc7fea21f..7e97d1844f 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts @@ -21,6 +21,9 @@ import { CheckmarkPipe } from './core/checkmark/checkmark.pipe'; // #docregion phonelist import { PhoneListComponent } from './phone-list/phone-list.component'; // #enddocregion phonelist +// #docregion routeparams +import { routeParamsProvider } from './ajs-upgraded-providers'; +// #enddocregion routeparams // #docregion phonedetail import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; // #enddocregion phonedetail @@ -57,11 +60,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; providers: [ Phone, // #enddocregion phone - { - provide: '$routeParams', - useFactory: routeParamsFactory, - deps: ['$injector'] - } + routeParamsProvider // #docregion phone ] // #enddocregion routeparams @@ -73,9 +72,3 @@ export class AppModule { // #docregion bare } // #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe - -// #docregion routeparams -export function routeParamsFactory(i: any) { - return i.get('$routeParams'); -} -// #enddocregion routeparams diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts index e43d57a538..23a741c684 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts @@ -1,4 +1,4 @@ -// #docregion bootstrap +// #docregion import { platformBrowser } from '@angular/platform-browser'; import { UpgradeModule } from '@angular/upgrade/static'; @@ -8,4 +8,3 @@ platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.documentElement, ['phonecatApp']); }); -// #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts index 16a2a87f7f..e486ab3e6d 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts @@ -4,11 +4,11 @@ declare var angular: angular.IAngularStatic; import { downgradeComponent } from '@angular/upgrade/static'; // #docregion initialclass -import { Component, Inject } from '@angular/core'; +import { Component } from '@angular/core'; import { Phone, PhoneData } from '../core/phone/phone.service'; // #enddocregion initialclass -// #docregion checkmark-pipe +import { RouteParams } from '../ajs-upgraded-providers'; // #docregion initialclass @Component({ @@ -18,13 +18,12 @@ import { Phone, PhoneData } from '../core/phone/phone.service'; // #enddocregion initialclass // #docregion initialclass }) -// #enddocregion checkmark-pipe export class PhoneDetailComponent { phone: PhoneData; mainImageUrl: string; - constructor(@Inject('$routeParams') $routeParams: any, phone: Phone) { - phone.get($routeParams['phoneId']).subscribe(phone => { + constructor(routeParams: RouteParams, phone: Phone) { + phone.get(routeParams['phoneId']).subscribe(phone => { this.phone = phone; this.setImage(phone.images[0]); }); diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/bs-config.aot.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/bs-config.aot.json new file mode 100644 index 0000000000..e59a7403a0 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/bs-config.aot.json @@ -0,0 +1,14 @@ +{ + "open": false, + "logLevel": "silent", + "port": 8080, + "server": { + "baseDir": "aot", + "routes": { + "/node_modules": "node_modules" + }, + "middleware": { + "0": null + } + } +} diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/copy-dist-files.js b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/copy-dist-files.js new file mode 100644 index 0000000000..a857af085c --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/copy-dist-files.js @@ -0,0 +1,25 @@ +// #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/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js index afb510f0a1..8197c44a89 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js @@ -22,8 +22,9 @@ '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', - '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', + // #docregion paths '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', + // #enddocregion paths // other libraries 'rxjs': 'npm:rxjs', diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json index 97d6f592a0..58f9de3309 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json @@ -6,6 +6,7 @@ "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, + "lib": ["es2015", "dom"], "removeComments": false, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, diff --git a/public/docs/_examples/upgrade-phonecat-3-router/README.md b/public/docs/_examples/upgrade-phonecat-3-router/README.md new file mode 100644 index 0000000000..4f8e4928af --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/README.md @@ -0,0 +1,34 @@ +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/public/docs/_examples/upgrade-phonecat-3-router/e2e-spec.ts b/public/docs/_examples/upgrade-phonecat-3-router/e2e-spec.ts new file mode 100644 index 0000000000..2ec8e37977 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/e2e-spec.ts @@ -0,0 +1,107 @@ +'use strict'; // necessary for es6 output in node + +import { browser, element, by } from 'protractor'; +import { setProtractorToHybridMode } from '../protractor-helpers'; + +// Angular E2E Testing Guide: +// https://docs.angularjs.org/guide/e2e-testing + +describe('PhoneCat Application', function() { + + beforeAll(function () { + setProtractorToHybridMode(); + }); + + 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/public/docs/_examples/upgrade-phonecat-3-router/ts/.gitignore b/public/docs/_examples/upgrade-phonecat-3-router/ts/.gitignore new file mode 100644 index 0000000000..7f5c313a3e --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/.gitignore @@ -0,0 +1,7 @@ +**/*.js +aot/**/* +!aot/bs-config.json +!aot/index.html +!copy-dist-files.js +!rollup-config.js +!systemjs.config.1.js diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/bs-config.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/aot/bs-config.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/bs-config.json rename to public/docs/_examples/upgrade-phonecat-3-router/ts/aot/bs-config.json diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/index.html b/public/docs/_examples/upgrade-phonecat-3-router/ts/aot/index.html similarity index 57% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/index.html rename to public/docs/_examples/upgrade-phonecat-3-router/ts/aot/index.html index 14b9e6b6a9..0d6cf5946e 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/index.html +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/aot/index.html @@ -1,12 +1,15 @@ - - + + - - Angular Tour of Heroes - + - + + + Google Phone Gallery + + + @@ -14,7 +17,7 @@ - + @@ -22,15 +25,14 @@ - - - + + + - - Loading... + - + diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/ajs-upgraded-providers.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/ajs-upgraded-providers.ts new file mode 100644 index 0000000000..f6e1654d74 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/ajs-upgraded-providers.ts @@ -0,0 +1,14 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app-routing.module.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app-routing.module.ts new file mode 100644 index 0000000000..0485b1848d --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app-routing.module.ts @@ -0,0 +1,30 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.animations.css b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.animations.css new file mode 100644 index 0000000000..175320b509 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.animations.css @@ -0,0 +1,67 @@ +/* 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/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.animations.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.animations.ts new file mode 100644 index 0000000000..f0739b6405 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.animations.ts @@ -0,0 +1,43 @@ +'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/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.component.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.component.ts new file mode 100644 index 0000000000..6ecd19ab80 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.component.ts @@ -0,0 +1,13 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'phonecat-app', + template: ` + +
+
+
+ ` +}) +export class AppComponent { } diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.config.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.config.ts new file mode 100644 index 0000000000..51a5d82422 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.config.ts @@ -0,0 +1,16 @@ +'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/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.css b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.css similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.css rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.css diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.module.ajs.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.module.ajs.ts new file mode 100644 index 0000000000..e493137966 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.module.ajs.ts @@ -0,0 +1,11 @@ +// #docregion +'use strict'; + +// Define the `phonecatApp` Angular 1 module +angular.module('phonecatApp', [ + 'ngAnimate', + 'ngRoute', + 'core', + 'phoneDetail', + 'phoneList', +]); diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.module.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.module.ts new file mode 100644 index 0000000000..e0bb64f4e4 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.module.ts @@ -0,0 +1,42 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.spec.ts new file mode 100644 index 0000000000..f7485ec2ba --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.spec.ts @@ -0,0 +1,11 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.ts similarity index 99% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.ts rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.ts index e79b99fc80..888017e15c 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.ts +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.ts @@ -3,9 +3,7 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'checkmark'}) export class CheckmarkPipe implements PipeTransform { - transform(input: boolean) { return input ? '\u2713' : '\u2718'; } - } diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/core.module.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/core.module.ts new file mode 100644 index 0000000000..84a91dc7a6 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/core.module.ts @@ -0,0 +1,4 @@ +'use strict'; + +// Define the `core` module +angular.module('core', ['core.phone']); diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.module.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.module.ts new file mode 100644 index 0000000000..0b6b348899 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.module.ts @@ -0,0 +1,4 @@ +'use strict'; + +// Define the `core.phone` module +angular.module('core.phone', ['ngResource']); diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.spec.ts new file mode 100644 index 0000000000..a0c1655c20 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.spec.ts @@ -0,0 +1,51 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.ts similarity index 73% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.ts rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.ts index b19eea598d..ccbd1fdd72 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.ts +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.ts @@ -3,21 +3,19 @@ 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'; -// #docregion phonedata-interface export interface PhoneData { name: string; snippet: string; images: string[]; } -// #enddocregion phonedata-interface -// #docregion fullclass -// #docregion classdef @Injectable() export class Phone { -// #enddocregion classdef constructor(private http: Http) { } query(): Observable { return this.http.get(`phones/phones.json`) @@ -27,7 +25,8 @@ export class Phone { return this.http.get(`phones/${id}.json`) .map((res: Response) => res.json()); } -// #docregion classdef } -// #enddocregion classdef -// #enddocregion fullclass + +angular.module('core.phone') + .factory('phone', downgradeInjectable(Phone)); + diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/.gitkeep b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/.gitkeep similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/.gitkeep rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/.gitkeep diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.1.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.1.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.1.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.1.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.2.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.2.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.2.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.2.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.3.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.3.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.3.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.3.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.4.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.4.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-streak-7.4.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.4.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-venue.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-venue.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/dell-venue.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-venue.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/droid-2-global-by-motorola.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/droid-2-global-by-motorola.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/droid-2-global-by-motorola.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/droid-2-global-by-motorola.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/droid-pro-by-motorola.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/droid-pro-by-motorola.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/droid-pro-by-motorola.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/droid-pro-by-motorola.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/lg-axis.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/lg-axis.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/lg-axis.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/lg-axis.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-atrix-4g.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-atrix-4g.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-atrix-4g.1.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.1.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-atrix-4g.1.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.1.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-atrix-4g.2.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.2.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-atrix-4g.2.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.2.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-atrix-4g.3.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.3.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-atrix-4g.3.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.3.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom.1.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.1.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom.1.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.1.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom.2.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.2.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/motorola-xoom.2.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.2.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/nexus-s.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/nexus-s.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/nexus-s.1.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.1.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/nexus-s.1.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.1.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/nexus-s.2.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.2.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/nexus-s.2.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.2.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/nexus-s.3.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.3.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/nexus-s.3.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.3.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-galaxy-tab.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-galaxy-tab.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-galaxy-tab.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-galaxy-tab.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-gem.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-gem.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-gem.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-gem.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-transform.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-transform.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/samsung-transform.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-transform.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/sanyo-zio.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/sanyo-zio.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/sanyo-zio.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/sanyo-zio.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/t-mobile-g2.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/t-mobile-g2.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/t-mobile-g2.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/t-mobile-g2.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/main-aot.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/main-aot.ts new file mode 100644 index 0000000000..23a741c684 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/main-aot.ts @@ -0,0 +1,10 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-router/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/main.ts new file mode 100644 index 0000000000..51b8e4d2a8 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/main.ts @@ -0,0 +1,10 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts new file mode 100644 index 0000000000..048a4104c8 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts @@ -0,0 +1,34 @@ +// #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({ + moduleId: module.id, + 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/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.module.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.module.ts new file mode 100644 index 0000000000..fd7cb3b920 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.module.ts @@ -0,0 +1,7 @@ +'use strict'; + +// Define the `phoneDetail` module +angular.module('phoneDetail', [ + 'ngRoute', + 'core.phone' +]); diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.template.html b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.template.html similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.template.html rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.template.html diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.spec.ts new file mode 100644 index 0000000000..2bb9d2b62f --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.spec.ts @@ -0,0 +1,66 @@ +/* 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/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts new file mode 100644 index 0000000000..d198774deb --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts @@ -0,0 +1,61 @@ +// #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({ + moduleId: module.id, + 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/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.module.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.module.ts new file mode 100644 index 0000000000..8ade7c5b88 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.module.ts @@ -0,0 +1,4 @@ +'use strict'; + +// Define the `phoneList` module +angular.module('phoneList', ['core.phone']); diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.template.html b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.template.html new file mode 100644 index 0000000000..2678d384c2 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.template.html @@ -0,0 +1,38 @@ +
+
+
+ + +

+ Search: + +

+ +

+ Sort by: + +

+ +
+
+ + + + + + +
+
+
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/dell-streak-7.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/dell-streak-7.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/dell-streak-7.json rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/dell-streak-7.json diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/motorola-atrix-4g.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/motorola-atrix-4g.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/motorola-atrix-4g.json rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/motorola-atrix-4g.json diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/motorola-xoom-with-wi-fi.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/motorola-xoom-with-wi-fi.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/motorola-xoom-with-wi-fi.json rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/motorola-xoom-with-wi-fi.json diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/motorola-xoom.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/motorola-xoom.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/motorola-xoom.json rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/motorola-xoom.json diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/nexus-s.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/nexus-s.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/nexus-s.json rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/nexus-s.json diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/phones.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/phones.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phones/phones.json rename to public/docs/_examples/upgrade-phonecat-3-router/ts/app/phones/phones.json diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/bs-config.aot.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/bs-config.aot.json new file mode 100644 index 0000000000..e59a7403a0 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/bs-config.aot.json @@ -0,0 +1,14 @@ +{ + "open": false, + "logLevel": "silent", + "port": 8080, + "server": { + "baseDir": "aot", + "routes": { + "/node_modules": "node_modules" + }, + "middleware": { + "0": null + } + } +} diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/copy-dist-files.js b/public/docs/_examples/upgrade-phonecat-3-router/ts/copy-dist-files.js new file mode 100644 index 0000000000..a857af085c --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/copy-dist-files.js @@ -0,0 +1,25 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-final/ts/example-config.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/example-config.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/example-config.json rename to public/docs/_examples/upgrade-phonecat-3-router/ts/example-config.json diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/index.html b/public/docs/_examples/upgrade-phonecat-3-router/ts/index.html new file mode 100644 index 0000000000..9b3b847fd5 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/index.html @@ -0,0 +1,44 @@ + + + + + + + + + Google Phone Gallery + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/rollup-config.js b/public/docs/_examples/upgrade-phonecat-3-router/ts/rollup-config.js new file mode 100644 index 0000000000..aeb227689c --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/rollup-config.js @@ -0,0 +1,21 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-router/ts/systemjs.config.1.js b/public/docs/_examples/upgrade-phonecat-3-router/ts/systemjs.config.1.js new file mode 100644 index 0000000000..b801d42bad --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/systemjs.config.1.js @@ -0,0 +1,48 @@ +/** + * 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: { + 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' + }, + rxjs: { + defaultExtension: 'js' + }, + 'angular-in-memory-web-api': { + main: './index.js', + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/tsconfig-aot.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/tsconfig-aot.json new file mode 100644 index 0000000000..58f9de3309 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/tsconfig-aot.json @@ -0,0 +1,27 @@ +{ + "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/public/docs/_examples/upgrade-phonecat-3-final/ts/tsconfig.json b/public/docs/_examples/upgrade-phonecat-3-router/ts/tsconfig.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/tsconfig.json rename to public/docs/_examples/upgrade-phonecat-3-router/ts/tsconfig.json diff --git a/public/docs/_examples/upgrade-phonecat-3-final/README.md b/public/docs/_examples/upgrade-phonecat-4-final/README.md similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/README.md rename to public/docs/_examples/upgrade-phonecat-4-final/README.md diff --git a/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts b/public/docs/_examples/upgrade-phonecat-4-final/e2e-spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts rename to public/docs/_examples/upgrade-phonecat-4-final/e2e-spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app-routing.module.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/app-routing.module.ts similarity index 95% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/app-routing.module.ts rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/app-routing.module.ts index 16a72b069e..f64d82e253 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app-routing.module.ts +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/app-routing.module.ts @@ -20,4 +20,4 @@ const routes: Routes = [ { provide: LocationStrategy, useClass: HashLocationStrategy }, ] }) -export class AppRoutingModule {} +export class AppRoutingModule { } diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.component.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/app.component.ts similarity index 83% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.component.ts rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/app.component.ts index fa4e5f7f4b..c476614121 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.component.ts +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/app.component.ts @@ -5,5 +5,4 @@ import { Component } from '@angular/core'; selector: 'phonecat-app', template: '' }) -export class AppComponent { -} +export class AppComponent { } diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/app.css b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/app.css new file mode 100644 index 0000000000..f4b45b02a5 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/app.css @@ -0,0 +1,93 @@ +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/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.module.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/app.module.ts similarity index 98% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.module.ts rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/app.module.ts index 58acb5bce3..607ecab8c9 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.module.ts +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/app.module.ts @@ -25,7 +25,7 @@ import { PhoneListComponent } from './phone-list/phone-list.component'; PhoneDetailComponent ], providers: [ - Phone, + Phone ], // #docregion bootstrap bootstrap: [ AppComponent ] diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/checkmark/checkmark.pipe.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/checkmark/checkmark.pipe.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/checkmark/checkmark.pipe.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/checkmark/checkmark.pipe.ts new file mode 100644 index 0000000000..888017e15c --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/checkmark/checkmark.pipe.ts @@ -0,0 +1,9 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/phone/phone.service.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/phone/phone.service.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/phone/phone.service.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/phone/phone.service.ts new file mode 100644 index 0000000000..83a837afb7 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/core/phone/phone.service.ts @@ -0,0 +1,25 @@ +// #docregion +import { Injectable } from '@angular/core'; +import { Http, Response } from '@angular/http'; +import { Observable } from 'rxjs/Rx'; + +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()); + } +} diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/.gitkeep b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.0.jpg new file mode 100644 index 0000000000..7ce0dce4ee Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.1.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.1.jpg new file mode 100644 index 0000000000..ed8cad89fb Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.1.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.2.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.2.jpg new file mode 100644 index 0000000000..c83529e0f9 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.2.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.3.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.3.jpg new file mode 100644 index 0000000000..cd2c30280d Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.3.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.4.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.4.jpg new file mode 100644 index 0000000000..b4d8472da8 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.4.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-venue.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-venue.0.jpg new file mode 100644 index 0000000000..b4cb4eb25f Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-venue.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-2-global-by-motorola.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-2-global-by-motorola.0.jpg new file mode 100644 index 0000000000..60700a2ab3 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-2-global-by-motorola.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-pro-by-motorola.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-pro-by-motorola.0.jpg new file mode 100644 index 0000000000..c7710de986 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-pro-by-motorola.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/lg-axis.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/lg-axis.0.jpg new file mode 100644 index 0000000000..55e5a23bb2 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/lg-axis.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.0.jpg new file mode 100644 index 0000000000..2446159e93 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.1.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.1.jpg new file mode 100644 index 0000000000..867f207459 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.1.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.2.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.2.jpg new file mode 100644 index 0000000000..27d78338c4 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.2.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.3.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.3.jpg new file mode 100644 index 0000000000..29459a68a4 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.3.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg new file mode 100644 index 0000000000..e452ae7e7c Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg new file mode 100644 index 0000000000..21e4b8d741 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg new file mode 100644 index 0000000000..c7c5e3ba0c Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg new file mode 100644 index 0000000000..a6c993291e Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg new file mode 100644 index 0000000000..400b89e2df Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg new file mode 100644 index 0000000000..86b55d28dd Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg new file mode 100644 index 0000000000..85ec293ae5 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg new file mode 100644 index 0000000000..75ef1464cb Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg new file mode 100644 index 0000000000..4d42db4330 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.0.jpg new file mode 100644 index 0000000000..bf6954bbd5 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.1.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.1.jpg new file mode 100644 index 0000000000..659688a47d Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.1.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.2.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.2.jpg new file mode 100644 index 0000000000..ce0ff1002e Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.2.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.0.jpg new file mode 100644 index 0000000000..0952bc79c2 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.1.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.1.jpg new file mode 100644 index 0000000000..f33004dd7f Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.1.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.2.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.2.jpg new file mode 100644 index 0000000000..c5c63621f1 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.2.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.3.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.3.jpg new file mode 100644 index 0000000000..e51f75b0ed Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.3.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-galaxy-tab.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-galaxy-tab.0.jpg new file mode 100644 index 0000000000..3750377ad9 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-galaxy-tab.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-gem.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-gem.0.jpg new file mode 100644 index 0000000000..0d5024a026 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-gem.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg new file mode 100644 index 0000000000..11b8f860cb Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg new file mode 100644 index 0000000000..11b8f860cb Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-transform.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-transform.0.jpg new file mode 100644 index 0000000000..0e3107caf5 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-transform.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/sanyo-zio.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/sanyo-zio.0.jpg new file mode 100644 index 0000000000..9eeb9b96ed Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/sanyo-zio.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-g2.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-g2.0.jpg new file mode 100644 index 0000000000..6b6c09e058 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-g2.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg new file mode 100644 index 0000000000..beba1f6827 Binary files /dev/null and b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg differ diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/main.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/main.ts diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.spec.ts new file mode 100644 index 0000000000..e3b9143a94 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.spec.ts @@ -0,0 +1,59 @@ +// #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/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.template.html b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.template.html new file mode 100644 index 0000000000..46a96d66c3 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.template.html @@ -0,0 +1,120 @@ + +
+
+ +
+ +

{{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/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts similarity index 86% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts index f5dca210d8..0d9eb07e21 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts @@ -1,5 +1,4 @@ -// #docplaster -// #docregion top +// #docregion import { Component } from '@angular/core'; import { Phone, PhoneData } from '../core/phone/phone.service'; @@ -9,7 +8,6 @@ import { Phone, PhoneData } from '../core/phone/phone.service'; selector: 'phone-list', templateUrl: './phone-list.template.html', }) -// #enddocregion top export class PhoneListComponent { phones: PhoneData[]; query: string; @@ -21,9 +19,7 @@ export class PhoneListComponent { }); this.orderProp = 'age'; } - // #enddocregion initialclass - // #docregion getphones getPhones(): PhoneData[] { return this.sortPhones(this.filterPhones(this.phones)); } @@ -55,7 +51,4 @@ export class PhoneListComponent { } return phones; } - // #enddocregion getphones - // #docregion initialclass } -// #enddocregion initialclass diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.template.html similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html rename to public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.template.html diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/dell-streak-7.json b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/dell-streak-7.json new file mode 100644 index 0000000000..a32eb6ff98 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/dell-streak-7.json @@ -0,0 +1,64 @@ +{ + "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/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/motorola-atrix-4g.json b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/motorola-atrix-4g.json new file mode 100644 index 0000000000..ccca00e3b2 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/motorola-atrix-4g.json @@ -0,0 +1,62 @@ +{ + "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/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom-with-wi-fi.json b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom-with-wi-fi.json new file mode 100644 index 0000000000..4ba9c8d5b5 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom-with-wi-fi.json @@ -0,0 +1,65 @@ +{ + "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/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom.json b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom.json new file mode 100644 index 0000000000..f0f0c8711d --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom.json @@ -0,0 +1,62 @@ +{ + "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/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/nexus-s.json b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/nexus-s.json new file mode 100644 index 0000000000..5e712e2ff8 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/nexus-s.json @@ -0,0 +1,69 @@ +{ + "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/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/phones.json b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/phones.json new file mode 100644 index 0000000000..339b94fbb5 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phones/phones.json @@ -0,0 +1,155 @@ +[ + { + "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/public/docs/_examples/upgrade-phonecat-4-final/ts/example-config.json b/public/docs/_examples/upgrade-phonecat-4-final/ts/example-config.json new file mode 100644 index 0000000000..401c14f835 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/example-config.json @@ -0,0 +1,5 @@ +{ + "build": "build:upgrade", + "run": "serve:upgrade", + "unittesting": true +} diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/index.html b/public/docs/_examples/upgrade-phonecat-4-final/ts/index.html similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/index.html rename to public/docs/_examples/upgrade-phonecat-4-final/ts/index.html diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/run-unit-tests.sh b/public/docs/_examples/upgrade-phonecat-4-final/ts/run-unit-tests.sh new file mode 100644 index 0000000000..00a5abb7bc --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/run-unit-tests.sh @@ -0,0 +1,7 @@ +## The boilerplate Karma configuration won't work with Angular 1 tests since +## a specific loading configuration is needed for them. +## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with +## that config. + +PATH=$(npm bin):$PATH +tsc && karma start karma.conf.ng1.js diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/systemjs.config.1.js b/public/docs/_examples/upgrade-phonecat-4-final/ts/systemjs.config.1.js similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/systemjs.config.1.js rename to public/docs/_examples/upgrade-phonecat-4-final/ts/systemjs.config.1.js diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/tsconfig.json b/public/docs/_examples/upgrade-phonecat-4-final/ts/tsconfig.json new file mode 100644 index 0000000000..f267800f14 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/tsconfig.json @@ -0,0 +1,21 @@ +{ + "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/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index a3f67f5b60..5ef6f8c51e 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -33,21 +33,24 @@ include ../_util-fns 4. [Using Component Directives](#using-component-directives) 2. [Upgrading with The Upgrade Module](#upgrading-with-the-upgrade-module) 1. [How The Upgrade Module Works](#how-the-upgrade-module-works) - 2. [Bootstrapping hybrid applications](#bootstrapping-hybrid-applications) + 2. [Bootstrapping hybrid](#bootstrapping-hybrid-applications) 3. [Using Angular Components from AngularJS Code](#using-angular-components-from-angularjs-code) - 4. [Using AngularJS Component Directives from Angular Code](#using-angularjs-component-directives-from-angular-components-from-angularjs-code) + 4. [Using AngularJS Component Directives from Angular Code](#using-angularjs-component-directives-from-angular-code) 5. [Projecting AngularJS Content into Angular Components](#projecting-angularjs-content-into-angular-components) 6. [Transcluding Angular Content into AngularJS Component Directives](#transcluding-angular-content-into-angularjs-component-directives) 7. [Making AngularJS Dependencies Injectable to Angular](#making-angularjs-dependencies-injectable-to-angular) 8. [Making Angular Dependencies Injectable to AngularJS](#making-angular-dependencies-injectable-to-angularjs) + 9. [Using Ahead-of-time compilation with hybrid apps](#using-ahead-of-time-compilation-with-hybrid-apps) + 10. [Dividing routes between Angular and AngularJS](#dividing-routes-between-angular-and-angularjs) 3. [PhoneCat Upgrade Tutorial](#phonecat-upgrade-tutorial) 1. [Switching to TypeScript](#switching-to-typescript) 2. [Installing Angular](#installing-angular) 3. [Bootstrapping a hybrid PhoneCat](#bootstrapping-a-hybrid-phonecat) 4. [Upgrading the Phone service](#upgrading-the-phone-service) 5. [Upgrading Components](#upgrading-components) - 6. [Switching To The Angular Router And Bootstrap](#switching-to-the-angular-router-and-bootstrap) - 7. [Saying Goodbye to AngularJS](#saying-goodbye-to-angularjs) + 6. [AoT compile the hybrid app](#aot-compile-the-hybrid-app) + 7. [Adding The Angular Router And Bootstrap](#adding-the-angular-router-and-bootstrap) + 8. [Say Goodbye to AngularJS](#say-goodbye-to-angularjs) 3. [Appendix: Upgrading PhoneCat Tests](#appendix-upgrading-phonecat-tests) .l-main-section @@ -270,8 +273,7 @@ table * We can make AngularJS services available for injection to Angular code by *upgrading* them. The same singleton instance of each service is shared between the frameworks. In Angular these services will always be in the - *root injector* and available to all components. They will always have - *string tokens* - the same tokens that they have in AngularJS. + *root injector* and available to all components. * We 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. @@ -414,7 +416,7 @@ figure.image-display The first step to upgrading an application using the `UpgradeModule` is always to bootstrap it as a hybrid that supports both AngularJS and - Angular. + Angular, but still is an AngularJS app at top level. Pure AngularJS applications can be bootstrapped in two ways: By using an `ng-app` directive somewhere on the HTML page, or by calling @@ -457,6 +459,12 @@ figure.image-display +makeExample('upgrade-module/ts/src/app/ajs-a-hybrid-bootstrap/app.module.ts', 'bootstrap') +:marked + 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: + ++makeExample('upgrade-module/ts/src/systemjs.config.1.js', 'upgrade-static-umd', 'systemjs.config.js (map)') + :marked Congratulations! You're running a hybrid application! The existing AngularJS code works as before _and_ you're ready to run Angular code. @@ -725,13 +733,21 @@ figure +makeExample('upgrade-module/ts/src/app/ajs-to-a-providers/heroes.service.ts', null, 'heroes.service.ts') :marked - We can upgrade the service using a Angular [Factory provider](../guide/dependency-injection.html#factory-providers) - that requests the service from the AngularJS `$injector`. The name of the Angular dependency is up to you: + We can upgrade the service using a Angular [Factory provider](./dependency-injection.html#factory-providers) + that requests the service from the AngularJS `$injector`. + We recommend declaring 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. + ++makeExample('upgrade-module/ts/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts', null, 'ajs-upgraded-providers.ts') +makeExample('upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts', 'register', 'app.module.ts') :marked - We can then inject it in Angular using a string token: + We can then inject it in Angular using it's class as a type annotation: +makeExample('upgrade-module/ts/src/app/ajs-to-a-providers/hero-detail.component.ts', null, 'hero-detail.component.ts') @@ -772,8 +788,73 @@ figure +makeExample('upgrade-module/ts/src/app/a-to-ajs-providers/hero-detail.component.ts', null, 'hero-detail.component.ts') +:marked + ## 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 + Angular application. + The setup for an hybrid app is mostly the same as described in + [the Ahead-of-time Compilation chapter](../cookbook/aot-compiler.html) + 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. + 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: + ++makeExample('upgrade-phonecat-2-hybrid/ts/app/main-aot.ts', null, 'app/main-aot.ts') + +:marked + And that's all we need to get the full benefit of AoT for Angular apps! + +.alert.is-helpful + :marked + 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. + +:marked + ## 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. + ++makeExample('upgrade-module/ts/src/app/divide-routes/app.component.ts', null, 'app.component.ts') + +:marked + We want to use this component in the body of our `index.html` instead of an AngularJS component: + ++makeExample('upgrade-module/ts/src/index-divide-routes.html', 'body', 'app.component.ts (body)') + +:marked + Next we declare both AngularJS and Angular routes as normal: + ++makeExample('upgrade-module/ts/src/app/divide-routes/app.module.ts', 'ajs-route', 'app.module.ts (AngularJS route)') ++makeExample('upgrade-module/ts/src/app/divide-routes/hero.module.ts', 'a-route', 'hero.module.ts (Angular route)') + +:marked + 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](./router.html#-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. + ++makeExample('upgrade-module/ts/src/app/divide-routes/app.module.ts', 'router-config', 'app.module.ts (router config)') + +:marked + That's it! Now we're running both routers at the same time. .l-main-section @@ -1066,8 +1147,12 @@ code-example(format=""). :marked We also need to make a couple of adjustments to the `systemjs.config.js` file installed during [setup](setup.html). - We want to point the browser to the project - root when loading things through SystemJS, instead of using the `` URL: + + We want to 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` + and add a mapping for the `@angular/upgrade/static` package. +makeExample('upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js', 'paths', 'systemjs.config.js') @@ -1168,7 +1253,7 @@ code-example(format=""). :marked 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.html), + by our [Dependency Injection Guide](./dependency-injection.html), this is a marker decorator we need to use for classes that have no other Angular decorators but still need to have their dependencies injected. @@ -1304,7 +1389,7 @@ code-example(format=""). :marked This is similar to the phone list component. - The new wrinkle is the `@Inject` decorator that identifies the `$routeParams` dependency. + 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. @@ -1313,8 +1398,9 @@ code-example(format=""). Unfortunately, AngularJS dependencies are not automatically available to Angular components. We must use a [Factory provider](#making-angularjs-dependencies-injectable-to-angular) to make `$routeParams` an Angular provider. - Do that in `app.module.ts`: + Do that in a new file called `ajs-upgraded-providers.ts` and import it in `app.module.ts`: ++makeExample('upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts', null, 'app/ajs-upgraded-providers.ts') +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'routeparams', 'app/app.module.ts ($routeParams)')(format='.') :marked @@ -1369,31 +1455,62 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'checkmarkpipe', 'app.module.ts') :marked - ### Switching To The Angular Router And Bootstrap + ## AoT compile the hybrid app + + To use AoT with our hybrid app we have to first set it up like any other Angular application, + as shown in [the Ahead-of-time Compilation chapter](../cookbook/aot-compiler.html). + + Then we have to change `main-aot.ts` bootstrap also bootstrap the AngularJS app + via `UpgradeModule`: + ++makeExample('upgrade-phonecat-2-hybrid/ts/app/main-aot.ts', null, 'app/main-aot.ts') + +:marked + We need to load all the AngularJS files we already use in `index.html` in `aot/index.html` + as well: + ++makeExample('upgrade-phonecat-2-hybrid/ts/aot/index.html', null, 'aot/index.html') + +:marked + These files need to be copied together with the polyfills. Files our 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: + ++makeExample('upgrade-phonecat-2-hybrid/ts/copy-dist-files.js', null, 'copy-dist-files.js') + +:marked + And that's all you need to use AoT while upgrading your app! + +:marked + ### Adding The Angular Router And Bootstrap At this point we've replaced all AngularJS application components with - their Angular counterparts. - - The application is still bootstrapped as a hybrid app. - There's no need for that anymore. - It's time to remove the last remnants of AngularJS in two final steps: - 1. Switch to the Angular router. - 1. Bootstrap as a pure Angular app. + 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. + + #### Add the Angular router - #### Switch to the Angular router Angular has an [all-new router](router.html). Like all routers, it needs a place in the UI to display routed views. - The Angular that's the `` and it belongs in a *root component* + 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. Create a new `app.component.ts` file with the following `AppComponent` class: -+makeExample('upgrade-phonecat-3-final/ts/app/app.component.ts', null, 'app/app.component.ts')(format='.') ++makeExample('upgrade-phonecat-3-router/ts/app/app.component.ts', null, 'app/app.component.ts')(format='.') :marked - It has a simple template that only includes the ``. + It has a simple template that only includes the `` for Angular routes + and `ng-view` for AngularJS routes. This component just renders the contents of the active route and nothing else. The selector tells Angular to plug this root component into the `` @@ -1402,7 +1519,7 @@ code-example(format=""). Add this `` element to the `index.html`. It replaces the old AngularJS `ng-view` directive: -+makeExample('upgrade-phonecat-3-final/ts/index.html', 'appcomponent', 'index.html (body)')(format='.') ++makeExample('upgrade-phonecat-3-router/ts/index.html', 'appcomponent', 'index.html (body)')(format='.') :marked #### Create the _Routing Module_ @@ -1410,57 +1527,75 @@ code-example(format=""). The details of Angular router configuration are best left to the [Routing documentation](router.html) which recommends that you create a `NgModule` dedicated to router configuration - (called a _Routing Module_): + (called a _Routing Module_). -+makeExample('upgrade-phonecat-3-final/ts/app/app-routing.module.ts', null, 'app/app-routing.module.ts') ++makeExample('upgrade-phonecat-3-router/ts/app/app-routing.module.ts', null, 'app/app-routing.module.ts') :marked - This module defines a `routes` object with two routes to the two phone components + This module defines a `routes` object with one route to the phone list component 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. + 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. Now update the `AppModule` to import this `AppRoutingModule` and also the - declare the root `AppComponent`: + 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. -+makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', null, 'app/app.module.ts') + 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. + ++makeExample('upgrade-phonecat-3-router/ts/app/app.module.ts', null, 'app/app.module.ts') + +:marked + Now we need to tell the AngularJS router to only process the `/phones/:phoneId` route: + ++makeExample('upgrade-phonecat-3-router/ts/app/app.config.ts', 'ajs-routes', 'app/app.config.ts (route config)') +:marked + #### 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 + and let that directive construct the appropriate URL to the `PhoneDetailComponent`: + ++makeExample('upgrade-phonecat-3-router/ts/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html (list with links)')(format='.') +.l-sub-section + :marked + See the [Routing](router.html) page for details. + +:marked + 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. :marked 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: -+makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts') -:marked - #### Generate links for each phone - - We no longer have to hardcode the links to phone details in the phone list. - We can generate them by data binding each phone's `id` to the `routerLink` directive - and let that directive construct the appropriate URL to the `PhoneDetailComponent`: - -+makeExample('upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html (list with links)')(format='.') -.l-sub-section - :marked - See the [Routing](router.html) page for details. ++makeExample('upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts') :marked - #### Bootstrap as an Angular app + 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 may have noticed one extra `bootstrap` metadata property added to the `AppModule` -+makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', 'bootstrap', 'app/app.module.ts (bootstrap)')(format='.') -:marked - That tells Angular that it should bootstrap the app with the _root_ `AppComponent` and - insert it's view into the host web page. - - Now switch the bootstrap method of the application from the `UpgradeAdapter` - to the Angular way. - - Now we can drop `upgrade.bootstrap` from our application bootstrap, and remove the - `ngDoBootstrap()` override from `app.module.ts` - -+makeExample('upgrade-phonecat-3-final/ts/app/main.ts', null, 'main.ts') -+makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', null, 'app.module.ts') ++makeExample('upgrade-phonecat-4-final/ts/app/app-routing.module.ts', null, 'app/app-routing.module.ts') :marked You are now running a pure Angular application! @@ -1471,10 +1606,25 @@ code-example(format=""). 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. + ++makeExample('upgrade-phonecat-4-final/ts/app/main.ts', null, 'main.ts') + +:marked If you haven't already, remove all references to the `UpgradeModule` from `app.module.ts`, - as well as any [Factory provider](#making-angularjs-dependencies-injectable-to-angular) for AngularJS services. - Also remove any `downgradeComponent()` you find, together with the associated AngularJS - directive declarations. + as well as any [Factory provider](#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. + ++makeExample('upgrade-phonecat-4-final/ts/app/app.module.ts', null, 'app.module.ts') :marked You may also completely remove the following files. They are AngularJS @@ -1486,11 +1636,13 @@ code-example(format=""). * `app/core/phone/phone.module.ts` * `app/phone-detail/phone-detail.module.ts` * `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. + The `@angular/upgrade` package and it's mapping in `systemjs.config.js` can also go. code-example(format=""). + 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 :marked @@ -1498,7 +1650,7 @@ code-example(format=""). AngularJS scripts, the Angular upgrade module, and jQuery. When we're done, this is what it should look like: -+makeExample('upgrade-phonecat-3-final/ts/index.html', 'full', 'index.html') ++makeExample('upgrade-phonecat-4-final/ts/index.html', 'full', 'index.html') :marked That is the last we'll see of AngularJS! It has served us well but now @@ -1614,12 +1766,12 @@ code-example(format=""). that use WebDriver's generic URL APIs instead. The first of these is the redirection spec: -+makeExample('upgrade-phonecat-3-final/e2e-spec.ts', 'redirect', 'e2e-tests/scenarios.ts') ++makeExample('upgrade-phonecat-4-final/e2e-spec.ts', 'redirect', 'e2e-tests/scenarios.ts') :marked And the second is the phone links spec: -+makeExample('upgrade-phonecat-3-final/e2e-spec.ts', 'links', 'e2e-tests/scenarios.ts') ++makeExample('upgrade-phonecat-4-final/e2e-spec.ts', 'links', 'e2e-tests/scenarios.ts') :marked ### Unit Tests @@ -1693,10 +1845,10 @@ code-example(format=""). router. For the details component we need to provide a mock of Angular `ActivatedRoute` object instead of using the AngularJS `$routeParams`. -+makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts', 'activatedroute', 'app/phone-detail/phone-detail.component.spec.ts') ++makeExample('upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.spec.ts', 'activatedroute', 'app/phone-detail/phone-detail.component.spec.ts') :marked 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. -+makeExample('upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts', 'routestuff', 'app/phone-list/phone-list.component.spec.ts') ++makeExample('upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.spec.ts', 'routestuff', 'app/phone-list/phone-list.component.spec.ts')