From 2ccdd867d2e60b07373c6c7694b427eeb276bb6d Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Mon, 2 May 2016 16:53:25 -0700 Subject: [PATCH 01/94] docs(router): samples and doc for new router (phase 1) --- public/docs/_examples/package.json | 1 + .../_examples/quickstart/js/package.1.json | 20 +- .../_examples/quickstart/ts/package.1.json | 3 +- .../_examples/router-deprecated/e2e-spec.js | 122 ++ .../ts/app/app.component.1.ts | 43 + .../ts/app/app.component.2.ts | 58 + .../ts/app/app.component.3.ts | 53 + .../router-deprecated/ts/app/app.component.ts | 44 + .../app/crisis-center/add-crisis.component.ts | 0 .../crisis-center.component.1.ts | 28 + .../crisis-center/crisis-center.component.ts | 22 + .../crisis-detail.component.1.ts | 94 ++ .../crisis-center/crisis-detail.component.ts | 84 + .../crisis-center/crisis-list.component.1.ts | 36 + .../crisis-center/crisis-list.component.ts | 40 + .../ts/app/crisis-center/crisis.service.ts | 41 + .../ts/app/crisis-list.component.ts | 10 + .../ts/app/dialog.service.ts | 18 + .../ts/app/hero-list.component.ts | 10 + .../ts/app/heroes/hero-detail.component.1.ts | 46 + .../ts/app/heroes/hero-detail.component.ts | 51 + .../ts/app/heroes/hero-list.component.1.ts | 49 + .../ts/app/heroes/hero-list.component.ts | 53 + .../ts/app/heroes/hero.service.ts | 27 + .../router-deprecated/ts/app/main.1.ts | 23 + .../router-deprecated/ts/app/main.2.ts | 32 + .../router-deprecated/ts/app/main.3.ts | 7 + .../router-deprecated/ts/app/main.ts | 7 + .../router-deprecated/ts/example-config.json | 0 .../router-deprecated/ts/index.1.html | 33 + .../router-deprecated/ts/index.2.html | 31 + .../router-deprecated/ts/index.3.html | 31 + .../_examples/router-deprecated/ts/index.html | 30 + .../router/ts/app/app.component.1.ts | 27 +- .../router/ts/app/app.component.2.ts | 58 +- .../router/ts/app/app.component.3.ts | 70 +- .../_examples/router/ts/app/app.component.ts | 47 +- .../crisis-center.component.1.ts | 18 +- .../crisis-center/crisis-center.component.ts | 18 +- .../crisis-detail.component.1.ts | 40 +- .../crisis-center/crisis-detail.component.ts | 40 +- .../crisis-center/crisis-list.component.1.ts | 19 +- .../crisis-center/crisis-list.component.ts | 34 +- .../ts/app/crisis-center/crisis.service.ts | 33 +- .../router/ts/app/crisis-list.component.ts | 2 +- .../_examples/router/ts/app/dialog.service.ts | 4 +- .../router/ts/app/hero-list.component.ts | 2 +- .../ts/app/heroes/hero-detail.component.1.ts | 27 +- .../ts/app/heroes/hero-detail.component.ts | 30 +- .../ts/app/heroes/hero-list.component.1.ts | 17 +- .../ts/app/heroes/hero-list.component.ts | 32 +- .../router/ts/app/heroes/hero.service.ts | 22 +- public/docs/_examples/router/ts/app/main.1.ts | 10 +- public/docs/_examples/router/ts/app/main.2.ts | 13 +- public/docs/_examples/router/ts/app/main.3.ts | 6 +- public/docs/_examples/router/ts/app/main.ts | 6 +- public/docs/_examples/router/ts/index.2.html | 7 +- public/docs/_examples/router/ts/index.3.html | 4 +- public/docs/_examples/router/ts/index.html | 4 +- public/docs/_examples/systemjs.config.js | 2 +- .../docs/_examples/systemjs.config.plunker.js | 2 +- public/docs/dart/latest/guide/_data.json | 8 +- .../dart/latest/guide/router-deprecated.jade | 1 + public/docs/js/latest/guide/_data.json | 8 +- .../js/latest/guide/router-deprecated.jade | 1 + public/docs/ts/latest/guide/_data.json | 9 +- public/docs/ts/latest/guide/router-aux.jade | 185 --- .../ts/latest/guide/router-deprecated.jade | 1480 +++++++++++++++++ public/docs/ts/latest/guide/router.jade | 12 +- 69 files changed, 2954 insertions(+), 491 deletions(-) create mode 100644 public/docs/_examples/router-deprecated/e2e-spec.js create mode 100644 public/docs/_examples/router-deprecated/ts/app/app.component.1.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/app.component.2.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/app.component.3.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/app.component.ts rename public/docs/_examples/{router => router-deprecated}/ts/app/crisis-center/add-crisis.component.ts (100%) create mode 100644 public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.1.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/crisis-list.component.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/dialog.service.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/hero-list.component.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.1.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.1.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/main.1.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/main.2.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/main.3.ts create mode 100644 public/docs/_examples/router-deprecated/ts/app/main.ts create mode 100644 public/docs/_examples/router-deprecated/ts/example-config.json create mode 100644 public/docs/_examples/router-deprecated/ts/index.1.html create mode 100644 public/docs/_examples/router-deprecated/ts/index.2.html create mode 100644 public/docs/_examples/router-deprecated/ts/index.3.html create mode 100644 public/docs/_examples/router-deprecated/ts/index.html create mode 100644 public/docs/dart/latest/guide/router-deprecated.jade create mode 100644 public/docs/js/latest/guide/router-deprecated.jade delete mode 100644 public/docs/ts/latest/guide/router-aux.jade create mode 100644 public/docs/ts/latest/guide/router-deprecated.jade diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index f1017685de..d568c823f1 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -25,6 +25,7 @@ "@angular/http": "2.0.0-rc.0", "@angular/platform-browser": "2.0.0-rc.0", "@angular/platform-browser-dynamic": "2.0.0-rc.0", + "@angular/router": "2.0.0-rc.0", "@angular/router-deprecated": "2.0.0-rc.0", "@angular/upgrade": "2.0.0-rc.0", diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index 6ca4585d27..d020c77798 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -7,14 +7,22 @@ }, "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.0", - "@angular/compiler": "2.0.0-rc.0", - "@angular/core": "2.0.0-rc.0", - "@angular/platform-browser": "2.0.0-rc.0", - "@angular/platform-browser-dynamic": "2.0.0-rc.0", + "@angular/common": "2.0.0-rc.0", + "@angular/compiler": "2.0.0-rc.0", + "@angular/core": "2.0.0-rc.0", + "@angular/http": "2.0.0-rc.0", + "@angular/platform-browser": "2.0.0-rc.0", + "@angular/platform-browser-dynamic": "2.0.0-rc.0", + "@angular/router": "2.0.0-rc.0", + "@angular/router-deprecated": "2.0.0-rc.0", + "@angular/upgrade": "2.0.0-rc.0", + "reflect-metadata": "0.1.3", "rxjs": "5.0.0-beta.6", - "zone.js": "0.6.12" + "zone.js": "0.6.12", + + "angular2-in-memory-web-api": "0.0.6", + "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.0.0", diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index 16ed9c6461..d43f688043 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -17,6 +17,7 @@ "@angular/http": "2.0.0-rc.0", "@angular/platform-browser": "2.0.0-rc.0", "@angular/platform-browser-dynamic": "2.0.0-rc.0", + "@angular/router": "2.0.0-rc.0", "@angular/router-deprecated": "2.0.0-rc.0", "@angular/upgrade": "2.0.0-rc.0", @@ -26,7 +27,7 @@ "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", - "angular2-in-memory-web-api": "0.0.5", + "angular2-in-memory-web-api": "0.0.6", "bootstrap": "^3.3.6" }, "devDependencies": { diff --git a/public/docs/_examples/router-deprecated/e2e-spec.js b/public/docs/_examples/router-deprecated/e2e-spec.js new file mode 100644 index 0000000000..bd3f84ee83 --- /dev/null +++ b/public/docs/_examples/router-deprecated/e2e-spec.js @@ -0,0 +1,122 @@ +describe('Router', function () { + + beforeAll(function () { + browser.get(''); + }); + + function getPageStruct() { + hrefEles = element.all(by.css('my-app a')); + + return { + hrefs: hrefEles, + routerParent: element(by.css('my-app > undefined')), + routerTitle: element(by.css('my-app > undefined > h2')), + + crisisHref: hrefEles.get(0), + crisisList: element.all(by.css('my-app > undefined > undefined li')), + crisisDetail: element(by.css('my-app > undefined > undefined > div')), + crisisDetailTitle: element(by.css('my-app > undefined > undefined > div > h3')), + + heroesHref: hrefEles.get(1), + heroesList: element.all(by.css('my-app > undefined li')), + heroDetail: element(by.css('my-app > undefined > div')), + heroDetailTitle: element(by.css('my-app > undefined > div > h3')), + + } + } + + it('should be able to see the start screen', function () { + var page = getPageStruct(); + expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices'); + expect(page.crisisHref.getText()).toEqual("Crisis Center"); + expect(page.heroesHref.getText()).toEqual("Heroes"); + }); + + it('should be able to see crises center items', function () { + var page = getPageStruct(); + expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries at start"); + }); + + it('should be able to see hero items', function () { + var page = getPageStruct(); + page.heroesHref.click().then(function() { + expect(page.routerTitle.getText()).toContain('HEROES'); + expect(page.heroesList.count()).toBe(6, "should be 6 heroes"); + }); + }); + + it('should be able to toggle the views', function () { + var page = getPageStruct(); + page.crisisHref.click().then(function() { + expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries"); + return page.heroesHref.click(); + }).then(function() { + expect(page.heroesList.count()).toBe(6, "should be 6 heroes"); + }); + }); + + it('should be able to edit and save details from the crisis center view', function () { + crisisCenterEdit(2, true); + }); + + it('should be able to edit and cancel details from the crisis center view', function () { + crisisCenterEdit(3, false); + }); + + it('should be able to edit and save details from the heroes view', function () { + var page = getPageStruct(); + var heroEle, heroText; + page.heroesHref.click().then(function() { + heroEle = page.heroesList.get(4); + return heroEle.getText(); + }).then(function(text) { + expect(text.length).toBeGreaterThan(0, 'should have some text'); + // remove leading id from text + heroText = text.substr(text.indexOf(' ')).trim(); + return heroEle.click(); + }).then(function() { + expect(page.heroesList.count()).toBe(0, "should no longer see crisis center entries"); + expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); + expect(page.heroDetailTitle.getText()).toContain(heroText); + var inputEle = page.heroDetail.element(by.css('input')); + return sendKeys(inputEle, '-foo'); + }).then(function() { + expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo'); + var buttonEle = page.heroDetail.element(by.css('button')); + return buttonEle.click(); + }).then(function() { + expect(heroEle.getText()).toContain(heroText + '-foo'); + }) + }); + + function crisisCenterEdit(index, shouldSave) { + var page = getPageStruct(); + var crisisEle, crisisText; + page.crisisHref.click().then(function () { + crisisEle = page.crisisList.get(index); + return crisisEle.getText(); + }).then(function (text) { + expect(text.length).toBeGreaterThan(0, 'should have some text'); + // remove leading id from text + crisisText = text.substr(text.indexOf(' ')).trim(); + return crisisEle.click(); + }).then(function () { + expect(page.crisisList.count()).toBe(0, "should no longer see crisis center entries"); + expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); + expect(page.crisisDetailTitle.getText()).toContain(crisisText); + var inputEle = page.crisisDetail.element(by.css('input')); + return sendKeys(inputEle, '-foo'); + }).then(function () { + expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo'); + var buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel')); + return buttonEle.click(); + }).then(function () { + if (shouldSave) { + expect(crisisEle.getText()).toContain(crisisText + '-foo'); + } else { + expect(crisisEle.getText()).not.toContain(crisisText + '-foo'); + } + }); + } + +}); diff --git a/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts new file mode 100644 index 0000000000..0ceeb73848 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts @@ -0,0 +1,43 @@ +/* First version */ +// #docplaster + +// #docregion +import { Component } from '@angular/core'; +// #docregion import-router +import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; +// #enddocregion import-router + +import { CrisisListComponent } from './crisis-list.component'; +import { HeroListComponent } from './hero-list.component'; + +@Component({ + selector: 'my-app', +// #docregion template + template: ` +

Component Router

+ + + `, +// #enddocregion template + directives: [ROUTER_DIRECTIVES] +}) +// #enddocregion +/* +// #docregion route-config +@Component({ ... }) +// #enddocregion route-config +*/ +// #docregion +// #docregion route-config +@RouteConfig([ +// #docregion route-defs + {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent}, + {path: '/heroes', name: 'Heroes', component: HeroListComponent} +// #enddocregion route-defs +]) +export class AppComponent { } +// #enddocregion route-config +// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/app.component.2.ts b/public/docs/_examples/router-deprecated/ts/app/app.component.2.ts new file mode 100644 index 0000000000..ec0cb936b3 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/app.component.2.ts @@ -0,0 +1,58 @@ +/* Second Heroes version */ +// #docplaster + +// #docregion +import {Component} from '@angular/core'; +import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; + +import {CrisisListComponent} from './crisis-list.component'; +// #enddocregion +/* +// Apparent Milestone 2 imports +// #docregion +// #docregion hero-import +import {HeroListComponent} from './heroes/hero-list.component'; +import {HeroDetailComponent} from './heroes/hero-detail.component'; +import {HeroService} from './heroes/hero.service'; +// #enddocregion hero-import +// #enddocregion +*/ +// Actual Milestone 2 imports +import {HeroListComponent} from './heroes/hero-list.component.1'; +import {HeroDetailComponent} from './heroes/hero-detail.component.1'; +import {HeroService} from './heroes/hero.service'; +// #docregion + +@Component({ + selector: 'my-app', + template: ` +

Component Router

+ + + `, + providers: [HeroService], + directives: [ROUTER_DIRECTIVES] +}) +// #enddocregion +/* +// #docregion route-config +@Component({ ... }) +// #enddocregion route-config +*/ +// #docregion +// #docregion route-config +@RouteConfig([ +// #docregion route-defs + {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent}, + {path: '/heroes', name: 'Heroes', component: HeroListComponent}, + // #docregion hero-detail-route + {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent} + // #enddocregion hero-detail-route +// #enddocregion route-defs +]) +export class AppComponent { } +// #enddocregion route-config +// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/app.component.3.ts b/public/docs/_examples/router-deprecated/ts/app/app.component.3.ts new file mode 100644 index 0000000000..d0bd0b4f84 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/app.component.3.ts @@ -0,0 +1,53 @@ +// #docplaster +import {Component} from '@angular/core'; +import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; + +import {CrisisCenterComponent} from './crisis-center/crisis-center.component.1'; + +import {DialogService} from './dialog.service'; +import {HeroService} from './heroes/hero.service'; + +@Component({ + selector: 'my-app', +// #enddocregion + /* Typical link + // #docregion h-anchor + Heroes + // #enddocregion h-anchor + */ + /* Incomplete Crisis Center link when CC lacks a default + // #docregion cc-anchor-fail + // The link now fails with a "non-terminal link" error + // #docregion cc-anchor-w-default + Crisis Center + // #enddocregion cc-anchor-w-default + // #enddocregion cc-anchor-fail + */ + /* Crisis Center link when CC lacks a default + // #docregion cc-anchor-no-default + Crisis Center + // #enddocregion cc-anchor-no-default + */ + /* Crisis Center Detail link + // #docregion Dragon-anchor + Dragon Crisis + // #enddocregion Dragon-anchor + */ +// #docregion template + template: ` +

Component Router

+ + + `, +// #enddocregion template + providers: [DialogService, HeroService], + directives: [ROUTER_DIRECTIVES] +}) +@RouteConfig([ + {path: '/crisis-center/...', name: 'CrisisCenter', component: CrisisCenterComponent}, +]) +export class AppComponent { } diff --git a/public/docs/_examples/router-deprecated/ts/app/app.component.ts b/public/docs/_examples/router-deprecated/ts/app/app.component.ts new file mode 100644 index 0000000000..4d8528c463 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/app.component.ts @@ -0,0 +1,44 @@ +// #docplaster +// #docregion +import {Component} from '@angular/core'; +import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; + +import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; +import {HeroListComponent} from './heroes/hero-list.component'; +import {HeroDetailComponent} from './heroes/hero-detail.component'; + +import {DialogService} from './dialog.service'; +import {HeroService} from './heroes/hero.service'; + +@Component({ + selector: 'my-app', +// #docregion template + template: ` +

Component Router

+ + + `, +// #enddocregion template + providers: [DialogService, HeroService], + directives: [ROUTER_DIRECTIVES] +}) +// #docregion route-config +@RouteConfig([ + + // #docregion route-config-cc + { // Crisis Center child route + path: '/crisis-center/...', + name: 'CrisisCenter', + component: CrisisCenterComponent, + useAsDefault: true + }, + // #enddocregion route-config-cc + + {path: '/heroes', name: 'Heroes', component: HeroListComponent}, + {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}, +]) +// #enddocregion route-config +export class AppComponent { } diff --git a/public/docs/_examples/router/ts/app/crisis-center/add-crisis.component.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/add-crisis.component.ts similarity index 100% rename from public/docs/_examples/router/ts/app/crisis-center/add-crisis.component.ts rename to public/docs/_examples/router-deprecated/ts/app/crisis-center/add-crisis.component.ts diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts new file mode 100644 index 0000000000..027d8df037 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts @@ -0,0 +1,28 @@ +import {Component} from '@angular/core'; +import {RouteConfig, RouterOutlet} from '@angular/router-deprecated'; + +import {CrisisListComponent} from './crisis-list.component.1'; +import {CrisisDetailComponent} from './crisis-detail.component.1'; +import {CrisisService} from './crisis.service'; + +// #docregion minus-imports +@Component({ + template: ` +

CRISIS CENTER

+ + `, + directives: [RouterOutlet], +// #docregion providers + providers: [CrisisService] +// #enddocregion providers +}) +// #docregion route-config +@RouteConfig([ + // #docregion default-route + {path:'/', name: 'CrisisList', component: CrisisListComponent, useAsDefault: true}, + // #enddocregion default-route + {path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent} +]) +// #enddocregion route-config +export class CrisisCenterComponent { } +// #enddocregion minus-imports diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.ts new file mode 100644 index 0000000000..77060d936b --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.ts @@ -0,0 +1,22 @@ +// #docregion +import {Component} from '@angular/core'; +import {RouteConfig, RouterOutlet} from '@angular/router-deprecated'; + +import {CrisisListComponent} from './crisis-list.component'; +import {CrisisDetailComponent} from './crisis-detail.component'; +import {CrisisService} from './crisis.service'; + +@Component({ + template: ` +

CRISIS CENTER

+ + `, + directives: [RouterOutlet], + providers: [CrisisService] +}) +@RouteConfig([ + {path:'/', name: 'CrisisList', component: CrisisListComponent, useAsDefault: true}, + {path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent} +]) +export class CrisisCenterComponent { } +// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts new file mode 100644 index 0000000000..f92180e462 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts @@ -0,0 +1,94 @@ +// #docplaster + +// #docregion +import {Component, OnInit} from '@angular/core'; +import {Crisis, CrisisService} from './crisis.service'; +import {RouteParams, Router} from '@angular/router-deprecated'; +// #docregion routerCanDeactivate +import {CanDeactivate, ComponentInstruction} from '@angular/router-deprecated'; +import {DialogService} from '../dialog.service'; + +// #enddocregion routerCanDeactivate + +@Component({ + // #docregion template + template: ` +
+

"{{editName}}"

+
+ {{crisis.id}}
+
+ + +
+

+ + +

+
+ `, + // #enddocregion template + styles: ['input {width: 20em}'] +}) +// #docregion routerCanDeactivate, cancel-save +export class CrisisDetailComponent implements OnInit, CanDeactivate { + + crisis: Crisis; + editName: string; + +// #enddocregion routerCanDeactivate, cancel-save + constructor( + private _service: CrisisService, + private _router: Router, + private _routeParams: RouteParams, + private _dialog: DialogService + ) { } + + // #docregion ngOnInit + ngOnInit() { + let id = +this._routeParams.get('id'); + this._service.getCrisis(id).then(crisis => { + if (crisis) { + this.editName = crisis.name; + this.crisis = crisis; + } else { // id not found + this.gotoCrises(); + } + }); + } + // #enddocregion ngOnInit + + // #docregion routerCanDeactivate + routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any { + // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged. + if (!this.crisis || this.crisis.name === this.editName) { + return true; + } + // Otherwise ask the user with the dialog service and return its + // promise which resolves to true or false when the user decides + return this._dialog.confirm('Discard changes?'); + } + // #enddocregion routerCanDeactivate + + // #docregion cancel-save + cancel() { + this.editName = this.crisis.name; + this.gotoCrises(); + } + + save() { + this.crisis.name = this.editName; + this.gotoCrises(); + } + // #enddocregion cancel-save + + // #docregion gotoCrises + gotoCrises() { + // Like Crisis Center +

"{{editName}}"

+
+ {{crisis.id}}
+
+ + +
+

+ + +

+ + `, + styles: ['input {width: 20em}'] +}) + +export class CrisisDetailComponent implements OnInit, CanDeactivate { + + crisis: Crisis; + editName: string; + + constructor( + private _service: CrisisService, + private _router: Router, + private _routeParams: RouteParams, + private _dialog: DialogService + ) { } + + ngOnInit() { + let id = +this._routeParams.get('id'); + this._service.getCrisis(id).then(crisis => { + if (crisis) { + this.editName = crisis.name; + this.crisis = crisis; + } else { // id not found + this.gotoCrises(); + } + }); + } + + routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any { + // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged. + if (!this.crisis || this.crisis.name === this.editName) { + return true; + } + // Otherwise ask the user with the dialog service and return its + // promise which resolves to true or false when the user decides + return this._dialog.confirm('Discard changes?'); + } + + cancel() { + this.editName = this.crisis.name; + this.gotoCrises(); + } + + save() { + this.crisis.name = this.editName; + this.gotoCrises(); + } + + // #docregion gotoCrises + gotoCrises() { + let crisisId = this.crisis ? this.crisis.id : null; + // Pass along the hero id if available + // so that the CrisisListComponent can select that hero. + // Add a totally useless `foo` parameter for kicks. + // #docregion gotoCrises-navigate + this._router.navigate(['CrisisList', {id: crisisId, foo: 'foo'} ]); + // #enddocregion gotoCrises-navigate + } + // #enddocregion gotoCrises +} diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.1.ts new file mode 100644 index 0000000000..f2fa9c770c --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.1.ts @@ -0,0 +1,36 @@ +// #docplaster + +// #docregion +import {Component, OnInit} from '@angular/core'; +import {Crisis, CrisisService} from './crisis.service'; +import {Router} from '@angular/router-deprecated'; + +@Component({ + // #docregion template + template: ` + + `, + // #enddocregion template +}) +export class CrisisListComponent implements OnInit { + crises: Crisis[]; + + constructor( + private _service: CrisisService, + private _router: Router) {} + + ngOnInit() { + this._service.getCrises().then(crises => this.crises = crises); + } + + // #docregion select + onSelect(crisis: Crisis) { + this._router.navigate(['CrisisDetail', { id: crisis.id }] ); + } + // #enddocregion select +} diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.ts new file mode 100644 index 0000000000..3a6128302f --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.ts @@ -0,0 +1,40 @@ +// #docplaster + +// #docregion +import {Component, OnInit} from '@angular/core'; +import {Crisis, CrisisService} from './crisis.service'; +import {Router, RouteParams} from '@angular/router-deprecated'; + +@Component({ + template: ` + + `, +}) +export class CrisisListComponent implements OnInit { + crises: Crisis[]; + + private _selectedId: number; + + constructor( + private _service: CrisisService, + private _router: Router, + routeParams: RouteParams) { + this._selectedId = +routeParams.get('id'); + } + + isSelected(crisis: Crisis) { return crisis.id === this._selectedId; } + + ngOnInit() { + this._service.getCrises().then(crises => this.crises = crises); + } + + onSelect(crisis: Crisis) { + this._router.navigate( ['CrisisDetail', { id: crisis.id }] ); + } +} diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts new file mode 100644 index 0000000000..c71827a656 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts @@ -0,0 +1,41 @@ +// #docplaster + +// #docregion +import {Injectable} from '@angular/core'; + +export class Crisis { + constructor(public id: number, public name: string) { } +} + +@Injectable() +export class CrisisService { + getCrises() { return crisesPromise; } + + getCrisis(id: number | string) { + return crisesPromise + .then(crises => crises.filter(c => c.id === +id)[0]); + } + +// #enddocregion + + static nextCrisisId = 100; + + addCrisis(name:string) { + name = name.trim(); + if (name){ + let crisis = new Crisis(CrisisService.nextCrisisId++, name); + crisesPromise.then(crises => crises.push(crisis)); + } + } +// #docregion +} + +var crises = [ + new Crisis(1, 'Dragon Burning Cities'), + new Crisis(2, 'Sky Rains Great White Sharks'), + new Crisis(3, 'Giant Asteroid Heading For Earth'), + new Crisis(4, 'Procrastinators Meeting Delayed Again'), +]; + +var crisesPromise = Promise.resolve(crises); +// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-list.component.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-list.component.ts new file mode 100644 index 0000000000..9a22de266a --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/crisis-list.component.ts @@ -0,0 +1,10 @@ +// Initial empty version +// #docregion +import {Component} from '@angular/core'; + +@Component({ + template: ` +

CRISIS CENTER

+

Get your crisis here

` +}) +export class CrisisListComponent { } diff --git a/public/docs/_examples/router-deprecated/ts/app/dialog.service.ts b/public/docs/_examples/router-deprecated/ts/app/dialog.service.ts new file mode 100644 index 0000000000..c795945d2b --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/dialog.service.ts @@ -0,0 +1,18 @@ +// #docregion +import {Injectable} from '@angular/core'; +/** + * Async modal dialog service + * DialogService makes this app easier to test by faking this service. + * TODO: better modal implemenation that doesn't use window.confirm + */ +@Injectable() +export class DialogService { + /** + * Ask user to confirm an action. `message` explains the action and choices. + * Returns promise resolving to `true`=confirm or `false`=cancel + */ + confirm(message?:string) { + return new Promise((resolve, reject) => + resolve(window.confirm(message || 'Is it OK?'))); + }; +} diff --git a/public/docs/_examples/router-deprecated/ts/app/hero-list.component.ts b/public/docs/_examples/router-deprecated/ts/app/hero-list.component.ts new file mode 100644 index 0000000000..48c108dde1 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/hero-list.component.ts @@ -0,0 +1,10 @@ +/// Initial empty version +// #docregion +import {Component} from '@angular/core'; + +@Component({ + template: ` +

HEROES

+

Get your heroes here

` +}) +export class HeroListComponent { } diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.1.ts new file mode 100644 index 0000000000..7002b9a1dd --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.1.ts @@ -0,0 +1,46 @@ +// #docregion +import {Component, OnInit} from '@angular/core'; +import {Hero, HeroService} from './hero.service'; +import {RouteParams, Router} from '@angular/router-deprecated'; + +@Component({ + template: ` +

HEROES

+
+

"{{hero.name}}"

+
+ {{hero.id}}
+
+ + +
+

+ +

+
+ `, +}) +export class HeroDetailComponent implements OnInit { + hero: Hero; + + // #docregion ctor + constructor( + private _router:Router, + private _routeParams:RouteParams, + private _service:HeroService){} + // #enddocregion ctor + + // #docregion ngOnInit + ngOnInit() { + let id = this._routeParams.get('id'); + this._service.getHero(id).then(hero => this.hero = hero); + } + // #enddocregion ngOnInit + + // #docregion gotoHeroes + gotoHeroes() { + // Like Heroes + this._router.navigate(['Heroes']); + } + // #enddocregion gotoHeroes +} diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.ts new file mode 100644 index 0000000000..edbf163b37 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.ts @@ -0,0 +1,51 @@ +// #docregion +import {Component, OnInit} from '@angular/core'; +import {Hero, HeroService} from './hero.service'; +import {RouteParams, Router} from '@angular/router-deprecated'; + +@Component({ + template: ` +

HEROES

+
+

"{{hero.name}}"

+
+ {{hero.id}}
+
+ + +
+

+ +

+
+ `, +}) +export class HeroDetailComponent implements OnInit { + hero: Hero; + + // #docregion ctor + constructor( + private _router:Router, + private _routeParams:RouteParams, + private _service:HeroService){} + // #enddocregion ctor + + // #docregion ngOnInit + ngOnInit() { + let id = this._routeParams.get('id'); + this._service.getHero(id).then(hero => this.hero = hero); + } + // #enddocregion ngOnInit + + // #docregion gotoHeroes + gotoHeroes() { + let heroId = this.hero ? this.hero.id : null; + // Pass along the hero id if available + // so that the HeroList component can select that hero. + // Add a totally useless `foo` parameter for kicks. + // #docregion gotoHeroes-navigate + this._router.navigate(['Heroes', {id: heroId, foo: 'foo'} ]); + // #enddocregion gotoHeroes-navigate + } + // #enddocregion gotoHeroes +} diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.1.ts new file mode 100644 index 0000000000..18f6c6e36a --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.1.ts @@ -0,0 +1,49 @@ +// #docplaster + +// #docregion +// TODO SOMEDAY: Feature Componetized like HeroCenter +import {Component, OnInit} from '@angular/core'; +import {Hero, HeroService} from './hero.service'; +import {Router} from '@angular/router-deprecated'; + +@Component({ + // #docregion template + template: ` +

HEROES

+ + ` + // #enddocregion template +}) +export class HeroListComponent implements OnInit { + heroes: Hero[]; + + // #docregion ctor + constructor( + private _router: Router, + private _service: HeroService) { } + // #enddocregion ctor + + ngOnInit() { + this._service.getHeroes().then(heroes => this.heroes = heroes) + } + + // #docregion select + onSelect(hero: Hero) { + // #docregion nav-to-detail + this._router.navigate( ['HeroDetail', { id: hero.id }] ); + // #enddocregion nav-to-detail + } + // #enddocregion select +} +// #enddocregion + +/* A link parameters array +// #docregion link-parameters-array +['HeroDetail', { id: hero.id }] // {id: 15} +// #enddocregion link-parameters-array +*/ \ No newline at end of file diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.ts new file mode 100644 index 0000000000..3a5127d11f --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.ts @@ -0,0 +1,53 @@ +// #docplaster + +// TODO SOMEDAY: Feature Componetized like CrisisCenter +// #docregion +import {Component, OnInit} from '@angular/core'; +import {Hero, HeroService} from './hero.service'; +// #docregion import-route-params +import {Router, RouteParams} from '@angular/router-deprecated'; +// #enddocregion import-route-params + +@Component({ + // #docregion template + template: ` +

HEROES

+ + ` + // #enddocregion template +}) +export class HeroListComponent implements OnInit { + heroes: Hero[]; + + // #docregion ctor + private _selectedId: number; + + constructor( + private _service: HeroService, + private _router: Router, + routeParams: RouteParams) { + this._selectedId = +routeParams.get('id'); + } + // #enddocregion ctor + + // #docregion isSelected + isSelected(hero: Hero) { return hero.id === this._selectedId; } + // #enddocregion isSelected + + // #docregion select + onSelect(hero: Hero) { + this._router.navigate( ['HeroDetail', { id: hero.id }] ); + } + // #enddocregion select + + ngOnInit() { + this._service.getHeroes().then(heroes => this.heroes = heroes) + } +} +// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts new file mode 100644 index 0000000000..0b6066ee03 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts @@ -0,0 +1,27 @@ +// #docregion +import {Injectable} from '@angular/core'; + +export class Hero { + constructor(public id: number, public name: string) { } +} + +@Injectable() +export class HeroService { + getHeroes() { return heroesPromise; } + + getHero(id: number | string) { + return heroesPromise + .then(heroes => heroes.filter(h => h.id === +id)[0]); + } +} + +var HEROES = [ + new Hero(11, 'Mr. Nice'), + new Hero(12, 'Narco'), + new Hero(13, 'Bombasto'), + new Hero(14, 'Celeritas'), + new Hero(15, 'Magneta'), + new Hero(16, 'RubberMan') +]; + +var heroesPromise = Promise.resolve(HEROES); diff --git a/public/docs/_examples/router-deprecated/ts/app/main.1.ts b/public/docs/_examples/router-deprecated/ts/app/main.1.ts new file mode 100644 index 0000000000..d9a288e6c0 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/main.1.ts @@ -0,0 +1,23 @@ +/* First version */ +// #docplaster + +// #docregion all +import {AppComponent} from './app.component'; +import {bootstrap} from '@angular/platform-browser-dynamic'; +import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; + +// #enddocregion all + +/* Can't use AppComponent ... but display as if we can +// #docregion all +bootstrap(AppComponent, [ +// #enddocregion all +*/ + +// Actually use the v.1 component +import {AppComponent as ac} from './app.component.1'; +bootstrap(ac, [ +// #docregion all + ROUTER_PROVIDERS +]); +// #enddocregion all \ No newline at end of file diff --git a/public/docs/_examples/router-deprecated/ts/app/main.2.ts b/public/docs/_examples/router-deprecated/ts/app/main.2.ts new file mode 100644 index 0000000000..d984713151 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/main.2.ts @@ -0,0 +1,32 @@ +/* Second version */ +// For Milestone #2 +// Also includes digression on HashPathStrategy (not used in the final app) +// #docplaster + +// #docregion +import {bootstrap} from '@angular/platform-browser-dynamic'; +import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; +import {AppComponent} from './app.component'; + +// Add these symbols to override the `LocationStrategy` +import {provide} from '@angular/core'; +import {LocationStrategy, + HashLocationStrategy} from '@angular/common'; +// #enddocregion +/* Can't use AppComponent ... but display as if we can +// #docregion + +bootstrap(AppComponent, [ +// #enddocregion +*/ + +// Actually use the v.2 component +import {AppComponent as ac} from './app.component.2'; + +bootstrap(ac, [ +// #docregion + ROUTER_PROVIDERS, + provide(LocationStrategy, + {useClass: HashLocationStrategy}) // .../#/crisis-center/ +]); +// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/main.3.ts b/public/docs/_examples/router-deprecated/ts/app/main.3.ts new file mode 100644 index 0000000000..2c84a01d02 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/main.3.ts @@ -0,0 +1,7 @@ +// #docregion +import {bootstrap} from '@angular/platform-browser-dynamic'; +import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; + +import {AppComponent} from './app.component.3'; + +bootstrap(AppComponent, [ROUTER_PROVIDERS]); diff --git a/public/docs/_examples/router-deprecated/ts/app/main.ts b/public/docs/_examples/router-deprecated/ts/app/main.ts new file mode 100644 index 0000000000..eb0b424738 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/app/main.ts @@ -0,0 +1,7 @@ +// #docregion +import {bootstrap} from '@angular/platform-browser-dynamic'; +import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; + +import {AppComponent} from './app.component'; + +bootstrap(AppComponent, [ROUTER_PROVIDERS]); diff --git a/public/docs/_examples/router-deprecated/ts/example-config.json b/public/docs/_examples/router-deprecated/ts/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/router-deprecated/ts/index.1.html b/public/docs/_examples/router-deprecated/ts/index.1.html new file mode 100644 index 0000000000..6bc706e2e6 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/index.1.html @@ -0,0 +1,33 @@ + + + + + + + + Router Sample v.1 + + + + + + + + + + + + + + + + +

Milestone 1

+ loading... + + + + diff --git a/public/docs/_examples/router-deprecated/ts/index.2.html b/public/docs/_examples/router-deprecated/ts/index.2.html new file mode 100644 index 0000000000..c25f8fb366 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/index.2.html @@ -0,0 +1,31 @@ + + + + + + Router Sample v.2 + + + + + + + + + + + + + + + + +

Milestone 2

+ loading... + + + + diff --git a/public/docs/_examples/router-deprecated/ts/index.3.html b/public/docs/_examples/router-deprecated/ts/index.3.html new file mode 100644 index 0000000000..1be32f1d0d --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/index.3.html @@ -0,0 +1,31 @@ + + + + + + Router Sample v.3 + + + + + + + + + + + + + + + + +

Milestone 3

+ loading... + + + + diff --git a/public/docs/_examples/router-deprecated/ts/index.html b/public/docs/_examples/router-deprecated/ts/index.html new file mode 100644 index 0000000000..58b2d0c7f7 --- /dev/null +++ b/public/docs/_examples/router-deprecated/ts/index.html @@ -0,0 +1,30 @@ + + + + + + + Router Sample + + + + + + + + + + + + + + + + + loading... + + + + diff --git a/public/docs/_examples/router/ts/app/app.component.1.ts b/public/docs/_examples/router/ts/app/app.component.1.ts index 0ceeb73848..274bb61909 100644 --- a/public/docs/_examples/router/ts/app/app.component.1.ts +++ b/public/docs/_examples/router/ts/app/app.component.1.ts @@ -3,12 +3,10 @@ // #docregion import { Component } from '@angular/core'; -// #docregion import-router -import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; -// #enddocregion import-router +import { Routes, ROUTER_DIRECTIVES } from '@angular/router'; -import { CrisisListComponent } from './crisis-list.component'; -import { HeroListComponent } from './hero-list.component'; +import { CrisisListComponent } from './crisis-list.component'; +import { HeroListComponent } from './hero-list.component'; @Component({ selector: 'my-app', @@ -16,8 +14,8 @@ import { HeroListComponent } from './hero-list.component'; template: `

Component Router

`, @@ -26,16 +24,17 @@ import { HeroListComponent } from './hero-list.component'; }) // #enddocregion /* -// #docregion route-config -@Component({ ... }) -// #enddocregion route-config -*/ + // #docregion route-config + @Component({ ... }) + // #enddocregion route-config + */ // #docregion // #docregion route-config -@RouteConfig([ +@Routes([ // #docregion route-defs - {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent}, - {path: '/heroes', name: 'Heroes', component: HeroListComponent} + {path: '/crisis-center', component: CrisisListComponent}, + {path: '/heroes', component: HeroListComponent}, + {path: '*', component: CrisisListComponent} // #enddocregion route-defs ]) export class AppComponent { } diff --git a/public/docs/_examples/router/ts/app/app.component.2.ts b/public/docs/_examples/router/ts/app/app.component.2.ts index ec0cb936b3..f50d0435a8 100644 --- a/public/docs/_examples/router/ts/app/app.component.2.ts +++ b/public/docs/_examples/router/ts/app/app.component.2.ts @@ -2,25 +2,25 @@ // #docplaster // #docregion -import {Component} from '@angular/core'; -import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; +import { Component, OnInit } from '@angular/core'; +import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router'; -import {CrisisListComponent} from './crisis-list.component'; +import { CrisisListComponent } from './crisis-list.component'; // #enddocregion /* -// Apparent Milestone 2 imports -// #docregion -// #docregion hero-import -import {HeroListComponent} from './heroes/hero-list.component'; -import {HeroDetailComponent} from './heroes/hero-detail.component'; -import {HeroService} from './heroes/hero.service'; -// #enddocregion hero-import -// #enddocregion -*/ + // Apparent Milestone 2 imports + // #docregion + // #docregion hero-import + import { HeroListComponent } from './heroes/hero-list.component'; + import { HeroDetailComponent } from './heroes/hero-detail.component'; + import { HeroService } from './heroes/hero.service'; + // #enddocregion hero-import + // #enddocregion + */ // Actual Milestone 2 imports -import {HeroListComponent} from './heroes/hero-list.component.1'; -import {HeroDetailComponent} from './heroes/hero-detail.component.1'; -import {HeroService} from './heroes/hero.service'; +import { HeroListComponent } from './heroes/hero-list.component.1'; +import { HeroDetailComponent } from './heroes/hero-detail.component.1'; +import { HeroService } from './heroes/hero.service'; // #docregion @Component({ @@ -28,8 +28,8 @@ import {HeroService} from './heroes/hero.service'; template: `

Component Router

`, @@ -38,21 +38,27 @@ import {HeroService} from './heroes/hero.service'; }) // #enddocregion /* -// #docregion route-config -@Component({ ... }) -// #enddocregion route-config -*/ + // #docregion route-config + @Component({ ... }) + // #enddocregion route-config + */ // #docregion // #docregion route-config -@RouteConfig([ +@Routes([ // #docregion route-defs - {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent}, - {path: '/heroes', name: 'Heroes', component: HeroListComponent}, + {path: '/crisis-center', component: CrisisListComponent}, + {path: '/heroes', component: HeroListComponent}, // #docregion hero-detail-route - {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent} + {path: '/hero/:id', component: HeroDetailComponent} // #enddocregion hero-detail-route // #enddocregion route-defs ]) -export class AppComponent { } +export class AppComponent implements OnInit { + constructor(private router: Router) {} + + ngOnInit() { + this.router.navigate(['/crisis-center']); + } +} // #enddocregion route-config // #enddocregion diff --git a/public/docs/_examples/router/ts/app/app.component.3.ts b/public/docs/_examples/router/ts/app/app.component.3.ts index d0bd0b4f84..928b374475 100644 --- a/public/docs/_examples/router/ts/app/app.component.3.ts +++ b/public/docs/_examples/router/ts/app/app.component.3.ts @@ -1,45 +1,48 @@ +/* tslint:disable:no-unused-variable */ // #docplaster -import {Component} from '@angular/core'; -import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; +import { Component, OnInit } from '@angular/core'; +import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router'; -import {CrisisCenterComponent} from './crisis-center/crisis-center.component.1'; +import { CrisisCenterComponent } from './crisis-center/crisis-center.component.1'; +import { HeroListComponent } from './heroes/hero-list.component.1'; +import { HeroDetailComponent } from './heroes/hero-detail.component.1'; -import {DialogService} from './dialog.service'; -import {HeroService} from './heroes/hero.service'; +import { DialogService } from './dialog.service'; +import { HeroService } from './heroes/hero.service'; @Component({ selector: 'my-app', // #enddocregion /* Typical link - // #docregion h-anchor - Heroes - // #enddocregion h-anchor - */ + // #docregion h-anchor + Heroes + // #enddocregion h-anchor + */ /* Incomplete Crisis Center link when CC lacks a default - // #docregion cc-anchor-fail - // The link now fails with a "non-terminal link" error - // #docregion cc-anchor-w-default - Crisis Center - // #enddocregion cc-anchor-w-default - // #enddocregion cc-anchor-fail - */ + // #docregion cc-anchor-fail + // The link now fails with a "non-terminal link" error + // #docregion cc-anchor-w-default + Crisis Center + // #enddocregion cc-anchor-w-default + // #enddocregion cc-anchor-fail + */ /* Crisis Center link when CC lacks a default - // #docregion cc-anchor-no-default - Crisis Center - // #enddocregion cc-anchor-no-default - */ + // #docregion cc-anchor-no-default + Crisis Center + // #enddocregion cc-anchor-no-default + */ /* Crisis Center Detail link - // #docregion Dragon-anchor - Dragon Crisis - // #enddocregion Dragon-anchor - */ + // #docregion Dragon-anchor + Dragon Crisis + // #enddocregion Dragon-anchor + */ // #docregion template template: `

Component Router

`, @@ -47,7 +50,14 @@ import {HeroService} from './heroes/hero.service'; providers: [DialogService, HeroService], directives: [ROUTER_DIRECTIVES] }) -@RouteConfig([ - {path: '/crisis-center/...', name: 'CrisisCenter', component: CrisisCenterComponent}, +@Routes([ + {path: '/crisis-center', component: CrisisCenterComponent}, + {path: '*', component: CrisisCenterComponent} ]) -export class AppComponent { } +export class AppComponent implements OnInit { + constructor(private router: Router) {} + + ngOnInit() { + this.router.navigate(['/crisis-center']); + } +} diff --git a/public/docs/_examples/router/ts/app/app.component.ts b/public/docs/_examples/router/ts/app/app.component.ts index 4d8528c463..aeee375e61 100644 --- a/public/docs/_examples/router/ts/app/app.component.ts +++ b/public/docs/_examples/router/ts/app/app.component.ts @@ -1,14 +1,14 @@ // #docplaster // #docregion -import {Component} from '@angular/core'; -import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; +import { Component, OnInit } from '@angular/core'; +import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router'; -import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; -import {HeroListComponent} from './heroes/hero-list.component'; -import {HeroDetailComponent} from './heroes/hero-detail.component'; +import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; +import { HeroListComponent } from './heroes/hero-list.component'; +import { HeroDetailComponent } from './heroes/hero-detail.component'; -import {DialogService} from './dialog.service'; -import {HeroService} from './heroes/hero.service'; +import { DialogService } from './dialog.service'; +import { HeroService } from './heroes/hero.service'; @Component({ selector: 'my-app', @@ -16,8 +16,8 @@ import {HeroService} from './heroes/hero.service'; template: `

Component Router

`, @@ -25,20 +25,17 @@ import {HeroService} from './heroes/hero.service'; providers: [DialogService, HeroService], directives: [ROUTER_DIRECTIVES] }) -// #docregion route-config -@RouteConfig([ - - // #docregion route-config-cc - { // Crisis Center child route - path: '/crisis-center/...', - name: 'CrisisCenter', - component: CrisisCenterComponent, - useAsDefault: true - }, - // #enddocregion route-config-cc - - {path: '/heroes', name: 'Heroes', component: HeroListComponent}, - {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}, +// #docregion routes +@Routes([ + {path: '/crisis-center', component: CrisisCenterComponent}, + {path: '/heroes', component: HeroListComponent}, + {path: '/hero/:id', component: HeroDetailComponent}, ]) -// #enddocregion route-config -export class AppComponent { } +// #enddocregion routes +export class AppComponent implements OnInit { + constructor(private router: Router) {} + + ngOnInit() { + this.router.navigate(['/crisis-center']); + } +} diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts index 027d8df037..05f429401a 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts @@ -1,9 +1,9 @@ -import {Component} from '@angular/core'; -import {RouteConfig, RouterOutlet} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { Routes, ROUTER_DIRECTIVES } from '@angular/router'; -import {CrisisListComponent} from './crisis-list.component.1'; -import {CrisisDetailComponent} from './crisis-detail.component.1'; -import {CrisisService} from './crisis.service'; +import { CrisisListComponent } from './crisis-list.component.1'; +import { CrisisDetailComponent } from './crisis-detail.component.1'; +import { CrisisService } from './crisis.service'; // #docregion minus-imports @Component({ @@ -11,17 +11,17 @@ import {CrisisService} from './crisis.service';

CRISIS CENTER

`, - directives: [RouterOutlet], + directives: [ROUTER_DIRECTIVES], // #docregion providers providers: [CrisisService] // #enddocregion providers }) // #docregion route-config -@RouteConfig([ +@Routes([ // #docregion default-route - {path:'/', name: 'CrisisList', component: CrisisListComponent, useAsDefault: true}, + {path: '/', component: CrisisListComponent}, // , useAsDefault: true}, // coming soon // #enddocregion default-route - {path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent} + {path: '/:id', component: CrisisDetailComponent} ]) // #enddocregion route-config export class CrisisCenterComponent { } diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts index 77060d936b..427ef1ed79 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts @@ -1,22 +1,22 @@ // #docregion -import {Component} from '@angular/core'; -import {RouteConfig, RouterOutlet} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { Routes, ROUTER_DIRECTIVES } from '@angular/router'; -import {CrisisListComponent} from './crisis-list.component'; -import {CrisisDetailComponent} from './crisis-detail.component'; -import {CrisisService} from './crisis.service'; +import { CrisisListComponent } from './crisis-list.component'; +import { CrisisDetailComponent } from './crisis-detail.component'; +import { CrisisService } from './crisis.service'; @Component({ template: `

CRISIS CENTER

`, - directives: [RouterOutlet], + directives: [ROUTER_DIRECTIVES], providers: [CrisisService] }) -@RouteConfig([ - {path:'/', name: 'CrisisList', component: CrisisListComponent, useAsDefault: true}, - {path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent} +@Routes([ + {path: '', component: CrisisListComponent}, // , useAsDefault: true}, // coming soon + {path: '/:id', component: CrisisDetailComponent} ]) export class CrisisCenterComponent { } // #enddocregion diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts index f92180e462..ca77bed356 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts @@ -1,15 +1,13 @@ // #docplaster - // #docregion -import {Component, OnInit} from '@angular/core'; -import {Crisis, CrisisService} from './crisis.service'; -import {RouteParams, Router} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { Crisis, CrisisService } from './crisis.service'; +import { Router, OnActivate, RouteSegment } from '@angular/router'; // #docregion routerCanDeactivate -import {CanDeactivate, ComponentInstruction} from '@angular/router-deprecated'; -import {DialogService} from '../dialog.service'; +// import { CanDeactivate } from '@angular/router'; +import { DialogService } from '../dialog.service'; // #enddocregion routerCanDeactivate - @Component({ // #docregion template template: ` @@ -31,23 +29,22 @@ import {DialogService} from '../dialog.service'; styles: ['input {width: 20em}'] }) // #docregion routerCanDeactivate, cancel-save -export class CrisisDetailComponent implements OnInit, CanDeactivate { +export class CrisisDetailComponent implements OnActivate {// , CanDeactivate { crisis: Crisis; editName: string; // #enddocregion routerCanDeactivate, cancel-save constructor( - private _service: CrisisService, - private _router: Router, - private _routeParams: RouteParams, - private _dialog: DialogService + private service: CrisisService, + private router: Router, + private dialog: DialogService ) { } - // #docregion ngOnInit - ngOnInit() { - let id = +this._routeParams.get('id'); - this._service.getCrisis(id).then(crisis => { + // #docregion ngOnActivate + routerOnActivate(curr: RouteSegment): void { + let id = +curr.getParam('id'); + this.service.getCrisis(id).then(crisis => { if (crisis) { this.editName = crisis.name; this.crisis = crisis; @@ -56,17 +53,18 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate { } }); } - // #enddocregion ngOnInit + // #enddocregion ngOnActivate // #docregion routerCanDeactivate - routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any { + // NOT IMPLEMENTED YET + routerCanDeactivate(): any { // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged. if (!this.crisis || this.crisis.name === this.editName) { return true; } // Otherwise ask the user with the dialog service and return its // promise which resolves to true or false when the user decides - return this._dialog.confirm('Discard changes?'); + return this.dialog.confirm('Discard changes?'); } // #enddocregion routerCanDeactivate @@ -84,8 +82,8 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate { // #docregion gotoCrises gotoCrises() { - // Like Crisis CenterCrisis Center { + routerOnActivate(curr: RouteSegment) { + this.curSegment = curr; + + let id = +curr.getParam('id'); + this.service.getCrisis(id).then(crisis => { if (crisis) { this.editName = crisis.name; this.crisis = crisis; @@ -50,18 +49,17 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate { }); } - routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any { + routerCanDeactivate(): any { // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged. if (!this.crisis || this.crisis.name === this.editName) { return true; } // Otherwise ask the user with the dialog service and return its // promise which resolves to true or false when the user decides - return this._dialog.confirm('Discard changes?'); + return this.dialog.confirm('Discard changes?'); } cancel() { - this.editName = this.crisis.name; this.gotoCrises(); } @@ -77,7 +75,11 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate { // so that the CrisisListComponent can select that hero. // Add a totally useless `foo` parameter for kicks. // #docregion gotoCrises-navigate - this._router.navigate(['CrisisList', {id: crisisId, foo: 'foo'} ]); + // Absolute link + this.router.navigate(['/crisis-center', {id: crisisId, foo: 'foo'}]); + + // Relative link + // this.router.navigate(['../', {id: crisisId, foo: 'foo'}], this.curSegment); // #enddocregion gotoCrises-navigate } // #enddocregion gotoCrises diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts index f2fa9c770c..429cb432a7 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts @@ -1,9 +1,8 @@ // #docplaster - // #docregion -import {Component, OnInit} from '@angular/core'; -import {Crisis, CrisisService} from './crisis.service'; -import {Router} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { Crisis, CrisisService } from './crisis.service'; +import { Router, OnActivate, RouteSegment } from '@angular/router'; @Component({ // #docregion template @@ -17,20 +16,20 @@ import {Router} from '@angular/router-deprecated'; `, // #enddocregion template }) -export class CrisisListComponent implements OnInit { +export class CrisisListComponent implements OnActivate { crises: Crisis[]; constructor( - private _service: CrisisService, - private _router: Router) {} + private service: CrisisService, + private router: Router) {} - ngOnInit() { - this._service.getCrises().then(crises => this.crises = crises); + routerOnActivate(curr: RouteSegment): void { + this.service.getCrises().then(crises => this.crises = crises); } // #docregion select onSelect(crisis: Crisis) { - this._router.navigate(['CrisisDetail', { id: crisis.id }] ); + this.router.navigateByUrl( `/crisis-list/${crisis.id}`); } // #enddocregion select } diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts index 3a6128302f..5a34dcf263 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts @@ -1,9 +1,8 @@ // #docplaster - // #docregion -import {Component, OnInit} from '@angular/core'; -import {Crisis, CrisisService} from './crisis.service'; -import {Router, RouteParams} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { Crisis, CrisisService } from './crisis.service'; +import { Router, OnActivate, RouteSegment, RouteTree } from '@angular/router'; @Component({ template: ` @@ -16,25 +15,28 @@ import {Router, RouteParams} from '@angular/router-deprecated'; `, }) -export class CrisisListComponent implements OnInit { +export class CrisisListComponent implements OnActivate { crises: Crisis[]; - - private _selectedId: number; + private currSegment: RouteSegment; + private selectedId: number; constructor( - private _service: CrisisService, - private _router: Router, - routeParams: RouteParams) { - this._selectedId = +routeParams.get('id'); - } + private service: CrisisService, + private router: Router) { } - isSelected(crisis: Crisis) { return crisis.id === this._selectedId; } + isSelected(crisis: Crisis) { return crisis.id === this.selectedId; } - ngOnInit() { - this._service.getCrises().then(crises => this.crises = crises); + routerOnActivate(curr: RouteSegment, prev: RouteSegment, currTree: RouteTree) { + this.currSegment = curr; + this.selectedId = +currTree.parent(curr).getParam('id'); + this.service.getCrises().then(crises => this.crises = crises); } onSelect(crisis: Crisis) { - this._router.navigate( ['CrisisDetail', { id: crisis.id }] ); + // Absolute link + // this.router.navigate([`/crisis-center`, crisis.id]); + + // Relative link + this.router.navigate([`./${crisis.id}`], this.currSegment); } } diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts index c71827a656..46158da480 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts @@ -1,14 +1,26 @@ // #docplaster -// #docregion -import {Injectable} from '@angular/core'; - export class Crisis { constructor(public id: number, public name: string) { } } +const CRISES = [ + new Crisis(1, 'Dragon Burning Cities'), + new Crisis(2, 'Sky Rains Great White Sharks'), + new Crisis(3, 'Giant Asteroid Heading For Earth'), + new Crisis(4, 'Procrastinators Meeting Delayed Again'), +]; + +let crisesPromise = Promise.resolve(CRISES); + +// #docregion +import { Injectable } from '@angular/core'; + @Injectable() export class CrisisService { + + static nextCrisisId = 100; + getCrises() { return crisesPromise; } getCrisis(id: number | string) { @@ -18,24 +30,13 @@ export class CrisisService { // #enddocregion - static nextCrisisId = 100; - - addCrisis(name:string) { + addCrisis(name: string) { name = name.trim(); - if (name){ + if (name) { let crisis = new Crisis(CrisisService.nextCrisisId++, name); crisesPromise.then(crises => crises.push(crisis)); } } // #docregion } - -var crises = [ - new Crisis(1, 'Dragon Burning Cities'), - new Crisis(2, 'Sky Rains Great White Sharks'), - new Crisis(3, 'Giant Asteroid Heading For Earth'), - new Crisis(4, 'Procrastinators Meeting Delayed Again'), -]; - -var crisesPromise = Promise.resolve(crises); // #enddocregion diff --git a/public/docs/_examples/router/ts/app/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-list.component.ts index 9a22de266a..6caa3653b5 100644 --- a/public/docs/_examples/router/ts/app/crisis-list.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-list.component.ts @@ -1,6 +1,6 @@ // Initial empty version // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ template: ` diff --git a/public/docs/_examples/router/ts/app/dialog.service.ts b/public/docs/_examples/router/ts/app/dialog.service.ts index c795945d2b..b6e234b6ea 100644 --- a/public/docs/_examples/router/ts/app/dialog.service.ts +++ b/public/docs/_examples/router/ts/app/dialog.service.ts @@ -1,5 +1,5 @@ // #docregion -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; /** * Async modal dialog service * DialogService makes this app easier to test by faking this service. @@ -11,7 +11,7 @@ export class DialogService { * Ask user to confirm an action. `message` explains the action and choices. * Returns promise resolving to `true`=confirm or `false`=cancel */ - confirm(message?:string) { + confirm(message?: string) { return new Promise((resolve, reject) => resolve(window.confirm(message || 'Is it OK?'))); }; diff --git a/public/docs/_examples/router/ts/app/hero-list.component.ts b/public/docs/_examples/router/ts/app/hero-list.component.ts index 48c108dde1..5dbbe17d8e 100644 --- a/public/docs/_examples/router/ts/app/hero-list.component.ts +++ b/public/docs/_examples/router/ts/app/hero-list.component.ts @@ -1,6 +1,6 @@ /// Initial empty version // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ template: ` diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts index 7002b9a1dd..bb503b748d 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts @@ -1,7 +1,7 @@ // #docregion -import {Component, OnInit} from '@angular/core'; -import {Hero, HeroService} from './hero.service'; -import {RouteParams, Router} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { Hero, HeroService } from './hero.service'; +import { Router, OnActivate, RouteSegment } from '@angular/router'; @Component({ template: ` @@ -20,27 +20,26 @@ import {RouteParams, Router} from '@angular/router-deprecated'; `, }) -export class HeroDetailComponent implements OnInit { +export class HeroDetailComponent implements OnActivate { hero: Hero; // #docregion ctor constructor( - private _router:Router, - private _routeParams:RouteParams, - private _service:HeroService){} + private router: Router, + private service: HeroService) {} // #enddocregion ctor - // #docregion ngOnInit - ngOnInit() { - let id = this._routeParams.get('id'); - this._service.getHero(id).then(hero => this.hero = hero); + // #docregion OnActivate + routerOnActivate(curr: RouteSegment): void { + let id = +curr.getParam('id'); + this.service.getHero(id).then(hero => this.hero = hero); } - // #enddocregion ngOnInit + // #enddocregion OnActivate // #docregion gotoHeroes gotoHeroes() { - // Like Heroes - this._router.navigate(['Heroes']); + // Like Heroes + this.router.navigate(['/heroes']); } // #enddocregion gotoHeroes } diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts index edbf163b37..e1befcc981 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts @@ -1,7 +1,7 @@ // #docregion -import {Component, OnInit} from '@angular/core'; -import {Hero, HeroService} from './hero.service'; -import {RouteParams, Router} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { Hero, HeroService } from './hero.service'; +import { Router, OnActivate, RouteSegment } from '@angular/router'; @Component({ template: ` @@ -20,32 +20,30 @@ import {RouteParams, Router} from '@angular/router-deprecated'; `, }) -export class HeroDetailComponent implements OnInit { +export class HeroDetailComponent implements OnActivate { hero: Hero; // #docregion ctor constructor( - private _router:Router, - private _routeParams:RouteParams, - private _service:HeroService){} + private router: Router, + private service: HeroService) {} // #enddocregion ctor - // #docregion ngOnInit - ngOnInit() { - let id = this._routeParams.get('id'); - this._service.getHero(id).then(hero => this.hero = hero); - } - // #enddocregion ngOnInit - // #docregion gotoHeroes + // #docregion OnActivate + routerOnActivate(curr: RouteSegment): void { + let id = +curr.getParam('id'); + this.service.getHero(id).then(hero => this.hero = hero); + } + // #enddocregion OnActivate + gotoHeroes() { let heroId = this.hero ? this.hero.id : null; // Pass along the hero id if available // so that the HeroList component can select that hero. // Add a totally useless `foo` parameter for kicks. // #docregion gotoHeroes-navigate - this._router.navigate(['Heroes', {id: heroId, foo: 'foo'} ]); + this.router.navigate([`/heroes`, {id: heroId, foo: 'foo'}]); // #enddocregion gotoHeroes-navigate } - // #enddocregion gotoHeroes } diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts index 18f6c6e36a..47015ba5e1 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts @@ -1,5 +1,4 @@ // #docplaster - // #docregion // TODO SOMEDAY: Feature Componetized like HeroCenter import {Component, OnInit} from '@angular/core'; @@ -24,18 +23,18 @@ export class HeroListComponent implements OnInit { // #docregion ctor constructor( - private _router: Router, - private _service: HeroService) { } + private router: Router, + private service: HeroService) { } // #enddocregion ctor ngOnInit() { - this._service.getHeroes().then(heroes => this.heroes = heroes) + this.service.getHeroes().then(heroes => this.heroes = heroes) } // #docregion select onSelect(hero: Hero) { // #docregion nav-to-detail - this._router.navigate( ['HeroDetail', { id: hero.id }] ); + this.router.navigate(['/hero', hero.id]); // #enddocregion nav-to-detail } // #enddocregion select @@ -43,7 +42,7 @@ export class HeroListComponent implements OnInit { // #enddocregion /* A link parameters array -// #docregion link-parameters-array -['HeroDetail', { id: hero.id }] // {id: 15} -// #enddocregion link-parameters-array -*/ \ No newline at end of file + // #docregion link-parameters-array + ['HeroDetail', { id: hero.id }] // {id: 15} + // #enddocregion link-parameters-array + */ diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts index 3a5127d11f..ef9466dbeb 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts @@ -1,11 +1,10 @@ // #docplaster - -// TODO SOMEDAY: Feature Componetized like CrisisCenter // #docregion -import {Component, OnInit} from '@angular/core'; -import {Hero, HeroService} from './hero.service'; +// TODO SOMEDAY: Feature Componetized like CrisisCenter +import { Component } from '@angular/core'; +import { Hero, HeroService} from './hero.service'; // #docregion import-route-params -import {Router, RouteParams} from '@angular/router-deprecated'; +import { Router, RouteSegment, Tree, OnActivate, RouteTree } from '@angular/router'; // #enddocregion import-route-params @Component({ @@ -22,32 +21,31 @@ import {Router, RouteParams} from '@angular/router-deprecated'; ` // #enddocregion template }) -export class HeroListComponent implements OnInit { +export class HeroListComponent implements OnActivate { heroes: Hero[]; // #docregion ctor - private _selectedId: number; + private selectedId: number; constructor( - private _service: HeroService, - private _router: Router, - routeParams: RouteParams) { - this._selectedId = +routeParams.get('id'); - } + private service: HeroService, + private router: Router) { } // #enddocregion ctor + routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: RouteTree, prevTree?: RouteTree): void { + this.selectedId = +curr.getParam('id'); + this.service.getHeroes().then(heroes => this.heroes = heroes); + } + // #docregion isSelected - isSelected(hero: Hero) { return hero.id === this._selectedId; } + isSelected(hero: Hero) { return hero.id === this.selectedId; } // #enddocregion isSelected // #docregion select onSelect(hero: Hero) { - this._router.navigate( ['HeroDetail', { id: hero.id }] ); + this.router.navigate(['/hero', hero.id]); } // #enddocregion select - ngOnInit() { - this._service.getHeroes().then(heroes => this.heroes = heroes) - } } // #enddocregion diff --git a/public/docs/_examples/router/ts/app/heroes/hero.service.ts b/public/docs/_examples/router/ts/app/heroes/hero.service.ts index 0b6066ee03..7ead04d9a4 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero.service.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero.service.ts @@ -5,6 +5,17 @@ export class Hero { constructor(public id: number, public name: string) { } } +let HEROES = [ + new Hero(11, 'Mr. Nice'), + new Hero(12, 'Narco'), + new Hero(13, 'Bombasto'), + new Hero(14, 'Celeritas'), + new Hero(15, 'Magneta'), + new Hero(16, 'RubberMan') +]; + +let heroesPromise = Promise.resolve(HEROES); + @Injectable() export class HeroService { getHeroes() { return heroesPromise; } @@ -14,14 +25,3 @@ export class HeroService { .then(heroes => heroes.filter(h => h.id === +id)[0]); } } - -var HEROES = [ - new Hero(11, 'Mr. Nice'), - new Hero(12, 'Narco'), - new Hero(13, 'Bombasto'), - new Hero(14, 'Celeritas'), - new Hero(15, 'Magneta'), - new Hero(16, 'RubberMan') -]; - -var heroesPromise = Promise.resolve(HEROES); diff --git a/public/docs/_examples/router/ts/app/main.1.ts b/public/docs/_examples/router/ts/app/main.1.ts index d9a288e6c0..92ff416326 100644 --- a/public/docs/_examples/router/ts/app/main.1.ts +++ b/public/docs/_examples/router/ts/app/main.1.ts @@ -2,10 +2,10 @@ // #docplaster // #docregion all -import {AppComponent} from './app.component'; -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { ROUTER_PROVIDERS } from '@angular/router'; +import { AppComponent } from './app.component'; // #enddocregion all /* Can't use AppComponent ... but display as if we can @@ -15,9 +15,9 @@ bootstrap(AppComponent, [ */ // Actually use the v.1 component -import {AppComponent as ac} from './app.component.1'; +import { AppComponent as ac } from './app.component.1'; bootstrap(ac, [ // #docregion all ROUTER_PROVIDERS ]); -// #enddocregion all \ No newline at end of file +// #enddocregion all diff --git a/public/docs/_examples/router/ts/app/main.2.ts b/public/docs/_examples/router/ts/app/main.2.ts index d984713151..a26f927fef 100644 --- a/public/docs/_examples/router/ts/app/main.2.ts +++ b/public/docs/_examples/router/ts/app/main.2.ts @@ -4,14 +4,15 @@ // #docplaster // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { ROUTER_PROVIDERS } from '@angular/router'; + +import { AppComponent } from './app.component'; // Add these symbols to override the `LocationStrategy` -import {provide} from '@angular/core'; -import {LocationStrategy, - HashLocationStrategy} from '@angular/common'; +import { provide } from '@angular/core'; +import { LocationStrategy, + HashLocationStrategy } from '@angular/common'; // #enddocregion /* Can't use AppComponent ... but display as if we can // #docregion diff --git a/public/docs/_examples/router/ts/app/main.3.ts b/public/docs/_examples/router/ts/app/main.3.ts index 2c84a01d02..9ee2055ee6 100644 --- a/public/docs/_examples/router/ts/app/main.3.ts +++ b/public/docs/_examples/router/ts/app/main.3.ts @@ -1,7 +1,7 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { ROUTER_PROVIDERS } from '@angular/router'; -import {AppComponent} from './app.component.3'; +import { AppComponent } from './app.component.3'; bootstrap(AppComponent, [ROUTER_PROVIDERS]); diff --git a/public/docs/_examples/router/ts/app/main.ts b/public/docs/_examples/router/ts/app/main.ts index eb0b424738..34079f84f0 100644 --- a/public/docs/_examples/router/ts/app/main.ts +++ b/public/docs/_examples/router/ts/app/main.ts @@ -1,7 +1,7 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { ROUTER_PROVIDERS } from '@angular/router'; -import {AppComponent} from './app.component'; +import { AppComponent } from './app.component'; bootstrap(AppComponent, [ROUTER_PROVIDERS]); diff --git a/public/docs/_examples/router/ts/index.2.html b/public/docs/_examples/router/ts/index.2.html index ea4c410a09..d5676ff4b5 100644 --- a/public/docs/_examples/router/ts/index.2.html +++ b/public/docs/_examples/router/ts/index.2.html @@ -2,9 +2,7 @@ - - Router Sample v.2 @@ -29,5 +27,10 @@ loading... + +

Milestone 2

+ loading... + + diff --git a/public/docs/_examples/router/ts/index.3.html b/public/docs/_examples/router/ts/index.3.html index 718343fd62..1be32f1d0d 100644 --- a/public/docs/_examples/router/ts/index.3.html +++ b/public/docs/_examples/router/ts/index.3.html @@ -2,10 +2,8 @@ - - - Router Sample v.4 + Router Sample v.3 diff --git a/public/docs/_examples/router/ts/index.html b/public/docs/_examples/router/ts/index.html index d65a547332..63e60b7c11 100644 --- a/public/docs/_examples/router/ts/index.html +++ b/public/docs/_examples/router/ts/index.html @@ -1,12 +1,10 @@ + - - - Router Sample diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/systemjs.config.js index bd66896d18..e5171eb56d 100644 --- a/public/docs/_examples/systemjs.config.js +++ b/public/docs/_examples/systemjs.config.js @@ -27,8 +27,8 @@ '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', + '@angular/router', '@angular/router-deprecated', - '@angular/testing', '@angular/upgrade', ]; diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js index 157e142e18..e6fc42f22a 100644 --- a/public/docs/_examples/systemjs.config.plunker.js +++ b/public/docs/_examples/systemjs.config.plunker.js @@ -29,8 +29,8 @@ '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', + '@angular/router', '@angular/router-deprecated', - '@angular/testing', '@angular/upgrade', ]; diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json index 68921b910a..9749d3d2f7 100644 --- a/public/docs/dart/latest/guide/_data.json +++ b/public/docs/dart/latest/guide/_data.json @@ -100,9 +100,15 @@ "intro": "Pipes transform displayed values within a template." }, + "router-deprecated": { + "title": "Beta Router (Deprecated)", + "intro": "The deprecated Beta Router." + }, + "router": { "title": "Routing & Navigation", - "intro": "Discover the basics of screen navigation with the Angular 2 router." + "intro": "Discover the basics of screen navigation with the Angular 2 router.", + "hide": true }, "structural-directives": { diff --git a/public/docs/dart/latest/guide/router-deprecated.jade b/public/docs/dart/latest/guide/router-deprecated.jade new file mode 100644 index 0000000000..f8df2a84a6 --- /dev/null +++ b/public/docs/dart/latest/guide/router-deprecated.jade @@ -0,0 +1 @@ +!= partial("../../../_includes/_ts-temp") \ No newline at end of file diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index f4f44835c0..5f168cc658 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -99,9 +99,15 @@ "intro": "Pipes transform displayed values within a template." }, + "router-deprecated": { + "title": "Beta Router (Deprecated)", + "intro": "The deprecated Beta Router." + }, + "router": { "title": "Routing & Navigation", - "intro": "Discover the basics of screen navigation with the Angular 2 router." + "intro": "Discover the basics of screen navigation with the Angular 2 router.", + "hide": true }, "structural-directives": { diff --git a/public/docs/js/latest/guide/router-deprecated.jade b/public/docs/js/latest/guide/router-deprecated.jade new file mode 100644 index 0000000000..f8df2a84a6 --- /dev/null +++ b/public/docs/js/latest/guide/router-deprecated.jade @@ -0,0 +1 @@ +!= partial("../../../_includes/_ts-temp") \ No newline at end of file diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index d5a21617e9..9a377e3c6f 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -99,9 +99,16 @@ "intro": "Pipes transform displayed values within a template." }, + + "router-deprecated": { + "title": "Beta Router (Deprecated)", + "intro": "The deprecated Beta Router." + }, + "router": { "title": "Routing & Navigation", - "intro": "Discover the basics of screen navigation with the Angular 2 router." + "intro": "Discover the basics of screen navigation with the Angular 2 Component Router.", + "hide": true }, "structural-directives": { diff --git a/public/docs/ts/latest/guide/router-aux.jade b/public/docs/ts/latest/guide/router-aux.jade deleted file mode 100644 index e44662b202..0000000000 --- a/public/docs/ts/latest/guide/router-aux.jade +++ /dev/null @@ -1,185 +0,0 @@ -// - TODO: REVIVE AUX ROUTE MATERIAL WHEN THAT FEATURE WORKS AS EXPECTED - - PLEASE DO NOT CREATE ISSUES OR PULL REQUESTS FOR THIS PAGE - - - .l-main-section - :marked - ## Milestone #4: Auxiliary Routes - Auxiliary routes are routes that can be activated independently of the current - route. They are entirely optional, depending on your app needs. - - For example, your application may have a modal that appears and this could - be an auxiliary route. The modal may have its own navigation needs, such as a slideshow - and that auxiliary route is able to manage the navigation stack independently of the - primary routes. - - In our sample application, we also want to have a chat feature that allows people - the ability to have a live agent assist them. The chat window will have first an - initial route that contains a prompt to ask the visitor if they'd like to chat with - an agent. Once they initiate a chat, they go to a new route for the chat experience. - - .alert.is-critical Make diagram of chat routes - - :marked - In this auxiliary chat experience, it overlays the current screen and persists. - If you navigate from the Heroes to Crisis Center, the chat auxiliary route remains - active and in view. - - Therefore the auxiliary routing is truly independent of the other - routing. In most respects, an auxiliary route behaves the same outside of it is rendered - in its own outlet and modifies the url differently. - - We'll look at how to setup an auxiliary route and considerations for when to use them. - - ### Auxiliary Route Outlet - In order to get an auxiliary route, it needs a place to be rendered. So far the app has - a single `RouterOutet` that the rest of our routes are rendered into. Auxiliary routes need to - have their own `RouterOutlet`, and that is done by giving it a name attribute. Open the - `app.component.ts` file and let's add the new outlet to the template. - .alert.is-critical Should remove app.component.4.ts based example (next) when we know what's what - +_makeExample('router/ts/app/app.component.4.ts', 'chat-outlet', 'app/app.component.ts') - .alert.is-critical Should be able to project from app.component.ts like this - +_makeExample('router/ts/app/app.component.ts', 'template', 'app/app.component.ts (excerpt)') - :marked - The name of the outlet must be unique to the component. You could reuse the name across - different components, so you don't have to worry about collisions. - - Here we give it a name of "chat", which will be used by the router when we setup our - route configs. The app component needs to know about this Auxiliary route, so we - import the `ChatComponent`, add a new ROUTE_NAME (`chat`), - and add a new 'Chat' route to the `ROUTES` in `app.routes.ts` (just below the redirect) . - +_makeExample('router/ts/app/routes.ts', null, 'app/routes.ts') - :marked - Look again at the 'Chat' route - +_makeExample('router/ts/app/routes.ts','chat-route') - :marked - You can see the route definition is nearly the same, except instead of `path` there is - an `aux`. The `aux` property makes this an Auxiliary route. - - @TODO Explain how a named outlet is paired with an aux route. - - The chat component defines its own routes just like the other components, even though - it is an Auxiliary route. - - +_makeExample('router/ts/app/chat/routes.ts', null, 'app/chat/routes.ts') - :marked - Even though this is an Auxiliary route, you notice there is no difference in how we've - configured the route config for the primary chat component. The chat component also has - the `RouterOutlet` Directive in the template so the child components render inside of - the chat window. - - In the chat components, we can use `RouterLink` to reference routes just the same as - a normal route. Since this is inside of an Auxiliary route, these relative links will - resolve within the chat component and not change the primary route (the Crisis Center or - Heroes pages). - - +_makeExample('router/ts/app/chat/chat-init.component.ts', 'chat-links') - - :marked - When the chat component opens, it first initializes this template to ask the user if - they'd like to chat or not. If they agree, it takes them to the chat window where they - begin to send messages to the 'live' agent. - - The behavior of the chat components may be interesting, but have no additional insights - for routing, except for the ability to deactivate an active Auxiliary route. - - ### Exiting an Auxiliary Route - - @TODO Figure out how to close/deactivate an aux route - - ### Auxiliary Route URLs - - Auxiliary Routes do modify the url using parens, like so. - code-example(format=".", language="bash"). - localhost:3002/crisis-center(chat)/2(details) - :marked - This would be the url on a page where the user was viewing an item in the Crisis Center, - in this case the "Dragon Burning Cities" crisis, and the `(chat)` Auxiliary Route would - active and on the details child route. - - ### Multiple Auxiliary Routes - - There is no limit to how many Auxiliary Routes you have defined or active. There is probably - a practical limit where too much appears on the screen for a user, but you can have as many - Auxiliary Routes as you have named `RouteOutlet`s. - - :marked - ### Auxiliary Route Summary - - * Auxiliary routes are normal routes that are rendered outside of the primary `RouterOutlet` - * They must use a named `RouterOutlet` to render. - * Can be activated as long as the parent component is active. - * Links inside of child components are resolved against the aux parent component. - * Auxiliary routes are deactivated by @TODO? - * Routes are indicated in the url using parens. - * Multiple aux routes can be active at once. - - ### Chat - The "Chat" feature area within the `chat` folder looks like this: - ``` - app/ - chat/ - ├── chat-detail.component.ts - ├── chat-init.component.ts - ├── chat.component.ts - ├── chat.service.ts - └── routes.ts - ``` - +_makeTabs( - `router/ts/app/chat/chat.component.ts, - router/ts/app/chat/routes.ts, - router/ts/app/chat/chat-init.component.ts, - router/ts/app/chat/chat-detail.component.ts, - router/ts/app/chat/chat.service.ts - `, - null, - `chat.component.ts, - chat/routes.ts, - chat-init.component.ts, - chat-detail.component.ts, - chat.service.ts, - `) - - - The following are styles extracted from `styles.css` - that only belong if/when we add chat back - ``` - /* chat styles */ - .chat { - position: fixed; - bottom: 0; - right: 20px; - border: 1px solid #1171a3; - width: 400px; - height: 300px; - } - .chat h2 { - background: #1171a3; - color: #fff; - margin: 0; - padding: 8px; - } - .chat .close { - float: right; - display: block; - padding: 0 10px; - cursor: pointer; - } - .chat .chat-content { - padding: 10px; - } - .chat .chat-messages { - height: 190px; - overflow-y: scroll; - } - .chat .chat-input { - border-top: 1px solid #ccc; - padding-top: 10px; - } - .chat .chat-input input { - width: 370px; - padding: 3px; - } - ``` diff --git a/public/docs/ts/latest/guide/router-deprecated.jade b/public/docs/ts/latest/guide/router-deprecated.jade new file mode 100644 index 0000000000..c8785640cf --- /dev/null +++ b/public/docs/ts/latest/guide/router-deprecated.jade @@ -0,0 +1,1480 @@ +include ../_util-fns + +.alert.is-critical + :marked + This chapter describes the *deprecated beta* Component Router which is + replaced by the *release candidate* Component Router. We are documenting that now. + +:marked + The Angular ***Component Router*** enables navigation from one [view](./glossary.html#view) to the next + as users perform application tasks. + + We cover the router's primary features in this chapter, illustrating them through the evolution + of a small application that we can [run live](/resources/live-examples/router/ts/plnkr.html). +.l-sub-section + img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") + :marked + To see the URL changes in the browser address bar, + pop out the preview window by clicking the blue 'X' button in the upper right corner. + +.l-main-section +:marked + ## Overview + + The browser is a familiar model of application navigation. + We enter a URL in the address bar and the browser navigates to a corresponding page. + We click links on the page and the browser navigates to a new page. + We click the browser's back and forward buttons and the browser navigates + backward and forward through the history of pages we've seen. + + The Angular ***Component Router*** ("the router") borrows from this model. + It can interpret a browser URL as an instruction + to navigate to a client-generated view and pass optional parameters along to the supporting view component + to help it decide what specific content to present. + We can bind the router to links on a page and it will navigate to + the appropriate application view when the user clicks a link. + We can navigate imperatively when the user clicks a button, selects from a drop box, + or in response to some other stimulus from any source. And the router logs activity + in the browser's history journal so the back and forward buttons work as well. + + We'll learn many router details in this chapter which covers + + * Setting the [base href](#base-href) + * Importing from the [router library](#import) + * [configuring a router](#route-config) + * the [link parameters array](#link-parameters-array) that propels router navigation + * navigating when the user clicks a data-bound [RouterLink](#router-link) + * navigating under [program control](#navigate) + * embedding critical information in the URL with [route parameters](#route-parameters) + * creating a [child router](#child-router) with its own routes + * setting a [default route](#default) + * confirming or canceling navigation with [router lifecycle hooks](#lifecycle-hooks) + * passing optional information in [query parameters](#query-parameters) + * choosing the "HTML5" or "hash" [URL style](#browser-url-styles) + + We proceed in phases marked by milestones building from a simple two-pager with placeholder views + up to a modular, multi-view design with child routes. + + But first, an overview of router basics. + +.l-main-section +:marked + ## The Basics + Let's begin with a few core concepts of the Component Router. + Then we can explore the details through a sequence of examples. + +:marked + ### *<base href>* + Most routing applications should add a `` element to the **`index.html`** just after the `` tag + to tell the router how to compose navigation URLs. + + If the `app` folder is the application root, as it is for our sample application, + set the `href` value *exactly* as shown here. ++makeExample('router-deprecated/ts/index.1.html','base-href', 'index.html (base href)')(format=".") + +:marked + ### Router imports + The Angular Component Router is an optional service that presents a particular component view for a given URL. + It is not part of the Angular 2 core. It is in its own library package, `'@angular/router-deprecated`. + We import what we need from it as we would from any other Angular package. + ++makeExample('router-deprecated/ts/app/app.component.1.ts','import-router', 'app/app.component.ts (import)')(format=".") +.l-sub-section + :marked + We cover other options in the [details below](#browser-url-styles). +:marked + ### Configuration + When the browser's URL changes, the router looks for a corresponding **`RouteDefinition`** + from which it can determine the component to display. + + A router has no route definitions until we configure it. + The preferred way to simultaneously create a router and add its routes is with a **`@RouteConfig`** [decorator](glossary.html#decorator) + applied to the router's host component. + + In this example, we configure the top-level `AppComponent` with three route definitions ++makeExample('router-deprecated/ts/app/app.component.2.ts', 'route-config', 'app.component.ts (excerpt)')(format=".") +:marked + +.l-sub-section + :marked + There are several flavors of `RouteDefinition`. + The most common by far is the named **`Route`** which maps a URL path to a component + + The `name` field is the route name which **must** be spelled in **PascalCase** + to avoid potential confusion with the route `path`. + + The `:id` in the third route is a token for a route parameter. In a URL such as `/hero/42`, "42" + is the value of the `id` parameter. The corresponding `HeroDetailComponent` + will use that value to find and present the hero whose `id` is 42. + We'll learn more about route parameters later in this chapter. +:marked + ### Router Outlet + Now we know how the router gets its configuration. + When the browser URL for this application becomes `/heroes`, + the router matches that URL to the `RouteDefinition` named *Heroes* and displays the `HeroListComponent` + in a **`RouterOutlet`** that we've placed in the host view's HTML. +code-example(format="", language="html"). + <!-- Routed views go here --> + <router-outlet></router-outlet> +:marked + ### Router Links + Now we have routes configured and a place to render them, but + how do we navigate? The URL could arrive directly from the browser address bar. + But most of the time we navigate as a result of some user action such as the click of + an anchor tag. + + We add a **`RouterLink`** directive to the anchor tag and bind it to a template expression that + returns an array of route link parameters (the **link parameters array**). The router ultimately resolves that array + into a URL and a component view. + + We see such bindings in the following `AppComponent` template: ++makeExample('router-deprecated/ts/app/app.component.1.ts', 'template')(format=".") +.l-sub-section + :marked + We're adding two anchor tags with `RouterLink` directives. + We bind each `RouterLink` to an array containing the string name of a route definition. + 'CrisisCenter' and 'Heroes' are the names of the `Routes` we configured above. + + We'll learn to write more complex link expressions — and why they are arrays — + [later](#link-parameters-array) in the chapter. +:marked + ### Let's summarize + + The `@RouterConfig` configuration tied the `AppComponent` to a router configured with routes. + The component has a `RouterOutlet` where it can display views produced by the router. + It has `RouterLinks` that users can click to navigate via the router. + + The `AppComponent` has become a ***Routing Component***, a component that can route. + + Here are the key *Component Router* terms and their meanings: +table + tr + th Router Part + th Meaning + tr + td Router + td. + Displays the application component for the active URL. + Manages navigation from one component to the next. + tr + td @RouteConfig + td. + Configures a router with RouteDefinitions, each mapping a URL path to a component. + tr + td RouteDefinition + td. + Defines how the router should navigate to a component based on a URL pattern. + tr + td Route + td. + The most common form of RouteDefinition consisting of a path, a route name, + and a component type. + tr + td RouterOutlet + td. + The directive (<router-outlet>) that marks where the router should display a view. + tr + td RouterLink + td. + The directive for binding a clickable HTML element to + a route. Clicking an anchor tag with a routerLink directive + that is bound to a Link Parameters Array triggers a navigation. + tr + td Link Parameters Array + td. + An array that the router inteprets into a routing instruction. + We can bind a RouterLink to that array or pass the array as an argument to + the Router.navigate method. + tr + td Routing Component + td. + An Angular component with an attached router. +:marked + We've barely touched the surface of the router and its capabilities. + + The following detail sections describe a sample routing application + as it evolves over a sequence of milestones. + We strongly recommend taking the time to read and understand this story. + +.l-main-section +:marked + ## The Sample Application + We have an application in mind as we move from milestone to milestone. + +.l-sub-section + :marked + While we make incremental progress toward the ultimate sample application, this chapter is not a tutorial. + We discuss code and design decisions pertinent to routing and application design. + We gloss over everything in between. + + The full source is available in the [live example](/resources/live-examples/router/ts/plnkr.html). +:marked + Our client is the Hero Employment Agency. + Heroes need work and The Agency finds Crises for them to solve. + + The application has two main feature areas: + 1. A *Crisis Center* where we maintain the list of crises for assignment to heroes. + 1. A *Heroes* area where we maintain the list of heroes employed by The Agency. + + Run the [live example](/resources/live-examples/router/ts/plnkr.html). + It opens in the *Crisis Center*. We'll come back to that. + + Click the *Heroes* link. We're presented with a list of Heroes. +figure.image-display + img(src='/resources/images/devguide/router/hero-list.png' alt="Hero List" width="250") +:marked + We select one and the application takes us to a hero editing screen. +figure.image-display + img(src='/resources/images/devguide/router/hero-detail.png' alt="Crisis Center Detail" width="250") +:marked + Our changes take effect immediately. We click the "Back" button and the + app returns us to the Heroes list. + + We could have clicked the browser's back button instead. + That would have returned us to the Heroes List as well. + Angular app navigation updates the browser history as normal web navigation does. + + Now click the *Crisis Center* link. We go to the *Crisis Center* and its list of ongoing crises. +figure.image-display + img(src='/resources/images/devguide/router/crisis-center-list.png' alt="Crisis Center List" ) +:marked + We select one and the application takes us to a crisis editing screen. +figure.image-display + img(src='/resources/images/devguide/router/crisis-center-detail.png' alt="Crisis Center Detail") +:marked + This is a bit different from the *Hero Detail*. *Hero Detail* saves the changes as we type. + In *Crisis Detail* our changes are temporary until we either save or discard them by pressing the "Save" or "Cancel" buttons. + Both buttons navigate back to the *Crisis Center* and its list of crises. + + Suppose we click a crisis, make a change, but ***do not click either button***. + Maybe we click the browser back button instead. Maybe we click the "Heroes" link. + + Do either. Up pops a dialog box. +figure.image-display + img(src='/resources/images/devguide/router/confirm-dialog.png' alt="Confirm Dialog" width="300") +:marked + We can say "OK" and lose our changes or click "Cancel" and continue editing. + + The router supports a `routerCanDeactivate` lifecycle hook that gives us a chance to clean-up + or ask the user's permission before navigating away from the current view. + + Here we see an entire user session that touches all of these features. + +figure.image-display + img(src='/resources/images/devguide/router/router-anim.gif' alt="App in action" ) +:marked + Here's a diagram of all application routing options: +figure.image-display + img(src='/resources/images/devguide/router/complete-nav.png' alt="Navigation diagram" ) +:marked + This app illustrates the router features we'll cover in this chapter + + * navigating to a component (*Heroes* link to "Heroes List") + * including a route parameter (passing the Hero `id` while routing to the "Hero Detail") + * child routes (the *Crisis Center* has its own routes) + * the `routerCanDeactivate` lifecycle hook (ask permission to discard unsaved changes) + + +.l-main-section +:marked + ## Milestone #1: Getting Started with the Router + + Let's begin with a simple version of the app that navigates between two empty views. +figure.image-display + img(src='/resources/images/devguide/router/router-1-anim.gif' alt="App in action" ) + + +:marked + + ### Set the *<base href>* + The Component Router uses the browser's + [history.pushState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) + for navigation. Thanks to `pushState`, we can make our in-app URL paths look the way we want them to + look, e.g. `localhost:3000/crisis-center`. Our in-app URLs can be indistinguishable from server URLs. + + Modern HTML 5 browsers were the first to support `pushState` which is why many people refer to these URLs as + "HTML 5 style" URLs. + + We must **add a [<base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag** + to the `index.html` to make `pushState` routing work. + The browser also needs the base `href` value to prefix *relative* URLs when downloading and linking to + css files, scripts, and images. + + Add the base element just after the `` tag. + If the `app` folder is the application root, as it is for our application, + set the `href` value in **`index.html`** *exactly* as shown here. + ++makeExample('router-deprecated/ts/index.1.html','base-href', 'index.html (base href)')(format=".") +.l-sub-section + :marked + HTML 5 style navigation is the Component Router default. + Learn why "HTML 5" style is preferred, how to adjust its behavior, and how to switch to the + older hash (#) style if necessary in the [Browser URL Styles](#browser-url-styles) appendix below. + +:marked +.l-sub-section + :marked + #### Live example note + We have to get tricky when we run the live example because the host service sets + the application base address dynamically. That's why we replace the `` with a + script that writes a `` tag on the fly to match. + code-example(format="") + <script>document.write('<base href="' + document.location + '" />');</script> + :marked + We should only need this trick for the live example, not production code. + + +:marked + ### Import from the Component Router library + The Component Router is not part of the Angular 2 core. It is in its own library. + The router is an optional service because not all applications need routing and, + depending on your requirements, you may need a different routing library. + + The Component Router library is in its own `'@angular/router-deprecated` package. + We import what we need from it as we would from any Angular package: ++makeExample('router-deprecated/ts/app/app.component.1.ts','import-router', 'app/app.component.ts (import)')(format=".") + +:marked + ### Booting with the router service providers + Our app launches from the `main.ts` file in the `/app` folder so let's start there. + It's short and all of it is relevant to routing. ++makeExample('router-deprecated/ts/app/main.1.ts','all', 'main.ts')(format=".") +:marked + We import our root `AppComponent` and Angular's `bootstrap` function as expected. + + We also import `ROUTER_PROVIDERS` from the router library. + The router is a service implemented by a collection of *Dependency Injection* providers, most of which are identified in the + `ROUTER_PROVIDERS` array. + + We're booting Angular with `AppComponent` as our app's root component and + registering providers, as we often do, in the providers array in the second parameter of the `bootstrap` function. + Providing the router providers at the root makes the Component Router available everywhere in our application. +.l-sub-section + :marked + Learn about providers, the `provide` function, and injected services in the + [Dependency Injection chapter](dependency-injection.html). +:marked + ### The *AppComponent* shell + The root `AppComponent` is the application shell. It has title at the top, a navigation bar with two links, + and a *Router Outlet* at the bottom where the router swaps views on and off the page. Here's what we mean: +figure.image-display + img(src='/resources/images/devguide/router/shell-and-outlet.png' alt="Shell" width="300" ) +:marked + + The corresponding component template looks like this: ++makeExample('router-deprecated/ts/app/app.component.1.ts','template')(format=".") +:marked + ### *RouterOutlet* + `RouterOutlet` is a component from the router library. + The router displays views within the bounds of the `` tags. + +.l-sub-section + :marked + A template may hold exactly one ***unnamed*** ``. + + +:marked + ### *RouterLink* binding + Above the outlet, within the anchor tags, we see [Property Bindings](template-syntax.html#property-binding) to + the `RouterLink` directive that look like `[routerLink]="[...]"`. We imported `RouterLink` from the router library. + + The template expression to the right of the equals (=) returns a *link parameters array*. + + A link parameters array holds the ingredients for router navigation: + * the name of the route that prescribes the destination component and a path for the URL + * the optional route and query parameters that go into the route URL + + The arrays in this example each have a single string parameter, the name of a `Route` that + we'll configure for this application with `@RouteConfig()`. We don't need to set route parameters yet. +.l-sub-section + :marked + Learn more about the link parameters array in the [appendix below](#link-parameters-array). + +:marked + ### *@RouteConfig()* + A router holds a list of route definitions. The list is empty for a new router. We must configure it. + + A router also needs a **Host Component**, a point of origin for its navigations. + + It's natural to combine the creation of a new router, its configuration, and its assignment to a host component + in a single step. That's the purpose of the `@RouteConfig` decorator which we put to good use here: ++makeExample('router-deprecated/ts/app/app.component.1.ts','route-config')(format=".") +:marked + The `@RouteConfig` decorator creates a new router. + We applied the decorator to `AppComponent` which makes that the router's host component. + The argument to `@RouteConfig()` is an array of **Route Definitions**. + + We're supplying two definitions: ++makeExample('router-deprecated/ts/app/app.component.1.ts','route-defs')(format=".") +:marked + Each definition translates to a [Route](../api/router/Route-class.html) which has a + * `path` - the URL path segment for this route + * `name` - the name of the route + * `component` - the component associated with this route. + + The router draws upon its registry of route definition when + 1. the browser URL changes + 2. we tell the router to go to a named route + + In plain English, we might say of the first route: + 1. *When the browser's location URL changes to **match the path** segment `/crisis-center`, create or retrieve an instance of + the `CrisisCenterComponent` and display its view.* + + 1. *When the application requests navigation to a route **named** `CrisisCenter`, compose a browser URL + with the path segment `/crisis-center`, update the browser's address location and history, create or retrieve an instance of + the `CrisisListComponent`, and display that component's list view.* + + ### "Getting Started" wrap-up + + We've got a very basic, navigating app, one that can switch between two views + when the user clicks a link. + + We've learned how to + * load the router library + * add a nav bar to the shell template with anchor tags and `routerLink` directives + * added a `router-outlet` to the shell template where views will be displayed + * configure the router with `@RouterConfig` + * set the router to compose "HTML 5" browser URLs. + + The rest of the starter app is mundane, with little interest from a router perspective. + Here are the details for readers inclined to build the sample through to this milestone. + + Our starter app's structure looks like this: +.filetree + .file router-sample + .children + .file app + .children + .file app.component.ts + .file crisis-list.component.ts + .file hero-list.component.ts + .file main.ts + .file node_modules ... + .file typings ... + .file index.html + .file package.json + .file styles.css + .file tsconfig.json + .file typings.json +:marked + Here are the files discussed in this milestone ++makeTabs( + `router/ts/app/app.component.1.ts, + router/ts/app/main.1.ts, + router/ts/app/hero-list.component.ts, + router/ts/app/crisis-list.component.ts, + router/ts/index.html`, + ',all,,', + `app.component.ts, + main.ts, + hero-list.component.ts, + crisis-list.component.ts, + index.html`) +:marked + + +.l-main-section +:marked + ## Milestone #2: The Heroes Feature + + We've seen how to navigate using the `RouterLink` directive. + + Now we'll learn some new tricks such as how to + * organize our app into *feature areas* + * navigate imperatively from one component to another + * pass information along in route parameters (`RouteParams`) + + To demonstrate, we'll build out the *Heroes* feature. + + ### The Heroes "feature area" + + A typical application has multiple *feature areas*, each an island of functionality + with its own workflow(s), dedicated to a particular business purpose. + + We could continue to add files to the `app/` folder. + That's unrealistic and ultimately not maintainable. + We think it's better to put each feature area in its own folder. + + Our first step is to **create a separate `app/heroes/` folder** + and add *Hero Management* feature files there. + + We won't be creative about it. Our example is pretty much a + copy of the code and capabilities in the "[Tutorial: Tour of Heroes](../tutorial/index.html)". + + Here's how the user will experience this version of the app +figure.image-display + img(src='/resources/images/devguide/router/router-2-anim.gif' alt="App in action" ) +:marked + ### Add Heroes functionality + + We delete the placeholder `hero-list.component.ts` that's in + the `app/` folder. + + We create a new `hero-list.component.ts` in the `app/heroes/` + folder and copy over the contents of the final `heroes.component.ts` from the tutorial. + We also copy the `hero-detail.component.ts` and the `hero.service.ts` files + into the `heroes/` folder. + + When we're done organizing, we have three *Hero Management* files: + +.filetree + .file app/heroes + .children + .file hero-detail.component.ts + .file hero-list.component.ts + .file hero.service.ts +:marked + We provide the `HeroService` in the application root `AppComponent` + so that is available everywhere in the app. + + Now it's time for some surgery to bring these files and the rest of the app + into alignment with our application router. + + ### New route definition with route parameter + + The new Heroes feature has two interacting components, the list and the detail. + The list view is self-sufficient; we navigate to it, it gets a list of heroes and displays them. + It doesn't need any outside information. + + The detail view is different. It displays a particular hero. It can't know which hero on its own. + That information must come from outside. + + In our example, when the user selects a hero from the list, we navigate to the detail view to show that hero. + We'll tell the detail view which hero to display by including the selected hero's id in the route URL. + + With that plan in mind, we return to the `app.component.ts` to make changes to the router's configuration + + First, we import the two components from their new locations in the `app/heroes/` folder: ++makeExample('router-deprecated/ts/app/app.component.2.ts','hero-import')(format=".") +:marked + Then we update the `@RouteConfig` route definitions : ++makeExample('router-deprecated/ts/app/app.component.2.ts','route-config')(format=".") +:marked + The `CrisisCenter` and `Heroes` definitions didn't change. + While we moved `hero-list.component.ts` to a new location in the `app/heroes/` folder, that only affects the `import` statement; + it doesn't affect its route definition. + + We added a new route definition for the `HeroDetailComponent` — and this definition has a twist. ++makeExample('router-deprecated/ts/app/app.component.2.ts','hero-detail-route')(format=".") +:marked + Notice the `:id` token in the path. That creates a slot in the path for a **Route Parameter**. + In this case, we're expecting the router to insert the `id` of a hero into that slot. + + If we tell the router to navigate to the detail component and display "Magneta", we expect hero `id` (15) to appear in the + browser URL like this: +code-example(format="." language="bash"). + localhost:3000/hero/15 +:marked + If a user enters that URL into the browser address bar, the router should recognize the + pattern and go to the same "Magneta" detail view. +.l-sub-section + :marked + #### Route parameter or query parameter? + Embedding the route parameter token, `:id`, in the route definition path is a good choice for our scenario + because the `id` is *required* by the `HeroDetailComponent` and because + the value `15` in the path clearly distinguishes the route to "Magneta" from + a route for some other hero. + + A [query parameter](#query-parameter) might be a better choice if we were passing an *optional* value to `HeroDetailComponent`. + + +:marked + ### Navigate to the detail imperatively + + *We don't navigate to the detail component by clicking a link*. + We won't be adding a new anchor tag to the shell navigation bar. + + Instead, we'll *detect* when the user selects a hero from the list and *command* the router + to present the hero detail view of the selected hero. + + We'll adjust the `HeroListComponent` to implement these tasks, beginning with its constructor + which acquires the router service and the `HeroService` by dependency injection: ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.1.ts','ctor')(format=".") +:marked + We make a few changes to the template: ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.1.ts','template')(format=".") +:marked + The template defines an `*ngFor` repeater such as [we've seen before](displaying-data.html#ngFor). + There's a `(click)` [EventBinding](template-syntax.html#event-binding) to the component's `onSelect` method + which we implement as follows: ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.1.ts','select')(format=".") +:marked + It calls the router's **`navigate`** method with a **Link Parameters Array**. + This array is similar to the *link parameters array* we met [earlier](#shell-template) in an anchor tag while + binding to the `RouterLink` directive. This time we see it in code rather than in HTML. + + + ### Setting the route parameters object + + We're navigating to the `HeroDetailComponent` where we expect to see the details of the selected hero. + We'll need *two* pieces of information: the destination and the hero's `id`. + + Accordingly, the *link parameters array* has *two* items: the **name** of the destination route and a **route parameters object** that specifies the + `id` of the selected hero. ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.1.ts','link-parameters-array')(format=".") +:marked + The router composes the appropriate two-part destination URL from this array: +code-example(format="." language="bash"). + localhost:3000/hero/15 +:marked + ### Getting the route parameter + + + How does the target `HeroDetailComponent` learn about that `id`? + Certainly not by analyzing the URL! That's the router's job. + + The router extracts the route parameter (`id:15`) from the URL and supplies it to + the `HeroDetailComponent` via the **RouteParams** service. + + As usual, we write a constructor that asks Angular to inject that service among the other services + that the component require and reference them as private variables. ++makeExample('router-deprecated/ts/app/heroes/hero-detail.component.1.ts','ctor')(format=".") +:marked + Later, in the `ngOnInit` method, + we ask the `RouteParams` service for the `id` parameter by name and + tell the `HeroService` to fetch the hero with that `id`. ++makeExample('router-deprecated/ts/app/heroes/hero-detail.component.1.ts','ngOnInit')(format=".") + +.l-sub-section + :marked + Angular calls the `ngOnInit` method shortly after creating an instance of the `HeroDetailComponent`. + + We put the data access logic in the `ngOnInit` method rather than inside the constructor + to improve the component's testability. + We explore this point in greater detail in the [OnInit appendix](#onInit) below. +:marked + ### Navigating back to the list component + The `HeroDetailComponent` has a "Back" button wired to its `gotoHeroes` method that navigates imperatively + back to the `HeroListComponent`. + + The router `navigate` method takes the same one-item *link parameters array* + that we wrote for the `[routerLink]` directive binding. + It holds the **name of the `HeroListComponent` route**: ++makeExample('router-deprecated/ts/app/heroes/hero-detail.component.1.ts','gotoHeroes')(format=".") +:marked + ### Heroes App Wrap-up + + We've reached the second milestone in our router education. + + We've learned how to + * organize our app into *feature areas* + * navigate imperatively from one component to another + * pass information along in route parameters (`RouteParams`) + + After these changes, the folder structure looks like this: +.filetree + .file router-sample + .children + .file app + .children + .file heroes + .children + .file hero-detail.component.ts + .file hero-list.component.ts + .file hero.service.ts + .file app.component.ts + .file crisis-list.component.ts + .file main.ts + .file node_modules ... + .file typings ... + .file index.html + .file package.json + .file styles.css + .file tsconfig.json + .file typings.json +:marked + + ### The Heroes App code + Here are the relevant files for this version of the sample application. ++makeTabs( + `router/ts/app/app.component.2.ts, + router/ts/app/heroes/hero-list.component.1.ts, + router/ts/app/heroes/hero-detail.component.1.ts, + router/ts/app/heroes/hero.service.ts`, + null, + `app.component.ts, + hero-list.component.ts, + hero-detail.component.ts, + hero.service.ts`) +:marked + + +.l-main-section +:marked + ## Milestone #3: The Crisis Center + The *Crisis Center* is a fake view at the moment. Time to make it useful. + + The new *Crisis Center* begins as a virtual copy of the *Heroes* feature. + We create a new `app/crisis-center` folder, copy the Hero files, + and change every mention of "hero" to "crisis". + + A `Crisis` has an `id` and `name`, just like a `Hero` + The new `CrisisListComponent` displays lists of crises. + When the user selects a crisis, the app navigates to the `CrisisDetailComponent` + for display and editing of the crisis name. + + Voilà, instant feature module! + + There's no point to this exercise unless we can learn something. + We do have new ideas and techniques in mind: + + * The application should navigate to the *Crisis Center* by default. + + * The user should be able to cancel unwanted changes. + + * The router should prevent navigation away from the detail view while there are pending changes. + + There are also a few lingering annoyances in the *Heroes* implementation that we can cure in the *Crisis Center*. + + * We currently register every route of every view at the highest level of the application. + If we expand the *Crisis Center* with a 100 new views, we'll make 100 changes to the + `AppComponent` route configuration. If we rename a *Crisis Center* component or change a route definition, + we'll be changing the `AppComponent` too. + + * If we followed *Heroes* lead, we'd be adding the `CrisisService` to the providers in `app.component.ts`. + Then both `HeroService` and `CrisisService` would be available everywhere although + they're only needed in their respective feature modules. That stinks. + + Changes to a sub-module such as *Crisis Center* shouldn't provoke changes to the `AppComponent` or `main.ts`. + We need to [*separate our concerns*](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html). + + We'll fix all of these problems and add the new routing features to *Crisis Center*. + + The most significant fix is the introduction of a **child *Routing Component*** + and its **child router** + + We'll leave *Heroes* in its less-than-perfect state to + serve as a contrast with what we hope is a superior *Crisis Center*. + + ### A free-standing Crisis Center Feature Module + The *Crisis Center* is one of two application workflows. + Users navigate between them depending on whether they are managing crises or heroes. + + The `CrisisCenter` and `Heroes` components are children of the root `AppComponent`. + + Unfortunately, they and their related files are physically commingled in the same folder with the `AppComponent`. + We'd prefer to separate them in their own *feature areas* so they can operate and evolve independently. + Someday we might re-use one or the other in a different application. + Someday we might load one of them dynamically only when the user chose to enter its workflow. + + Some might call it [yagni](http://martinfowler.com/bliki/Yagni.html) to even think about such things. + But we're right to be nervous about the way *Heroes* and *Crisis Center* artifacts are + bubbling up to the root `AppComponent` and blending with each other. + That's a [code smell](http://martinfowler.com/bliki/CodeSmell.html). + + Isolating feature area modules from each other looks good to us. +.l-sub-section + :marked + It's looking good as a general pattern for Angular applications. + figure.image-display + img(src='/resources/images/devguide/router/component-tree.png' alt="Component Tree" ) + :marked + * each feature area in its own module folder + * each area with its own root component + * each area root component with its own router-outlet and child routes + * area routes rarely (if ever) cross + +:marked + We'll make the *Crisis Center* stand on its own and leave the *Heroes* as it is + so we can compare the effort, results, and consequences. + Then each of us can decide which path to prefer (as if we didn't already know). + + + ### Child Routing Component + We create a new `app/crisis-center` folder and add `crisis-center.component.ts` to it with the following contents: ++makeExample('router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts', 'minus-imports', 'crisis-center/crisis-center.component.ts (minus imports)') +:marked + The `CrisisCenterComponent` parallels the `AppComponent`. + + The `CrisisCenterComponent` is the root of the *Crisis Center* area + just as `AppComponent` is the root of the entire application. + + This `CrisisCenterComponent` is a shell for crisis management + just as the `AppComponent` is a shell to manage the high-level workflow. + + `AppComponent` has a `@RouteConfig` decorator that defines the top-level routes. + `CrisisCenterComponent` has a `@RouteConfig` decorator that defines *Crisis Center* child routes. + + The `CrisisCenterComponent` template is dead simple — simpler even than the `AppComponent` template. + It has no content, no links, just a `` for the *Crisis Center* child views. + + It has no selector either. It doesn't need one. We don't *embed* this component in a parent template. We *navigate* to it + from the outside, via a parent router (more on that soon). + + ### Service isolation + We add the `CrisisService` to the component's providers array + instead of registering it with the `bootstrap` function in `main.ts`. ++makeExample('router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts', 'providers') +:marked + This step limits the scope of that service to the *Crisis Center* component and its sub-component tree. + No component outside of the *Crisis Center* needs access to the `CrisisService`. + By restricting its scope, we feel confident that we can evolve it independently without fear of breaking + unrelated application modules — modules that *shouldn't have access to it anyway*. + + ### Child Route Configuration + The `CrisisCenterComponent` is a *Routing Component* like the `AppComponent`. + + The `@RouteConfig` decorator that adorns the `CrisisCenterComponent` class defines routes in much the same way + that we did earlier. ++makeExample('router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts', 'route-config', 'app/crisis-center/crisis-center.component.ts (routes only)' )(format=".") +:marked + The two routes terminate in the two *Crisis Center* child components, `CrisisListComponent` and `CrisisDetailComponent`. + + There is an *important difference* in the treatment of the root `AppComponent` paths and these paths. + Normally paths that begin with `/` refer to the root of the application. + Here they refer to the **root of the child component!**. + + The Component Router composes the final route by concatenating route paths beginning with the ancestor paths to this child router. + In our example, there is one ancestor path: "crisis-center". + The final route to the `CrisisDetailComponent` displaying the crisis whose `id` is 2 would be something like: +code-example(format=""). + localhost:3000/crisis-center/2 +:marked + We cannot know this simply by looking at the `CrisisCenterComponent` alone. + We can't tell that it is a *child* routing component. + We can't tell that its routes are child routes; they are indistinguiable from top level application routes. + + Such ignorance is intentional. The *Crisis Center* shouldn't know that it is the child of anything. + Today it is a child component one level down. + Tomorrow it might be the top level component of its own application. + Next month it might be re-purposed in a different application. + The *Crisis Center* itself is indifferent to these possibilities. + + *We* make it a child component of our application by reconfiguring the routes of the top level `AppComponent`. +:marked + ### Parent Route Configuration + Here is the revised route configuration for the parent `AppComponent`: ++makeExample('router-deprecated/ts/app/app.component.ts', 'route-config', 'app/app.component.ts (routes only)' ) +:marked + The last two *Hero* routes haven't changed. + + The first *Crisis Center* route has changed — *significantly* — and we've formatted it to draw attention to the differences: ++makeExample('router-deprecated/ts/app/app.component.ts', 'route-config-cc')(format=".") +:marked + Notice that the **path ends with a slash and three trailing periods (`/...`)**. + + That means this is an incomplete route (a ***non-terminal route***). The finished route will be some combination of + the parent `/crisis-center/` route and a route from the **child router** that belongs to the designated component. + + All is well. + The parent route's designated component is the `CrisisCenterComponent` which is a *Routing Component* with its own router and routes. + + + ### Default route + The other important change is the addition of the `useAsDefault` property. + Its value is `true` which makes *this* route the *default* route. + When the application launches, in the absence of any routing information from the browser's URL, the router + will default to the *Crisis Center*. That's our plan. + + ### Routing to the Child + + We've set the top level default route to go to the `CrisisCenterComponent`. + The final route will be a combination of `/crisis-center/` + and one of the child `CrisisCenterComponent` router's two routes. Which one? + + It could be either of them. In the absence of additional information, the router can't decide and must throw an error. + + We've tried the sample application and it didn't fail. We must have done something right. + + Look at the end of the child `CrisisCenterComponent`s first route. ++makeExample('router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts', 'default-route', 'app/crisis-center/crisis-center.component.ts (default route)')(format=".") +:marked + We see `useAsDefault: true` once again. + That tells the router to compose the final URL using the path from the default *child* route. + Concatenate the base URL with the parent path, `/crisis-center/`, and the child path, `/`. + Remove superfluous slashes. We get: +code-example(format=""). + localhost:3000/crisis-center/ + +.l-main-section +:marked + + ## Router Lifecycle Hooks + + Angular components have [lifecycle hooks](lifecycle-hooks.html). For example, Angular calls the hook methods of the + [OnInit](../api/core/OnInit-interface.html) and [OnDestroy](../api/core/OnDestroy-interface.html) + interfaces when it creates and destroys components. + + The router also has hooks for *its* lifecycle such as + [CanActivate](../api/router/CanActivate-decorator.html), [OnActivate](../api/router/OnActivate-interface.html), and + [CanDeactivate](../api/router/CanDeactivate-interface.html). + These three hooks can change the way the router navigates *to* a component or *away* from a component. + + The router lifecycle hooks *supplement* the component lifecycle hooks. + We still need the component hooks but the router hooks do what the component hooks cannot. + For example, the component hooks can't stop component creation or destruction. + They can't pause view navigation to wait for an asynchronous process to finish because they are synchronous. + + A *router* hook can permit or prevent a navigation. + If the hook returns `true`, the navigation proceeds; if it returns `false`, the + router cancels the navigation and stays on the current view. + A hook can also tell the router to navigate to a *different* component. + + Router hook methods can act synchronously by returning a boolean value directly or + act asynchronously by returning a promise that resolves to a boolean. + + Let's look at `CanDeactivate`, one of the most important router hooks. +.l-sub-section + :marked + We'll examine other router hooks in a future update to this chapter. + +:marked + ### *CanDeactivate*: handling unsaved changes + + Back in the "Heroes" workflow, the app accepts every change to a hero immediately without hesitation or validation. + + In the real world, we might have to accumulate the users changes. + We might have to validate across fields. We might have to validate on the server. + We might have to hold changes in a pending state until the user confirms them *as a group* or + cancels and reverts all changes. + + What do we do about unapproved, unsaved changes when the user navigates away? + We can't just leave and risk losing the user's changes; that would be a terrible experience. + + We'd like to pause and let the user decide what to do. + If the user cancels, we'll stay put and allow more changes. + If the user approves, the app can save. + + We still might delay navigation until the save succeeds. + If we let the user move to the next screen immediately and + the save failed (perhaps the data are ruled invalid), we would have lost the context of the error. + + We can't block while waiting for the server — that's not possible in a browser. + We need to stop the navigation while we wait, asynchronously, for the server + to return with its answer. + + We need the `CanDeactivate` hook. + + ### Cancel and Save + + Our sample application doesn't talk to a server. + Fortunately, we have another way to demonstrate an asynchronous router hook. + + Users update crisis information in the `CrisisDetailComponent`. + Unlike the `HeroDetailComponent`, the user changes do not update the + crisis entity immediately. We update the entity when the user presses the *Save* button. + We discard the changes if the user presses he *Cancel* button. + + Both buttons navigate back to the crisis list after save or cancel. ++makeExample('router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts', 'cancel-save', 'crisis-detail.component.ts (excerpt)')(format=".") +:marked + What if the user tries to navigate away without saving or canceling? + The user could push the browser back button or click the heroes link. + Both actions trigger a navigation. + Should the app save or cancel automatically? + + We'll do neither. Instead we'll ask the user to make that choice explicitly + in a confirmation dialog box that *waits asynchronously for the user's + answer*. +.l-sub-section + :marked + We could wait for the user's answer with synchronous, blocking code. + Our app will be more responsive ... and can do other work ... + by waiting for the user's answer asynchronously. Waiting for the user asynchronously + is like waiting for the server asynchronously. +:marked + The `DialogService` (injected in the `AppComponent` for app-wide use) does the asking. + + It returns a [promise](http://exploringjs.com/es6/ch_promises.html) that + *resolves* when the user eventually decides what to do: either + to discard changes and navigate away (`true`) or to preserve the pending changes and stay in the crisis editor (`false`). + + + +:marked + We execute the dialog inside the router's `routerCanDeactivate` lifecycle hook method. ++makeExample('router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts', 'routerCanDeactivate', 'crisis-detail.component.ts (excerpt)') +:marked + Notice that the `routerCanDeactivate` method *can* return synchronously; + it returns `true` immediately if there is no crisis or there are no pending changes. + But it can also return a promise and the router will wait for that promise to resolve to truthy (navigate) or falsey (stay put). + + **Two critical points** + 1. The router hook is optional. We don't inherit from a base class. We simply implement the interface method or not. + + 1. We rely on the router to call the hook. We don't worry about all the ways that the user + could navigate away. That's the router's job. + We simply write this method and let the router take it from there. + + The relevant *Crisis Center* code for this milestone is + ++makeTabs( + `router/ts/app/crisis-center/crisis-center.component.ts, + router/ts/app/crisis-center/crisis-list.component.1.ts, + router/ts/app/crisis-center/crisis-detail.component.1.ts, + router/ts/app/crisis-center/crisis.service.ts + `, + null, + `crisis-center.component.ts, + crisis-list.component.ts, + crisis-detail.component.ts, + crisis.service.ts, + `) + + + + +.l-main-section +:marked + ## Milestone #4: Query Parameters + + We use [*route parameters*](#route-parameters) to specify a *required* parameterized value *within* the route URL + as we do when navigating to the `HeroDetailComponent` in order to view-and-edit the hero with *id:15*. +code-example(format="." language="bash"). + localhost:3000/hero/15 +:marked + Sometimes we wish to add *optional* information to a route request. + For example, the `HeroListComponent` doesn't need help to display a list of heroes. + But it might be nice if the previously-viewed hero were pre-selected when returning from the `HeroDetailComponent`. +figure.image-display + img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected hero") +:marked + That becomes possible if we can include hero Magneta's `id` in the URL when we + return from the `HeroDetailComponent`, a scenario we'll pursue in a moment. + + Optional information takes other forms. Search criteria are often loosely structured, e.g., `name='wind*'`. + Multiple values are common — `after='12/31/2015' & before='1/1/2017'` — in no particular order — + `before='1/1/2017' & after='12/31/2015'` — in a variety of formats — `during='currentYear'` . + + These kinds of parameters don't fit easily in a URL *path*. Even if we could define a suitable URL token scheme, + doing so greatly complicates the pattern matching required to translate an incoming URL to a named route. + + The **URL query string** is the ideal vehicle for conveying arbitrarily complex information during navigation. + The query string isn't involved in pattern matching and affords enormous flexiblity of expression. + Almost anything serializable can appear in a query string. + + The Component Router supports navigation with query strings as well as route parameters. + We define query string parameters in the *route parameters object* just like we do with route parameters. + + + ### Route Parameters or Query Parameters? + + There is no hard-and-fast rule. In general, + + *prefer a route parameter when* + * the value is required. + * the value is necessary to distinguish one route path from another. + + *prefer a query parameter when* + * the value is optional. + * the value is complex and/or multi-variate. + + + ### Route parameters object + When navigating to the `HeroDetailComponent` we specified the `id` of the hero-to-edit in the + *route parameters object* and made it the second item of the [*link parameters array*](#link-parameters-array). + ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.1.ts','link-parameters-array')(format=".") +:marked + The router embedded the `id` value in the navigation URL because we had defined it + as a route parameter with an `:id` placeholder token in the route `path`: ++makeExample('router-deprecated/ts/app/app.component.2.ts','hero-detail-route')(format=".") +:marked + When the user clicks the back button, the `HeroDetailComponent` constructs another *link parameters array* + which it uses to navigate back to the `HeroListComponent`. ++makeExample('router-deprecated/ts/app/heroes/hero-detail.component.1.ts','gotoHeroes')(format=".") +:marked + This array lacks a route parameters object because we had no reason to send information to the `HeroListComponent`. + + Now we have a reason. We'd like to send the id of the current hero with the navigation request so that the + `HeroListComponent` can highlight that hero in its list. + + We do that with a route parameters object in the same manner as before. + We also defined a junk parameter (`foo`) that the `HeroListComponent` should ignore. + Here's the revised navigation statement: ++makeExample('router-deprecated/ts/app/heroes/hero-detail.component.ts','gotoHeroes-navigate')(format=".") +:marked + The application still works. Clicking "back" returns to the hero list view. + + Look at the browser address bar. +.l-sub-section + img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") + :marked + When running in plunker, pop out the preview window by clicking the blue 'X' button in the upper right corner. +:marked + It should look something like this, depending on where you run it: +code-example(format="." language="bash"). + localhost:3000/heroes?id=15&foo=foo +:marked + The `id` value appears in the query string (`?id=15&foo=foo`), not in the URL path. + The path for the "Heroes" route doesn't have an `:id` token. + +.alert.is-helpful + :marked + The router replaces route path tokens with corresponding values from the route parameters object. + **Every parameter _not_ consumed by a route path goes in the query string.** +:marked + ### Query parameters in the *RouteParams* service + + The list of heroes is unchanged. No hero row is highlighted. + +.l-sub-section + :marked + The [live example](/resources/live-examples/router/ts/plnkr.html) *does* highlight the selected + row because it demonstrates the final state of the application which includes the steps we're *about* to cover. + At the moment we're describing the state of affairs *prior* to those steps. +:marked + The `HeroListComponent` isn't expecting any parameters at all and wouldn't know what to do with them. + Let's change that. + + When navigating from the `HeroListComponent` to the `HeroDetailComponent` + the router picked up the route parameter object and made it available to the `HeroDetailComponent` + in the `RouteParams` service. We injected that service in the constructor of the `HeroDetailComponent`. + + This time we'll be navigating in the opposite direction, from the `HeroDetailComponent` to the `HeroListComponent`. + This time we'll inject the `RouteParams` service in the constructor of the `HeroListComponent`. + + First we extend the router import statement to include the `RouteParams` service symbol; ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.ts','import-route-params', 'hero-list.component.ts (import)')(format=".") +:marked + Then we extend the constructor to inject the `RouteParams` service and extract the `id` parameter as the `_selectedId`: ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.ts','ctor', 'hero-list.component.ts (constructor)')(format=".") +.l-sub-section + :marked + All route parameters are strings. + The (+) in front of the `routeParameters.get` expression is a JavaScript trick to convert the string to an integer. +:marked + We add an `isSelected` method that returns true when a hero's id matches the selected id. ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.ts','isSelected', 'hero-list.component.ts (constructor)')(format=".") +:marked + Finally, we update our template with a [Class Binding](template-syntax.html#class-binding) to that `isSelected` method. + The binding adds the `selected` CSS class when the method returns `true` and removes it when `false`. + Look for it within the repeated `
  • ` tag as shown here: ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.ts','template', 'hero-list.component.ts (template)')(format=".") +:marked + When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected: +figure.image-display + img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected List" ) +:marked + The `foo` query string parameter is harmless and continues to be ignored. + + ### Child Routers and Query Parameters + + We can define query parameters for child routers too. + + The technique is precisely the same. + In fact, we made exactly the same changes to the *Crisis Center* feature. + Confirm the similarities in these *Hero* and *CrisisCenter* components, + arranged side-by-side for easy comparison: ++makeTabs( + `router/ts/app/heroes/hero-list.component.ts, + router/ts/app/crisis-center/crisis-list.component.ts, + router/ts/app/heroes/hero-detail.component.ts, + router/ts/app/crisis-center/crisis-detail.component.ts + `, + null, + `hero-list.component.ts, + crisis-list.component.ts, + hero-detail.component.ts, + crisis-detail.component.ts + `) +:marked + When we navigate back from a `CrisisDetailComponent` that is showing the *Asteroid* crisis, + we see that crisis properly selected in the list like this: +figure.image-display + img(src='/resources/images/devguide/router/selected-crisis.png' alt="Selected crisis" ) +:marked + **Look at the browser address bar again**. It's *different*. It looks something like this: +code-example(format="." language="bash"). + localhost:3000/crisis-center/;id=3;foo=foo +:marked + The query string parameters are no longer separated by "?" and "&". + They are **separated by semicolons (;)** + This is *matrix URL* notation — something we may not have seen before. +.l-sub-section + :marked + *Matrix URL* notation is an idea first floated + in a [1996 proposal](http://www.w3.org/DesignIssues/MatrixURIs.html) by the founder of the web, Tim Berners-Lee. + + Although matrix notation never made it into the HTML standard, it is legal and + it became popular among browser routing systems as a way to isolate parameters + belonging to parent and child routes. The Angular Component Router is such a system. + + The syntax may seem strange to us but users are unlikely to notice or care + as long as the URL can be emailed and pasted into a browser address bar + as this one can. + + + +.l-main-section +:marked + ## Wrap Up + As we end our chapter, we take a parting look at + the entire application. + + We can always try the [live example](/resources/live-examples/router/ts/plnkr.html) and download the source code from there. + + Our final project folder structure looks like this: +.filetree + .file router-sample + .children + .file app + .children + .file crisis-center/... + .file heroes/... + .file app.component.ts + .file dialog.service.ts + .file main.ts + .file node_modules ... + .file typings ... + .file index.html + .file package.json + .file styles.css + .file tsconfig.json + .file typings.json +:marked + The pertinent top level application files are ++makeTabs( + `router/ts/app/app.component.ts, + router/ts/app/main.ts, + router/ts/app/dialog.service.ts, + router/ts/index.html + `, + null, + `app.component.ts, + main.ts, + dialog.service.ts, + index.html + `) +:marked + + ### Crisis Center + The *Crisis Center* feature area within the `crisis-center` folder follows: +.filetree + .file app + .children + .file crisis-center + .children + .file crisis-center.component.ts + .file crisis-detail.component.ts + .file crisis-list.component.ts + .file crisis.service.ts +:marked ++makeTabs( + `router/ts/app/crisis-center/crisis-center.component.ts, + router/ts/app/crisis-center/crisis-list.component.ts, + router/ts/app/crisis-center/crisis-detail.component.ts, + router/ts/app/crisis-center/crisis.service.ts + `, + null, + `crisis-center.component.ts, + crisis-list.component.ts, + crisis-detail.component.ts, + crisis.service.ts, + `) +:marked + ### Heroes + The *Heroes* feature area within the `heroes` folder is next: +.filetree + .file app + .children + .file heroes + .children + .file hero-detail.component.ts + .file hero-list.component.ts + .file hero.service.ts +:marked ++makeTabs( + `router/ts/app/heroes/hero-list.component.ts, + router/ts/app/heroes/hero-detail.component.ts, + router/ts/app/heroes/hero.service.ts + `, + null, + `hero-list.component.ts, + hero-detail.component.ts, + hero.service.ts + `) +:marked + + +.l-main-section +:marked + ## Appendices + The balance of this chapter is a set of appendices that + elaborate some of the points we covered quickly above. + + The appendix material isn't essential. Continued reading is for the curious. + + +.l-main-section + +:marked + ## Link Parameters Array + We've mentioned the *Link Parameters Array* several times. We've used it several times. + + We've bound the `RouterLink` directive to such an array like this: ++makeExample('router-deprecated/ts/app/app.component.3.ts', 'h-anchor')(format=".") +:marked + We've written a two element array when specifying a route parameter like this ++makeExample('router-deprecated/ts/app/heroes/hero-list.component.1.ts', 'nav-to-detail')(format=".") +:marked + These two examples cover our needs for an app with one level routing. + The moment we add a child router, such as the *Crisis Center*, we create new link array possibilities. + + Recall that we specified a default child route for *Crisis Center* so this simple `RouterLink` is fine. ++makeExample('router-deprecated/ts/app/app.component.3.ts', 'cc-anchor-w-default')(format=".") +:marked + *If we had not specified a default route*, our single item array would fail + because we didn't tell the router which child route to use. ++makeExample('router-deprecated/ts/app/app.component.3.ts', 'cc-anchor-fail')(format=".") +:marked + We'd need to write our anchor with a link array like this: ++makeExample('router-deprecated/ts/app/app.component.3.ts', 'cc-anchor-no-default')(format=".") +:marked + Let's parse it out. + * The first item in the array identifies the parent route ('CrisisCenter'). + * There are no parameters for this parent route so we're done with it. + * There is no default for the child route so we need to pick one. + * We decide to go to the `CrisisListComponent` whose route name is 'CrisisList' + * So we add that 'CrisisList' as the second item in the array. + * Voila! `['CrisisCenter', 'CrisisList']`. + + Let's take it a step further. + This time we'll build a link parameters array that navigates from the root of the application + down to the "Dragon Crisis". + + * The first item in the array identifies the parent route ('CrisisCenter'). + * There are no parameters for this parent route so we're done with it. + * The second item identifies the child route for details about a particular crisis ('CrisisDetail'). + * The details child route requires an `id` route parameter + * We add `id` of the *Dragon Crisis* as the third item in the array (`{id:1}`) + + It looks like this! ++makeExample('router-deprecated/ts/app/app.component.3.ts', 'Dragon-anchor')(format=".") +:marked + If we wanted to, we could redefine our `AppComponent` template with *Crisis Center* routes exclusively: ++makeExample('router-deprecated/ts/app/app.component.3.ts', 'template')(format=".") +:marked + In sum, we can write applications with one, two or more levels of routing. + The link parameters array affords the flexibility to represent any routing depth and + any legal sequence of route names and (optional) route parameter objects. + + +.l-main-section +:marked + ## Appendix: Why use an *ngOnInit* method + + We implemented an `ngOnInit` method in many of our Component classes. + We did so, for example, in the [HeroDetailComponent](#hero-detail-ctor). + We might have put the `ngOnInit` logic inside the constructor instead. We didn't for a reason. The reason is *testability*. + + A constructor that has major side-effects can be difficult to test because it starts doing things as soon as + we create a test instance. In this case, it might have made a request to a remote server, something it shouldn't + do under test. It may even be impossible to reach the server in the test environment. + + The better practice is to limit what the constructor can do. Mostly it should stash parameters in + local variables and perform simple instance configuration. + + Yet we want an instance of this class to get the hero data from the `HeroService` soon after it is created. + How do we ensure that happens if not in the constructor? + + Angular detects when a component has certain lifecycle methods like + [ngOnInit](../api/core/OnInit-interface.html) and + [ngOnDestroy](../api/core/OnDestroy-interface.html) and calls + them + at the appropriate moment. + + Angular will call `ngOnInit` when we navigate to the `HeroDetailComponent`, we'll get the `id` from the `RouteParams` + and ask the server for the hero with that `id`. + + We too can call that `ngOnInit` method in our tests if we wish ... after taking control of the injected + `HeroService` and (perhaps) mocking it. + + + +.l-main-section +:marked + ## Appendix: *LocationStrategy* and browser URL styles + + When the router navigates to a new component view, it updates the browser's location and history + with a URL for that view. + This is a strictly local URL. The browser shouldn't send this URL to the server + and should not reload the page. + + Modern HTML 5 browsers support + [history.pushState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries), + a technique that changes a browser's location and history without triggering a server page request. + The router can compose a "natural" URL that is indistinguishable from + one that would otherwise require a page load. + + Here's the *Crisis Center* URL in this "HTML 5 pushState" style: +code-example(format=".", language="bash"). + localhost:3002/crisis-center/ +:marked + Older browsers send page requests to the server when the location URL changes ... + unless the change occurs after a "#" (called the "hash"). + Routers can take advantage of this exception by composing in-application route + URLs with hashes. Here's a "hash URL" that routes to the *Crisis Center* +code-example(format=".", language="bash"). + localhost:3002/src/#/crisis-center/ +:marked + The Angular Component Router supports both styles with two `LocationStrategy` providers: + 1. `PathLocationStrategy` - the default "HTML 5 pushState" style. + 1. `HashLocationStrategy` - the "hash URL" style. + + The router's `ROUTER_PROVIDERS` array sets the `LocationStrategy` to the `PathLocationStrategy`, + making it the default strategy. + We can switch to the `HashLocationStrategy` with an override during the bootstrapping process if we prefer it. +.l-sub-section + :marked + Learn about "providers" and the bootstrap process in the + [Dependency Injection chapter](dependency-injection#bootstrap) +:marked + ### Which Strategy is Best? + We must choose a strategy and we need to make the right call early in the project. + It won't be easy to change later once the application is in production + and there are lots of application URL references in the wild. + + Almost all Angular 2 projects should use the default HTML 5 style. + It produces URLs that are easier for users to understand. + And it preserves the option to do **server-side rendering** later. + + Rendering critical pages on the server is a technique that can greatly improve + perceived responsiveness when the app first loads. + An app that would otherwise take ten or more seconds to start + could be rendered on the server and delivered to the user's device + in less than a second. + + This option is only available if application URLs look like normal web URLs + without hashes (#) in the middle. + + Stick with the default unless you have a compelling reason to + resort to hash routes. + + ### HTML 5 URLs and the *<base href>* + While the router uses the "[HTML 5 pushState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries)" + style by default, we *must* configure that strategy with a **base href** + + The preferred way to configure the strategy is to add a + [<base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag + in the `` of the `index.html`. ++makeExample('router-deprecated/ts/index.1.html','base-href')(format=".") +:marked + Without that tag, the browser may not be able to load resources + (images, css, scripts) when "deep linking" into the app. + Bad things could happen when someone pastes an application link into the + browser's address bar or clicks such a link in an email link. + + Some developers may not be able to add the `` element, perhaps because they don't have + access to `` or the `index.html`. + + Those developers may still use HTML 5 URLs by taking two remedial steps: + + 1. Provide the router with an appropriate `APP_BASE_HREF` value. + 1. Use **absolute URLs** for all web resources: css, images, scripts, and template html files. + +.l-sub-section + :marked + Learn about the [APP_BASE_HREF](../api/router/APP_BASE_HREF-let.html) + in the API Guide. +:marked + ### *HashLocationStrategy* + We can go old-school with the `HashLocationStrategy` by + providing it as the router's `LocationStrategy` during application bootstrapping. + + First, import the `provide` symbol for Dependency Injection and the + `Location` and `HashLocationStrategy` symbols from the router. + + Then *override* the default strategy defined in `ROUTE_PROVIDERS` by + providing the `HashLocationStrategy` later in the `bootstrap` providers array argument: ++makeExample('router-deprecated/ts/app/main.2.ts','', 'main.ts (hash URL strategy)') diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 29d2c0a12e..761a7223a0 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -1,4 +1,10 @@ include ../_util-fns +.alert.is-critical + :marked + This chapter is a *work in progress*. + + It describes the *release candidate* Component Router which + replaces the [*beta* router](router-deprecated.html). :marked The Angular ***Component Router*** enables navigation from one [view](./glossary.html#view) to the next @@ -65,7 +71,7 @@ include ../_util-fns If the `app` folder is the application root, as it is for our sample application, set the `href` value *exactly* as shown here. -+makeExample('router/ts/index.html','base-href', 'index.html (base href)')(format=".") ++makeExample('router/ts/index.1.html','base-href', 'index.html (base href)')(format=".") :marked ### Router imports @@ -299,7 +305,7 @@ figure.image-display If the `app` folder is the application root, as it is for our application, set the `href` value in **`index.html`** *exactly* as shown here. -+makeExample('router/ts/index.html','base-href', 'index.html (base href)')(format=".") ++makeExample('router/ts/index.1.html','base-href', 'index.html (base href)')(format=".") .l-sub-section :marked HTML 5 style navigation is the Component Router default. @@ -1443,7 +1449,7 @@ code-example(format=".", language="bash"). The preferred way to configure the strategy is to add a [<base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag in the `` of the `index.html`. -+makeExample('router/ts/index.html','base-href')(format=".") ++makeExample('router/ts/index.1.html','base-href')(format=".") :marked Without that tag, the browser may not be able to load resources (images, css, scripts) when "deep linking" into the app. From 596825a8b16c7f1ba72fb59f285733b41b640ff7 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Tue, 3 May 2016 14:06:32 +0200 Subject: [PATCH 02/94] docs: update all docs to partially comply the style-guide --- .../architecture/ts/app/app.component.ts | 6 +-- .../architecture/ts/app/backend.service.ts | 13 ++--- .../ts/app/hero-detail.component.ts | 5 +- .../ts/app/hero-list.component.ts | 13 ++--- .../architecture/ts/app/hero.service.ts | 23 ++++----- .../architecture/ts/app/logger.service.ts | 2 +- .../_examples/architecture/ts/app/main.ts | 10 ++-- .../ts/app/sales-tax.component.ts | 13 ++--- .../architecture/ts/app/sales-tax.service.ts | 11 +++-- .../architecture/ts/app/tax-rate.service.ts | 4 +- .../ts/app/app.component.ts | 5 +- .../ts/app/highlight.directive.1.ts | 2 +- .../ts/app/highlight.directive.2.ts | 18 +++---- .../ts/app/highlight.directive.ts | 18 +++---- .../attribute-directives/ts/app/main.ts | 6 ++- .../ts/app/app.component.ts | 12 ++--- .../ts/app/date.pipe.ts | 4 +- .../cb-a1-a2-quick-reference/ts/app/main.ts | 5 +- .../ts/app/movie-list.component.ts | 10 ++-- .../ts/app/movie.service.ts | 5 +- .../ts/app/app.component.ts | 17 +++---- .../ts/app/astronaut.component.ts | 7 +-- .../ts/app/countdown-parent.component.ts | 14 +++--- .../ts/app/countdown-timer.component.ts | 8 ++-- .../ts/app/hero-child.component.ts | 5 +- .../ts/app/hero-parent.component.ts | 7 +-- .../cb-component-communication/ts/app/main.ts | 5 +- .../ts/app/mission.service.ts | 16 +++---- .../ts/app/missioncontrol.component.ts | 9 ++-- .../ts/app/name-child.component.ts | 2 +- .../ts/app/name-parent.component.ts | 5 +- .../ts/app/version-child.component.ts | 2 +- .../ts/app/version-parent.component.ts | 5 +- .../ts/app/voter.component.ts | 2 +- .../ts/app/votetaker.component.ts | 5 +- .../ts/app/date-logger.service.ts | 1 + .../ts/app/hero-bio.component.ts | 12 ++--- .../ts/app/hero-cache.service.ts | 11 +++-- .../ts/app/hero-contact.component.ts | 17 +++---- .../ts/app/hero-data.ts | 2 +- .../ts/app/hero-of-the-month.component.ts | 2 +- .../ts/app/hero.service.ts | 10 ++-- .../ts/app/highlight.directive.ts | 14 +++--- .../ts/app/logger.service.ts | 2 +- .../cb-dependency-injection/ts/app/main.ts | 2 - .../ts/app/runners-up.ts | 7 +-- .../ts/app/sorted-heroes.component.ts | 17 +++---- .../ts/app/user-context.service.ts | 13 ++--- .../ts/app/user.service.ts | 4 +- .../cb-dynamic-form/ts/app/app.component.ts | 7 +-- .../ts/app/dynamic-form-question.component.ts | 7 +-- .../ts/app/dynamic-form.component.ts | 14 +++--- .../_examples/cb-dynamic-form/ts/app/main.ts | 5 +- .../ts/app/question-control.service.ts | 10 ++-- .../ts/app/question-dropdown.ts | 2 +- .../ts/app/question-textbox.ts | 2 +- .../ts/app/question.service.ts | 11 +++-- .../ts/app/app.component.ts | 4 +- .../cb-set-document-title/ts/app/main.ts | 1 + .../cb-ts-to-js/ts/app/data.service.ts | 2 +- .../ts/app/hero-di-inject.component.ts | 2 +- .../cb-ts-to-js/ts/app/hero-di.component.ts | 5 +- .../cb-ts-to-js/ts/app/hero-io.component.ts | 2 +- .../ts/app/hero-lifecycle.component.ts | 2 +- .../cb-ts-to-js/ts/app/hero.component.ts | 2 +- .../ts/app/heroes-bindings.component.ts | 4 +- .../docs/_examples/cb-ts-to-js/ts/app/main.ts | 22 ++++----- .../ts/app/hero-app-main.component.ts | 11 +++-- .../ts/app/hero-app.component.ts | 8 ++-- .../ts/app/hero-controls.component.ts | 4 +- .../ts/app/hero-details.component.ts | 6 +-- .../ts/app/hero-team.component.ts | 4 +- .../_examples/component-styles/ts/app/main.ts | 4 +- .../ts/app/quest-summary.component.ts | 2 +- .../ts/app/app.component.1.ts | 7 +-- .../ts/app/app.component.2.ts | 12 ++--- .../ts/app/app.component.ts | 26 +++++----- .../dependency-injection/ts/app/app.config.ts | 2 +- .../ts/app/car/car-creations.ts | 2 +- .../ts/app/car/car-factory.ts | 2 +- .../ts/app/car/car-injector.ts | 4 +- .../ts/app/car/car-no-di.ts | 2 +- .../ts/app/car/car.component.ts | 9 ++-- .../dependency-injection/ts/app/car/car.ts | 2 +- .../ts/app/heroes/hero-list.component.1.ts | 1 + .../ts/app/heroes/hero-list.component.2.ts | 1 + .../ts/app/heroes/hero-list.component.ts | 1 + .../ts/app/heroes/hero.service.1.ts | 4 +- .../ts/app/heroes/hero.service.2.ts | 13 ++--- .../ts/app/heroes/hero.service.provider.ts | 9 ++-- .../ts/app/heroes/hero.service.ts | 19 ++++---- .../ts/app/heroes/heroes.component.1.ts | 1 + .../ts/app/heroes/heroes.component.ts | 1 + .../ts/app/injector.component.ts | 19 ++++---- .../ts/app/logger.service.ts | 2 +- .../dependency-injection/ts/app/main.1.ts | 6 +-- .../dependency-injection/ts/app/main.ts | 8 ++-- .../ts/app/providers.component.ts | 48 +++++++++---------- .../ts/app/test.component.ts | 9 ++-- .../ts/app/app-ctor.component.ts | 2 +- .../displaying-data/ts/app/app.component.1.ts | 2 +- .../displaying-data/ts/app/app.component.2.ts | 2 +- .../displaying-data/ts/app/app.component.3.ts | 4 +- .../displaying-data/ts/app/app.component.ts | 7 +-- .../displaying-data/ts/app/main.1.ts | 15 +++--- .../_examples/displaying-data/ts/app/main.ts | 5 +- .../_examples/forms/ts/app/app.component.ts | 4 +- .../forms/ts/app/hero-form.component.ts | 5 +- public/docs/_examples/forms/ts/app/main.ts | 5 +- .../ts/app/hero-card.component.ts | 5 +- .../ts/app/hero-editor.component.ts | 7 +-- .../ts/app/heroes-list.component.ts | 13 ++--- .../ts/app/heroes.service.ts | 2 +- .../ts/app/main.ts | 9 ++-- .../ts/app/hello_world.ts | 2 +- .../homepage-hello-world/ts/app/main.ts | 7 +-- .../_examples/homepage-tabs/ts/app/di_demo.ts | 5 +- .../_examples/homepage-tabs/ts/app/main.ts | 5 +- .../_examples/homepage-tabs/ts/app/ui_tabs.ts | 4 +- .../_examples/homepage-todo/ts/app/main.ts | 7 +-- .../homepage-todo/ts/app/todo_app.ts | 9 ++-- .../homepage-todo/ts/app/todo_form.ts | 4 +- .../homepage-todo/ts/app/todo_list.ts | 4 +- .../ts/app/after-content.component.ts | 30 ++++++------ .../ts/app/after-view.component.ts | 28 +++++------ .../lifecycle-hooks/ts/app/app.component.ts | 16 +++---- .../ts/app/counter.component.ts | 14 +++--- .../ts/app/do-check.component.ts | 2 +- .../lifecycle-hooks/ts/app/logger.service.ts | 2 +- .../_examples/lifecycle-hooks/ts/app/main.ts | 5 +- .../ts/app/on-changes.component.ts | 4 +- .../ts/app/peek-a-boo-parent.component.ts | 17 +++---- .../ts/app/peek-a-boo.component.ts | 45 ++++++++--------- .../lifecycle-hooks/ts/app/spy.component.ts | 19 ++++---- .../lifecycle-hooks/ts/app/spy.directive.ts | 13 ++--- .../_examples/pipes/ts/app/app.component.ts | 20 ++++---- .../pipes/ts/app/exponential-strength.pipe.ts | 2 +- .../_examples/pipes/ts/app/fetch-json.pipe.ts | 4 +- .../pipes/ts/app/flying-heroes.component.ts | 9 ++-- .../pipes/ts/app/flying-heroes.pipe.ts | 5 +- .../ts/app/hero-async-message.component.ts | 4 +- .../pipes/ts/app/hero-birthday1.component.ts | 4 +- .../pipes/ts/app/hero-birthday2.component.ts | 2 +- .../pipes/ts/app/hero-list.component.ts | 5 +- public/docs/_examples/pipes/ts/app/main.ts | 4 +- .../app/power-boost-calculator.component.ts | 5 +- .../pipes/ts/app/power-booster.component.ts | 5 +- .../quickstart/ts/app/app.component.ts | 2 +- .../docs/_examples/quickstart/ts/app/main.ts | 5 +- .../app/crisis-center/add-crisis.component.ts | 21 ++++---- .../router/ts/app/app.component.1.ts | 2 +- .../router/ts/app/app.component.2.ts | 6 +-- .../router/ts/app/app.component.3.ts | 4 +- .../crisis-center.component.1.ts | 4 +- .../crisis-center/crisis-center.component.ts | 4 +- .../crisis-detail.component.1.ts | 3 +- .../crisis-center/crisis-detail.component.ts | 4 +- .../crisis-center/crisis-list.component.1.ts | 3 +- .../crisis-center/crisis-list.component.ts | 3 +- .../ts/app/heroes/hero-detail.component.1.ts | 3 +- .../ts/app/heroes/hero-detail.component.ts | 3 +- .../ts/app/heroes/hero-list.component.1.ts | 3 +- .../ts/app/heroes/hero-list.component.ts | 7 +-- public/docs/_examples/router/ts/app/main.2.ts | 4 +- .../ts/app/toh/hero-list.component.1.ts | 12 ++--- .../ts/app/toh/hero-list.component.ts | 13 ++--- .../ts/app/toh/hero.service.1.ts | 14 +++--- .../ts/app/toh/hero.service.ts | 19 ++++---- .../ts/app/toh/toh.component.1.ts | 8 ++-- .../ts/app/wiki/wiki-smart.component.ts | 20 ++++---- .../ts/app/wiki/wiki.component.ts | 14 +++--- .../ts/app/wiki/wikipedia.service.1.ts | 4 +- .../ts/app/wiki/wikipedia.service.ts | 6 +-- .../ts/app/heavy-loader.component.ts | 12 ++--- .../structural-directives/ts/app/main.ts | 5 +- .../ts/app/structural-directives.component.ts | 6 +-- .../ts/app/unless.directive.ts | 12 ++--- .../template-syntax/ts/app/app.component.ts | 32 ++++++------- .../ts/app/decorator.directive.ts | 2 +- .../ts/app/hero-detail.component.ts | 4 +- .../_examples/template-syntax/ts/app/hero.ts | 3 +- .../_examples/template-syntax/ts/app/main.ts | 6 ++- .../ts/app/my-click.directive.ts | 20 ++++---- .../_examples/toh-1/ts/app/app.component.ts | 2 +- public/docs/_examples/toh-1/ts/app/main.ts | 7 +-- .../_examples/toh-2/ts/app/app.component.ts | 2 +- public/docs/_examples/toh-2/ts/app/main.ts | 7 +-- .../_examples/toh-3/ts/app/app.component.ts | 7 +-- .../toh-3/ts/app/hero-detail.component.ts | 6 +-- public/docs/_examples/toh-3/ts/app/main.ts | 7 +-- .../_examples/toh-4/ts/app/app.component.1.ts | 17 +++---- .../_examples/toh-4/ts/app/app.component.ts | 13 ++--- .../toh-4/ts/app/hero-detail.component.ts | 4 +- .../_examples/toh-4/ts/app/hero.service.1.ts | 9 ++-- .../_examples/toh-4/ts/app/hero.service.ts | 8 ++-- public/docs/_examples/toh-4/ts/app/main.1.ts | 7 +-- public/docs/_examples/toh-4/ts/app/main.ts | 7 +-- .../_examples/toh-4/ts/app/mock-heroes.ts | 4 +- .../_examples/toh-5/ts/app/app.component.1.ts | 1 + .../toh-5/ts/app/dashboard.component.1.ts | 1 + .../toh-5/ts/app/dashboard.component.2.ts | 4 +- .../toh-5/ts/app/dashboard.component.ts | 8 ++-- .../toh-5/ts/app/hero-detail.component.ts | 8 ++-- .../toh-5/ts/app/heroes.component.ts | 10 ++-- public/docs/_examples/toh-5/ts/app/main.ts | 3 +- .../tutorial/ts/app/app.component.ts | 13 ++--- .../tutorial/ts/app/dashboard.component.ts | 13 ++--- .../tutorial/ts/app/hero-detail.component.ts | 16 +++---- .../_examples/tutorial/ts/app/hero.service.ts | 5 +- .../tutorial/ts/app/heroes.component.ts | 16 +++---- public/docs/_examples/tutorial/ts/app/main.ts | 9 ++-- .../ts/app/1-2-hybrid-bootstrap/app.module.ts | 2 +- .../app.module.ts | 2 +- .../upgrade_adapter.ts | 2 +- .../ts/app/1-to-2-projection/app.module.ts | 7 +-- .../hero-detail.component.ts | 4 +- .../app/1-to-2-projection/main.controller.ts | 2 +- .../ts/app/1-to-2-providers/app.module.ts | 6 +-- .../1-to-2-providers/hero-detail.component.ts | 6 +-- .../ts/app/1-to-2-providers/heroes.service.ts | 2 +- .../app/1-to-2-providers/upgrade_adapter.ts | 2 +- .../ts/app/2-to-1-providers/app.module.ts | 6 +-- .../2-to-1-providers/hero-detail.component.ts | 2 +- .../ts/app/2-to-1-providers/heroes.ts | 4 +- .../app/2-to-1-providers/upgrade_adapter.ts | 2 +- .../ts/app/2-to-1-transclusion/app.module.ts | 8 ++-- .../container.component.ts | 6 +-- .../2-to-1-transclusion/upgrade_adapter.ts | 2 +- .../ts/app/downgrade-io/app.module.ts | 6 +-- .../app/downgrade-io/hero-detail.component.ts | 2 +- .../ts/app/downgrade-io/main.controller.ts | 2 +- .../ts/app/downgrade-static/app.module.ts | 4 +- .../downgrade-static/hero-detail.component.ts | 2 +- .../ts/app/upgrade-io/app.module.ts | 6 +-- .../ts/app/upgrade-io/container.component.ts | 6 +-- .../ts/app/upgrade-io/upgrade_adapter.ts | 2 +- .../ts/app/upgrade-static/app.module.ts | 6 +-- .../app/upgrade-static/container.component.ts | 4 +- .../ts/app/upgrade-static/upgrade_adapter.ts | 2 +- .../ts/ng2_components/app/js/app.module.ts | 6 +-- .../app/js/core/checkmark.pipe.ts | 2 +- .../ng2_components/app/js/core/core.module.ts | 2 +- .../app/js/core/phones.service.ts | 6 +-- .../app/js/core/upgrade_adapter.ts | 2 +- .../js/phone_detail/phone_detail.component.ts | 6 +-- .../phone_detail_without_pipes.component.ts | 4 +- .../app/js/phone_list/order_by.pipe.ts | 2 +- .../app/js/phone_list/phone_filter.pipe.ts | 4 +- .../app/js/phone_list/phone_list.component.ts | 6 +-- .../phone_list_without_pipes.component.ts | 6 +-- .../ts/ng2_final/app/js/app.component.ts | 5 +- .../ng2_final/app/js/core/checkmark.pipe.ts | 2 +- .../ng2_final/app/js/core/phones.service.ts | 6 +-- .../ng2_final/app/js/core/upgrade_adapter.ts | 2 +- .../ts/ng2_final/app/js/main.ts | 12 ++--- .../js/phone_detail/phone_detail.component.ts | 9 ++-- .../app/js/phone_list/order_by.pipe.ts | 2 +- .../app/js/phone_list/phone_filter.pipe.ts | 4 +- .../app/js/phone_list/phone_list.component.ts | 9 ++-- .../test/unit/checkmark.pipe.spec.ts | 5 +- .../ng2_final/test/unit/order_by.pipe.spec.ts | 2 +- .../test/unit/phone_detail.component.spec.ts | 12 ++--- .../test/unit/phone_filter.pipe.spec.ts | 4 +- .../test/unit/phone_list.component.spec.ts | 16 +++---- .../test/unit/phones.service.spec.ts | 6 +-- .../ts/ng2_initial/app/js/app.module.ts | 4 +- .../ts/ng2_initial/app/js/core/core.module.ts | 2 +- .../ng2_initial/app/js/core/phones.service.ts | 6 +-- .../app/js/core/upgrade_adapter.ts | 2 +- .../phone_detail/phone_detail.controller.ts | 2 +- .../js/phone_list/phone_list.controller.ts | 2 +- .../test/unit/phone_detail.controller.spec.ts | 4 +- .../test/unit/phone_list.controller.spec.ts | 4 +- .../test/unit/phones.service.spec.ts | 6 +-- .../user-input/ts/app/app.component.ts | 14 +++--- .../user-input/ts/app/click-me.component.ts | 2 +- .../user-input/ts/app/click-me2.component.ts | 2 +- .../user-input/ts/app/keyup.components.ts | 2 +- .../ts/app/little-tour.component.ts | 2 +- .../user-input/ts/app/loop-back.component.ts | 2 +- .../docs/_examples/user-input/ts/app/main.ts | 7 +-- .../latest/cookbook/dependency-injection.jade | 10 ++-- .../ts/latest/guide/attribute-directives.jade | 4 +- .../ts/latest/guide/dependency-injection.jade | 6 +-- .../docs/ts/latest/guide/lifecycle-hooks.jade | 8 ++-- public/docs/ts/latest/guide/router.jade | 2 +- .../ts/latest/guide/server-communication.jade | 2 +- public/docs/ts/latest/tutorial/toh-pt4.jade | 10 ++-- public/docs/ts/latest/tutorial/toh-pt5.jade | 2 +- 289 files changed, 1062 insertions(+), 960 deletions(-) diff --git a/public/docs/_examples/architecture/ts/app/app.component.ts b/public/docs/_examples/architecture/ts/app/app.component.ts index 409fde3aa3..930cf5f045 100644 --- a/public/docs/_examples/architecture/ts/app/app.component.ts +++ b/public/docs/_examples/architecture/ts/app/app.component.ts @@ -1,8 +1,8 @@ // #docregion import -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; // #enddocregion import -import {HeroListComponent} from './hero-list.component'; -import {SalesTaxComponent} from './sales-tax.component'; +import { HeroListComponent } from './hero-list.component'; +import { SalesTaxComponent } from './sales-tax.component'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/architecture/ts/app/backend.service.ts b/public/docs/_examples/architecture/ts/app/backend.service.ts index 2170c88758..907a40696e 100644 --- a/public/docs/_examples/architecture/ts/app/backend.service.ts +++ b/public/docs/_examples/architecture/ts/app/backend.service.ts @@ -1,6 +1,7 @@ -import {Injectable, Type} from '@angular/core'; -import {Logger} from './logger.service'; -import {Hero} from './hero'; +import { Injectable, Type } from '@angular/core'; + +import { Logger } from './logger.service'; +import { Hero } from './hero'; const HEROES = [ new Hero('Windstorm', 'Weather mastery'), @@ -10,7 +11,7 @@ const HEROES = [ @Injectable() export class BackendService { - constructor(private _logger: Logger) {} + constructor(private logger: Logger) {} getAll(type:Type) : PromiseLike{ if (type === Hero) { @@ -18,7 +19,7 @@ export class BackendService { return Promise.resolve(HEROES); } let err = new Error('Cannot get object of this type'); - this._logger.error(err); + this.logger.error(err); throw err; } -} \ No newline at end of file +} diff --git a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts index 2a8d23e392..579ef637b0 100644 --- a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts @@ -1,5 +1,6 @@ -import {Component, Input} from '@angular/core'; -import {Hero} from './hero'; +import { Component, Input} from '@angular/core'; + +import { Hero } from './hero'; @Component({ selector: 'hero-detail', diff --git a/public/docs/_examples/architecture/ts/app/hero-list.component.ts b/public/docs/_examples/architecture/ts/app/hero-list.component.ts index 686775eff5..8e4ca9b1ae 100644 --- a/public/docs/_examples/architecture/ts/app/hero-list.component.ts +++ b/public/docs/_examples/architecture/ts/app/hero-list.component.ts @@ -1,8 +1,9 @@ // #docplaster -import {Component, OnInit} from '@angular/core'; -import {Hero} from './hero'; -import {HeroDetailComponent} from './hero-detail.component'; -import {HeroService} from './hero.service'; +import { Component, OnInit } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroDetailComponent } from './hero-detail.component'; +import { HeroService } from './hero.service'; // #docregion metadata // #docregion providers @@ -24,14 +25,14 @@ export class HeroesComponent { ... } // #docregion class export class HeroListComponent implements OnInit { // #docregion ctor - constructor(private _service: HeroService) { } + constructor(private service: HeroService) { } // #enddocregion ctor heroes: Hero[]; selectedHero: Hero; ngOnInit() { - this.heroes = this._service.getHeroes(); + this.heroes = this.service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; } diff --git a/public/docs/_examples/architecture/ts/app/hero.service.ts b/public/docs/_examples/architecture/ts/app/hero.service.ts index 7f524daa4d..d5df3bdf31 100644 --- a/public/docs/_examples/architecture/ts/app/hero.service.ts +++ b/public/docs/_examples/architecture/ts/app/hero.service.ts @@ -1,25 +1,26 @@ -import {Injectable} from '@angular/core'; -import {Hero} from './hero'; -import {BackendService} from './backend.service'; -import {Logger} from './logger.service'; +import { Injectable } from '@angular/core'; + +import { Hero } from './hero'; +import { BackendService } from './backend.service'; +import { Logger } from './logger.service'; @Injectable() // #docregion class export class HeroService { // #docregion ctor constructor( - private _backend: BackendService, - private _logger: Logger) { } + private backend: BackendService, + private logger: Logger) { } // #enddocregion ctor - private _heroes: Hero[] = []; + private heroes: Hero[] = []; getHeroes() { - this._backend.getAll(Hero).then( (heroes: Hero[]) => { - this._logger.log(`Fetched ${heroes.length} heroes.`); - this._heroes.push(...heroes); // fill cache + this.backend.getAll(Hero).then( (heroes: Hero[]) => { + this.logger.log(`Fetched ${heroes.length} heroes.`); + this.heroes.push(...heroes); // fill cache }); - return this._heroes; + return this.heroes; } } // #enddocregion class diff --git a/public/docs/_examples/architecture/ts/app/logger.service.ts b/public/docs/_examples/architecture/ts/app/logger.service.ts index ddbcb61ca7..2d66d202eb 100644 --- a/public/docs/_examples/architecture/ts/app/logger.service.ts +++ b/public/docs/_examples/architecture/ts/app/logger.service.ts @@ -1,5 +1,5 @@ // #docregion -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; @Injectable() // #docregion class diff --git a/public/docs/_examples/architecture/ts/app/main.ts b/public/docs/_examples/architecture/ts/app/main.ts index f5ab51b113..4e8c107afd 100644 --- a/public/docs/_examples/architecture/ts/app/main.ts +++ b/public/docs/_examples/architecture/ts/app/main.ts @@ -1,10 +1,10 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; +import { bootstrap } from '@angular/platform-browser-dynamic'; // #docregion import -import {AppComponent} from './app.component'; +import { AppComponent } from './app.component'; // #enddocregion import -import {HeroService} from './hero.service'; -import {BackendService} from './backend.service'; -import {Logger} from './logger.service'; +import { HeroService } from './hero.service'; +import { BackendService } from './backend.service'; +import { Logger } from './logger.service'; // #docregion bootstrap bootstrap(AppComponent, [BackendService, HeroService, Logger]); diff --git a/public/docs/_examples/architecture/ts/app/sales-tax.component.ts b/public/docs/_examples/architecture/ts/app/sales-tax.component.ts index 19234de171..6d0c668578 100644 --- a/public/docs/_examples/architecture/ts/app/sales-tax.component.ts +++ b/public/docs/_examples/architecture/ts/app/sales-tax.component.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion -import {Component} from '@angular/core'; -import {SalesTaxService} from './sales-tax.service'; -import {TaxRateService} from './tax-rate.service'; +import { Component } from '@angular/core'; + +import { SalesTaxService } from './sales-tax.service'; +import { TaxRateService } from './tax-rate.service'; // #docregion metadata // #docregion providers @@ -12,7 +13,7 @@ import {TaxRateService} from './tax-rate.service'; template: `

    Sales Tax Calculator

    Amount: - +
    The sales tax is {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }} @@ -31,11 +32,11 @@ export class SalesTaxComponent { ... } // #docregion class export class SalesTaxComponent { // #docregion ctor - constructor(private _salesTaxService: SalesTaxService) { } + constructor(private salesTaxService: SalesTaxService) { } // #enddocregion ctor getTax(value:string | number){ - return this._salesTaxService.getVAT(value); + return this.salesTaxService.getVAT(value); } } // #enddocregion class diff --git a/public/docs/_examples/architecture/ts/app/sales-tax.service.ts b/public/docs/_examples/architecture/ts/app/sales-tax.service.ts index 86a797515c..813cb4c9c0 100644 --- a/public/docs/_examples/architecture/ts/app/sales-tax.service.ts +++ b/public/docs/_examples/architecture/ts/app/sales-tax.service.ts @@ -1,11 +1,12 @@ // #docregion -import {Injectable, Inject} from '@angular/core'; -import {TaxRateService} from './tax-rate.service'; +import { Inject, Injectable } from '@angular/core'; + +import { TaxRateService } from './tax-rate.service'; // #docregion class @Injectable() export class SalesTaxService { - constructor(private _rateService: TaxRateService) { } + constructor(private rateService: TaxRateService) { } getVAT(value:string | number){ let amount:number; if (typeof value === "string"){ @@ -13,7 +14,7 @@ export class SalesTaxService { } else { amount = value; } - return (amount || 0) * this._rateService.getRate('VAT'); + return (amount || 0) * this.rateService.getRate('VAT'); } } -// #enddocregion class \ No newline at end of file +// #enddocregion class diff --git a/public/docs/_examples/architecture/ts/app/tax-rate.service.ts b/public/docs/_examples/architecture/ts/app/tax-rate.service.ts index 8e6b9add1e..baaa8f49c7 100644 --- a/public/docs/_examples/architecture/ts/app/tax-rate.service.ts +++ b/public/docs/_examples/architecture/ts/app/tax-rate.service.ts @@ -1,9 +1,9 @@ // #docregion -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; // #docregion class @Injectable() export class TaxRateService { getRate(rateName:string){return 0.10;} // always 10% everywhere } -// #enddocregion class \ No newline at end of file +// #enddocregion class diff --git a/public/docs/_examples/attribute-directives/ts/app/app.component.ts b/public/docs/_examples/attribute-directives/ts/app/app.component.ts index 458e02e08e..15167310c6 100644 --- a/public/docs/_examples/attribute-directives/ts/app/app.component.ts +++ b/public/docs/_examples/attribute-directives/ts/app/app.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {HighlightDirective} from './highlight.directive'; +import { Component } from '@angular/core'; + +import { HighlightDirective } from './highlight.directive'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts index 3d3632272a..afaf652026 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts +++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts @@ -1,5 +1,5 @@ // #docregion -import {Directive, ElementRef, Input} from '@angular/core'; +import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts index 9e7abaab88..8e64391f05 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts +++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts @@ -1,5 +1,5 @@ // #docregion -import {Directive, ElementRef, Input} from '@angular/core'; +import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]', @@ -12,20 +12,20 @@ import {Directive, ElementRef, Input} from '@angular/core'; }) export class HighlightDirective { - + // #docregion ctor - private _el:HTMLElement; - constructor(el: ElementRef) { this._el = el.nativeElement; } + private el:HTMLElement; + constructor(el: ElementRef) { this.el = el.nativeElement; } // #enddocregion ctor // #docregion mouse-methods - onMouseEnter() { this._highlight("yellow"); } - onMouseLeave() { this._highlight(null); } + onMouseEnter() { this.highlight("yellow"); } + onMouseLeave() { this.highlight(null); } - private _highlight(color: string) { - this._el.style.backgroundColor = color; + private highlight(color: string) { + this.el.style.backgroundColor = color; } // #enddocregion mouse-methods } -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts index 2e9d68e9e1..95b79c42ce 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts +++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion full -import {Directive, ElementRef, Input} from '@angular/core'; +import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]', @@ -12,9 +12,9 @@ import {Directive, ElementRef, Input} from '@angular/core'; // #docregion class-1 export class HighlightDirective { - + private _defaultColor = 'red'; - private _el:HTMLElement; + private el:HTMLElement; // #enddocregion class-1 // #enddocregion full /* @@ -37,16 +37,16 @@ export class HighlightDirective { // #enddocregion class-1 // #docregion class-1 - constructor(el: ElementRef) { this._el = el.nativeElement; } + constructor(el: ElementRef) { this.el = el.nativeElement; } // #docregion mouse-enter - onMouseEnter() { this._highlight(this.highlightColor || this._defaultColor); } + onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); } // #enddocregion mouse-enter - onMouseLeave() { this._highlight(null); } + onMouseLeave() { this.highlight(null); } - private _highlight(color:string) { - this._el.style.backgroundColor = color; + private highlight(color:string) { + this.el.style.backgroundColor = color; } } // #enddocregion class-1 -// #enddocregion full \ No newline at end of file +// #enddocregion full diff --git a/public/docs/_examples/attribute-directives/ts/app/main.ts b/public/docs/_examples/attribute-directives/ts/app/main.ts index 1bb870eea0..4fc79adda1 100644 --- a/public/docs/_examples/attribute-directives/ts/app/main.ts +++ b/public/docs/_examples/attribute-directives/ts/app/main.ts @@ -1,5 +1,7 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent); + diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts index e8d95fe134..f2ca099297 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts @@ -1,10 +1,10 @@ -import {Component} from '@angular/core'; -import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; -import {MovieListComponent} from './movie-list.component'; -import {MovieService} from './movie.service'; -import {IMovie} from './movie'; -import {StringSafeDatePipe} from './date.pipe'; +import { MovieListComponent } from './movie-list.component'; +import { MovieService } from './movie.service'; +import { IMovie } from './movie'; +import { StringSafeDatePipe } from './date.pipe'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts index 64a5ab80e5..c04e64247d 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts @@ -1,5 +1,5 @@ -import {Injectable, Pipe} from '@angular/core'; -import {DatePipe} from '@angular/common'; +import { Injectable, Pipe } from '@angular/core'; +import { DatePipe } from '@angular/common'; @Injectable() // #docregion date-pipe diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts index 38cc516baa..52b47899ef 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts @@ -1,5 +1,6 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent); diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts index 87d99f291c..99f0699410 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts @@ -1,11 +1,11 @@ // #docplaster // #docregion import -import {Component} from '@angular/core'; -import {ROUTER_DIRECTIVES} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { ROUTER_DIRECTIVES } from '@angular/router-deprecated'; // #enddocregion import -import {MovieService} from './movie.service'; -import {IMovie} from './movie'; -import {StringSafeDatePipe} from './date.pipe'; +import { MovieService } from './movie.service'; +import { IMovie } from './movie'; +import { StringSafeDatePipe } from './date.pipe'; // #docregion component diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts index 30d283bc68..404fd4454c 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts @@ -1,5 +1,6 @@ -import {Injectable} from '@angular/core'; -import {IMovie} from './movie'; +import { Injectable } from '@angular/core'; + +import { IMovie } from './movie'; @Injectable() export class MovieService { diff --git a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts index 53fd3d4666..5b2442b195 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts @@ -1,11 +1,12 @@ -import {Component} from '@angular/core'; -import {HeroParentComponent} from './hero-parent.component'; -import {NameParentComponent} from './name-parent.component'; -import {VersionParentComponent} from './version-parent.component'; -import {VoteTakerComponent} from './votetaker.component'; -import {CountdownLocalVarParentComponent, - CountdownViewChildParentComponent} from './countdown-parent.component'; -import {MissionControlComponent} from './missioncontrol.component'; +import { Component } from '@angular/core'; + +import { HeroParentComponent } from './hero-parent.component'; +import { NameParentComponent } from './name-parent.component'; +import { VersionParentComponent } from './version-parent.component'; +import { VoteTakerComponent } from './votetaker.component'; +import { CountdownLocalVarParentComponent, + CountdownViewChildParentComponent } from './countdown-parent.component'; +import { MissionControlComponent } from './missioncontrol.component'; let directives: any[] = [ HeroParentComponent, diff --git a/public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts b/public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts index 7f8a195333..7bda2b100f 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts @@ -1,7 +1,8 @@ // #docregion -import {Component, Input, OnDestroy} from '@angular/core'; -import {MissionService} from './mission.service'; -import {Subscription} from 'rxjs/Subscription'; +import { Component, Input, OnDestroy } from '@angular/core'; + +import { MissionService } from './mission.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'my-astronaut', diff --git a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts index 8c9761a442..95425deef2 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts @@ -1,9 +1,9 @@ // #docplaster // #docregion vc -import {AfterViewInit, ViewChild} from '@angular/core'; +import { AfterViewInit, ViewChild } from '@angular/core'; // #docregion lv -import {Component} from '@angular/core'; -import {CountdownTimerComponent} from './countdown-timer.component'; +import { Component } from '@angular/core'; +import { CountdownTimerComponent } from './countdown-timer.component'; // #enddocregion lv // #enddocregion vc @@ -42,7 +42,7 @@ export class CountdownLocalVarParentComponent { } export class CountdownViewChildParentComponent implements AfterViewInit { @ViewChild(CountdownTimerComponent) - private _timerComponent:CountdownTimerComponent; + private timerComponent:CountdownTimerComponent; seconds() { return 0; } @@ -50,10 +50,10 @@ export class CountdownViewChildParentComponent implements AfterViewInit { // Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ... // but wait a tick first to avoid one-time devMode // unidirectional-data-flow-violation error - setTimeout(() => this.seconds = () => this._timerComponent.seconds, 0) + setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0) } - start(){ this._timerComponent.start(); } - stop() { this._timerComponent.stop(); } + start(){ this.timerComponent.start(); } + stop() { this.timerComponent.stop(); } } // #enddocregion vc diff --git a/public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts b/public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts index efd294685c..83f5751d5b 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts @@ -1,5 +1,5 @@ // #docregion -import {Component, OnInit, OnDestroy} from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; @Component({ selector:'countdown-timer', @@ -16,13 +16,13 @@ export class CountdownTimerComponent implements OnInit, OnDestroy { ngOnInit() { this.start(); } ngOnDestroy() { this.clearTimer(); } - start() { this._countDown(); } + start() { this.countDown(); } stop() { this.clearTimer(); this.message = `Holding at T-${this.seconds} seconds`; } - private _countDown() { + private countDown() { this.clearTimer(); this.intervalId = setInterval(()=>{ this.seconds -= 1; @@ -34,4 +34,4 @@ export class CountdownTimerComponent implements OnInit, OnDestroy { } }, 1000); } -} \ No newline at end of file +} diff --git a/public/docs/_examples/cb-component-communication/ts/app/hero-child.component.ts b/public/docs/_examples/cb-component-communication/ts/app/hero-child.component.ts index c33ce43826..7447542a74 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/hero-child.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/hero-child.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component, Input} from '@angular/core'; -import {Hero} from './hero'; +import { Component, Input } from '@angular/core'; + +import { Hero } from './hero'; @Component({ selector: 'hero-child', diff --git a/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts index ef9544c472..6d82f53a4d 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts @@ -1,7 +1,8 @@ // #docregion -import {Component} from '@angular/core'; -import {HeroChildComponent} from './hero-child.component'; -import {HEROES} from './hero'; +import { Component } from '@angular/core'; + +import { HeroChildComponent } from './hero-child.component'; +import { HEROES } from './hero'; @Component({ selector: 'hero-parent', diff --git a/public/docs/_examples/cb-component-communication/ts/app/main.ts b/public/docs/_examples/cb-component-communication/ts/app/main.ts index d14f9ff611..9451f9b495 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/main.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/main.ts @@ -1,4 +1,5 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent); \ No newline at end of file diff --git a/public/docs/_examples/cb-component-communication/ts/app/mission.service.ts b/public/docs/_examples/cb-component-communication/ts/app/mission.service.ts index e754acc1cc..0c284389b6 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/mission.service.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/mission.service.ts @@ -1,25 +1,25 @@ // #docregion -import {Injectable} from '@angular/core' -import {Subject} from 'rxjs/Subject'; +import { Injectable } from '@angular/core' +import { Subject } from 'rxjs/Subject'; @Injectable() export class MissionService { // Observable string sources - private _missionAnnouncedSource = new Subject(); - private _missionConfirmedSource = new Subject(); + private missionAnnouncedSource = new Subject(); + private missionConfirmedSource = new Subject(); // Observable string streams - missionAnnounced$ = this._missionAnnouncedSource.asObservable(); - missionConfirmed$ = this._missionConfirmedSource.asObservable(); + missionAnnounced$ = this.missionAnnouncedSource.asObservable(); + missionConfirmed$ = this.missionConfirmedSource.asObservable(); // Service message commands announceMission(mission: string) { - this._missionAnnouncedSource.next(mission) + this.missionAnnouncedSource.next(mission) } confirmMission(astronaut: string) { - this._missionConfirmedSource.next(astronaut); + this.missionConfirmedSource.next(astronaut); } } // #enddocregion diff --git a/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts b/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts index de13aef360..eff2b229c9 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts @@ -1,7 +1,8 @@ // #docregion -import {Component} from '@angular/core'; -import {AstronautComponent} from './astronaut.component'; -import {MissionService} from './mission.service'; +import { Component } from '@angular/core'; + +import { AstronautComponent } from './astronaut.component'; +import { MissionService } from './mission.service'; @Component({ selector: 'mission-control', @@ -41,4 +42,4 @@ export class MissionControlComponent { if (this.nextMission >= this.missions.length) { this.nextMission = 0; } } } -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/public/docs/_examples/cb-component-communication/ts/app/name-child.component.ts b/public/docs/_examples/cb-component-communication/ts/app/name-child.component.ts index 366a54345d..8e826075b0 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/name-child.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/name-child.component.ts @@ -1,5 +1,5 @@ // #docregion -import {Component, Input} from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'name-child', diff --git a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts index 16a3fbe4a6..aa7382503a 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {NameChildComponent} from './name-child.component'; +import { Component } from '@angular/core'; + +import { NameChildComponent } from './name-child.component'; @Component({ selector: 'name-parent', diff --git a/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts b/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts index 3d5a8a56e7..91f5d547f7 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts @@ -1,6 +1,6 @@ /* tslint:disable:forin */ // #docregion -import {Component, Input, OnChanges, SimpleChange} from '@angular/core'; +import { Component, Input, OnChanges, SimpleChange } from '@angular/core'; @Component({ selector: 'version-child', diff --git a/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts index 8357f97a82..cdb590b87a 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {VersionChildComponent} from './version-child.component'; +import { Component } from '@angular/core'; + +import { VersionChildComponent } from './version-child.component'; @Component({ selector: 'version-parent', diff --git a/public/docs/_examples/cb-component-communication/ts/app/voter.component.ts b/public/docs/_examples/cb-component-communication/ts/app/voter.component.ts index 14a99665e3..c68409a73a 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/voter.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/voter.component.ts @@ -1,5 +1,5 @@ // #docregion -import {Component, EventEmitter, Input, Output} from '@angular/core'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'my-voter', diff --git a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts b/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts index 1101e8a8f7..3e2970b691 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {VoterComponent} from './voter.component'; +import { Component } from '@angular/core'; + +import { VoterComponent } from './voter.component'; @Component({ selector: 'vote-taker', diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts index 67ccbbee30..e5b597db02 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts @@ -1,6 +1,7 @@ /* tslint:disable:one-line:check-open-brace*/ // #docregion import { Injectable } from '@angular/core'; + import { LoggerService } from './logger.service'; // #docregion minimal-logger diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts index 840ca07c09..b4d122bfe4 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts @@ -1,8 +1,8 @@ // #docregion -import {Component, Input, OnInit} from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; -import {Hero} from './hero'; -import {HeroCacheService} from './hero-cache.service'; +import { Hero } from './hero'; +import { HeroCacheService } from './hero-cache.service'; // #docregion component @Component({ @@ -20,10 +20,10 @@ export class HeroBioComponent implements OnInit { @Input() heroId:number; - constructor(private _heroCache:HeroCacheService) { } + constructor(private heroCache:HeroCacheService) { } - ngOnInit() { this._heroCache.fetchCachedHero(this.heroId); } + ngOnInit() { this.heroCache.fetchCachedHero(this.heroId); } - get hero() { return this._heroCache.hero; } + get hero() { return this.heroCache.hero; } } // #enddocregion component diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts index 0f7f48c910..c8e6104666 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts @@ -1,17 +1,18 @@ // #docregion -import {Injectable} from '@angular/core'; -import {Hero} from './hero'; -import {HeroService} from './hero.service'; +import { Injectable } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; // #docregion service @Injectable() export class HeroCacheService { hero:Hero; - constructor(private _heroService:HeroService){} + constructor(private heroService:HeroService){} fetchCachedHero(id:number){ if (!this.hero) { - this.hero = this._heroService.getHeroById(id); + this.hero = this.heroService.getHeroById(id); } return this.hero } diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts index acccaaae2b..a91f01b104 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion -import {Component, ElementRef, Host, Inject, Optional} from '@angular/core'; -import {HeroCacheService} from './hero-cache.service'; -import {LoggerService} from './logger.service'; +import { Component, ElementRef, Host, Inject, Optional } from '@angular/core'; + +import { HeroCacheService } from './hero-cache.service'; +import { LoggerService } from './logger.service'; // #docregion component @Component({ @@ -18,22 +19,22 @@ export class HeroContactComponent { constructor( // #docregion ctor-params @Host() // limit to the host component's instance of the HeroCacheService - private _heroCache: HeroCacheService, + private heroCache: HeroCacheService, @Host() // limit search for logger; hides the application-wide logger @Optional() // ok if the logger doesn't exist - private _loggerService: LoggerService + private loggerService: LoggerService // #enddocregion ctor-params ) { - if (_loggerService) { + if (loggerService) { this.hasLogger = true; - _loggerService.logInfo('HeroContactComponent can log!'); + loggerService.logInfo('HeroContactComponent can log!'); } // #docregion ctor } // #enddocregion ctor - get phoneNumber() { return this._heroCache.hero.phone; } + get phoneNumber() { return this.heroCache.hero.phone; } } // #enddocregion component diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts index 18133fd771..decccdbf72 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts @@ -1,5 +1,5 @@ // #docregion -import {Hero} from './hero'; +import { Hero } from './hero'; export class HeroData { createDb() { diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts index 2a27906215..6b9646d3e9 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts @@ -1,7 +1,7 @@ /* tslint:disable:one-line:check-open-brace*/ // #docplaster // #docregion opaque-token -import {OpaqueToken} from '@angular/core'; +import { OpaqueToken } from '@angular/core'; export const TITLE = new OpaqueToken('title'); // #enddocregion opaque-token diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts index 108ee56eb6..0222f6cd32 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts @@ -1,22 +1,22 @@ // #docregion -import {Injectable} from '@angular/core'; -import {Hero} from './hero'; +import { Injectable } from '@angular/core'; +import { Hero } from './hero'; @Injectable() export class HeroService { //TODO move to database - private _heroes:Array = [ + private heroes:Array = [ new Hero(1, 'RubberMan','Hero of many talents', '123-456-7899'), new Hero(2, 'Magma','Hero of all trades', '555-555-5555'), new Hero(3, 'Mr. Nice','The name says it all','111-222-3333') ]; getHeroById(id:number):Hero{ - return this._heroes.filter(hero => hero.id === id)[0]; + return this.heroes.filter(hero => hero.id === id)[0]; } getAllHeroes():Array{ - return this._heroes; + return this.heroes; } } diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts b/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts index 66e4a2df90..69bd1a1577 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import {Directive, ElementRef, Input} from '@angular/core'; +import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]', @@ -13,16 +13,16 @@ export class HighlightDirective { @Input('myHighlight') highlightColor: string; - private _el: HTMLElement; + private el: HTMLElement; constructor(el: ElementRef) { - this._el = el.nativeElement; + this.el = el.nativeElement; } - onMouseEnter() { this._highlight(this.highlightColor || 'cyan'); } - onMouseLeave() { this._highlight(null); } + onMouseEnter() { this.highlight(this.highlightColor || 'cyan'); } + onMouseLeave() { this.highlight(null); } - private _highlight(color: string) { - this._el.style.backgroundColor = color; + private highlight(color: string) { + this.el.style.backgroundColor = color; } } diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts index bf609d9819..df8ee6b9c7 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts @@ -1,5 +1,5 @@ // #docregion -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; @Injectable() export class LoggerService { diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts index f26f41a7e5..508177e81b 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts @@ -2,9 +2,7 @@ import { bootstrap } from '@angular/platform-browser-dynamic'; import { provide } from '@angular/core'; import { XHRBackend } from '@angular/http'; - import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; - import { LocationStrategy, HashLocationStrategy } from '@angular/common'; diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts b/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts index 4105c1fbcb..0bc3069883 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion -import {OpaqueToken} from '@angular/core'; -import {Hero} from './hero'; -import {HeroService} from './hero.service'; +import { OpaqueToken } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; // #docregion runners-up export const RUNNERS_UP = new OpaqueToken('RunnersUp'); diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts index ac236e3e12..8cb6e3c69c 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion -import {Component, OnInit} from '@angular/core'; -import {Hero} from './hero'; -import {HeroService} from './hero.service'; +import { Component, OnInit } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; /////// HeroesBaseComponent ///// // #docregion heroes-base, injection @@ -12,18 +13,18 @@ import {HeroService} from './hero.service'; providers: [HeroService] }) export class HeroesBaseComponent implements OnInit { - constructor(private _heroService: HeroService) { } + constructor(private heroService: HeroService) { } // #enddocregion injection heroes: Array; ngOnInit() { - this.heroes = this._heroService.getAllHeroes(); - this._afterGetHeroes(); + this.heroes = this.heroService.getAllHeroes(); + this.afterGetHeroes(); } // Post-process heroes in derived class override. - protected _afterGetHeroes() {} + protected afterGetHeroes() {} // #docregion injection } @@ -41,7 +42,7 @@ export class SortedHeroesComponent extends HeroesBaseComponent { super(heroService); } - protected _afterGetHeroes() { + protected afterGetHeroes() { this.heroes = this.heroes.sort((h1, h2) => { return h1.name < h2.name ? -1 : (h1.name > h2.name ? 1 : 0); diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts index c03b768b40..782e65043d 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion -import {Injectable} from '@angular/core'; -import {LoggerService} from './logger.service'; -import {UserService} from './user.service'; +import { Injectable } from '@angular/core'; + +import { LoggerService } from './logger.service'; +import { UserService } from './user.service'; // #docregion injectables, injectable @Injectable() @@ -13,7 +14,7 @@ export class UserContextService { loggedInSince:Date; // #docregion ctor, injectables - constructor(private _userService:UserService, private _loggerService:LoggerService){ + constructor(private userService:UserService, private loggerService:LoggerService){ // #enddocregion ctor, injectables this.loggedInSince = new Date(); // #docregion ctor, injectables @@ -21,11 +22,11 @@ export class UserContextService { // #enddocregion ctor, injectables loadUser(userId:number){ - let user = this._userService.getUserById(userId); + let user = this.userService.getUserById(userId); this.name = user.name; this.role = user.role; - this._loggerService.logDebug('loaded User'); + this.loggerService.logDebug('loaded User'); } // #docregion injectables, injectable } diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts index 8c2e191ec2..d4ca4fda2a 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts @@ -1,5 +1,5 @@ // #docregion -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; @Injectable() export class UserService { @@ -7,4 +7,4 @@ export class UserService { getUserById(userId:number):any{ return {name:'Bombasto',role:'Admin'}; } -} \ No newline at end of file +} diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts index 86c7a786e6..01a5401003 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts @@ -1,7 +1,8 @@ // #docregion -import {Component} from '@angular/core' -import {DynamicForm} from './dynamic-form.component'; -import {QuestionService} from './question.service'; +import { Component } from '@angular/core' + +import { DynamicForm } from './dynamic-form.component'; +import { QuestionService } from './question.service'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts index 2ffee4c636..d039931f61 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts @@ -1,7 +1,8 @@ // #docregion -import {Component, Input} from '@angular/core'; -import {ControlGroup} from '@angular/common'; -import {QuestionBase} from './question-base'; +import { Component, Input } from '@angular/core'; +import { ControlGroup } from '@angular/common'; + +import { QuestionBase } from './question-base'; @Component({ selector:'df-question', diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts index 486179acc9..68aafc839b 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts @@ -1,10 +1,10 @@ // #docregion -import {Component, Input, OnInit} from '@angular/core'; -import {ControlGroup} from '@angular/common'; +import { Component, Input, OnInit } from '@angular/core'; +import { ControlGroup } from '@angular/common'; -import {QuestionBase} from './question-base'; -import {QuestionControlService} from './question-control.service'; -import {DynamicFormQuestionComponent} from './dynamic-form-question.component'; +import { QuestionBase } from './question-base'; +import { QuestionControlService } from './question-control.service'; +import { DynamicFormQuestionComponent } from './dynamic-form-question.component'; @Component({ selector:'dynamic-form', @@ -18,10 +18,10 @@ export class DynamicForm { form: ControlGroup; payLoad = ''; - constructor(private _qcs: QuestionControlService) { } + constructor(private qcs: QuestionControlService) { } ngOnInit(){ - this.form = this._qcs.toControlGroup(this.questions); + this.form = this.qcs.toControlGroup(this.questions); } onSubmit() { diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts b/public/docs/_examples/cb-dynamic-form/ts/app/main.ts index 23bf0638ee..aca0a06056 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/main.ts @@ -1,5 +1,6 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent, []) .catch((err:any) => console.error(err)); diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts index efc30b7add..e95dbff462 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts @@ -1,11 +1,11 @@ // #docregion -import {Injectable} from '@angular/core'; -import {ControlGroup, FormBuilder, Validators} from '@angular/common'; -import {QuestionBase} from './question-base'; +import { Injectable } from '@angular/core'; +import { ControlGroup, FormBuilder, Validators } from '@angular/common'; +import { QuestionBase } from './question-base'; @Injectable() export class QuestionControlService { - constructor(private _fb:FormBuilder){ } + constructor(private fb:FormBuilder){ } toControlGroup(questions:QuestionBase[] ) { let group = {}; @@ -13,6 +13,6 @@ export class QuestionControlService { questions.forEach(question => { group[question.key] = question.required ? [question.value || '', Validators.required] : []; }); - return this._fb.group(group); + return this.fb.group(group); } } diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/question-dropdown.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question-dropdown.ts index 1c3ca2807a..50b5d64a1d 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/question-dropdown.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/question-dropdown.ts @@ -1,5 +1,5 @@ // #docregion -import {QuestionBase} from './question-base'; +import { QuestionBase } from './question-base'; export class DropdownQuestion extends QuestionBase{ controlType = 'dropdown'; diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/question-textbox.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question-textbox.ts index 573209d944..a1c9980de5 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/question-textbox.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/question-textbox.ts @@ -1,5 +1,5 @@ // #docregion -import {QuestionBase} from './question-base'; +import { QuestionBase } from './question-base'; export class TextboxQuestion extends QuestionBase{ controlType = 'textbox'; diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts index 7350e55dd8..52b4fc70ff 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts @@ -1,9 +1,10 @@ // #docregion -import {Injectable} from '@angular/core'; -import {QuestionBase} from './question-base'; -import {DynamicForm} from './dynamic-form.component'; -import {TextboxQuestion} from './question-textbox'; -import {DropdownQuestion} from './question-dropdown'; +import { Injectable } from '@angular/core'; + +import { QuestionBase } from './question-base'; +import { DynamicForm } from './dynamic-form.component'; +import { TextboxQuestion } from './question-textbox'; +import { DropdownQuestion } from './question-dropdown'; @Injectable() export class QuestionService { diff --git a/public/docs/_examples/cb-set-document-title/ts/app/app.component.ts b/public/docs/_examples/cb-set-document-title/ts/app/app.component.ts index 09ed0d77c1..f1905e635d 100644 --- a/public/docs/_examples/cb-set-document-title/ts/app/app.component.ts +++ b/public/docs/_examples/cb-set-document-title/ts/app/app.component.ts @@ -20,10 +20,10 @@ template: }) // #docregion class export class AppComponent { - public constructor(private _titleService: Title ) { } + public constructor(private titleService: Title ) { } public setTitle( newTitle: string) { - this._titleService.setTitle( newTitle ); + this.titleService.setTitle( newTitle ); } } // #enddocregion class diff --git a/public/docs/_examples/cb-set-document-title/ts/app/main.ts b/public/docs/_examples/cb-set-document-title/ts/app/main.ts index f81cd0e262..c5134d3214 100644 --- a/public/docs/_examples/cb-set-document-title/ts/app/main.ts +++ b/public/docs/_examples/cb-set-document-title/ts/app/main.ts @@ -1,5 +1,6 @@ // #docregion import { bootstrap } from '@angular/platform-browser-dynamic'; + import { AppComponent } from './app.component'; // While Angular supplies a Title service for setting the HTML document title diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts index efeb0b27b3..7e9c7456c6 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; @Injectable() export class DataService { diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts index 1b07042a28..5d78a5cbbf 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts @@ -1,4 +1,4 @@ -import {Component, Inject} from '@angular/core'; +import { Component, Inject } from '@angular/core'; // #docregion @Component({ diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts index e0d51596e4..e6b81b6af7 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts @@ -1,5 +1,6 @@ -import {Component} from '@angular/core'; -import {DataService} from './data.service'; +import { Component } from '@angular/core'; + +import { DataService } from './data.service'; // #docregion @Component({ diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts index 7c0ab6e76d..936bf2854e 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts @@ -1,4 +1,4 @@ -import {Component, EventEmitter, Input, Output} from '@angular/core'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; // #docregion @Component({ diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts index a87c895a11..94d79274fc 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import {Component, OnInit} +import { Component, OnInit } from '@angular/core'; // #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts index 10c644bcb6..85d2772c63 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion metadata -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'hero-view', diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts index 6fb4347298..317d434b9d 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts @@ -1,10 +1,10 @@ -import {Component, HostBinding, HostListener} from '@angular/core'; +import { Component, HostBinding, HostListener } from '@angular/core'; // #docregion @Component({ selector: 'heroes-bindings', template: `

    - Tour of Heroes + Tour ofHeroes

    ` }) export class HeroesComponent { diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts index ac116c873b..74befc103d 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts @@ -1,7 +1,7 @@ // #docregion ng2import -import {provide} +import { provide } from '@angular/core'; -import {bootstrap} +import { bootstrap } from '@angular/platform-browser-dynamic'; import { } from '@angular/router'; @@ -12,18 +12,18 @@ import { // #enddocregion ng2import // #docregion appimport -import {HeroComponent} +import { HeroComponent } from './hero.component'; // #enddocregion appimport -import {HeroComponent as HeroLifecycleComponent} from './hero-lifecycle.component'; -import {HeroComponent as HeroDIComponent} from './hero-di.component'; -import {HeroComponent as HeroDIInjectComponent} from './hero-di-inject.component'; -import {AppComponent as AppDIInjectAdditionalComponent} from './hero-di-inject-additional.component'; -import {AppComponent as AppIOComponent} from './hero-io.component'; -import {HeroesComponent as HeroesHostBindingsComponent} from './heroes-bindings.component'; -import {HeroesQueriesComponent} from './heroes-queries.component'; +import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; +import { HeroComponent as HeroDIComponent } from './hero-di.component'; +import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; +import { AppComponent as AppDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; +import { AppComponent as AppIOComponent } from './hero-io.component'; +import { HeroesComponent as HeroesHostBindingsComponent } from './heroes-bindings.component'; +import { HeroesQueriesComponent } from './heroes-queries.component'; -import {DataService} from './data.service'; +import { DataService } from './data.service'; bootstrap(HeroComponent); bootstrap(HeroLifecycleComponent); diff --git a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts index 580ab684f6..fb5b5d9d98 100644 --- a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts +++ b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts @@ -1,8 +1,9 @@ -import {Component, Input} from '@angular/core'; -import {Hero} from './hero'; -import {HeroDetailsComponent} from './hero-details.component'; -import {HeroControlsComponent} from './hero-controls.component'; -import {QuestSummaryComponent} from './quest-summary.component'; +import { Component, Input } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroDetailsComponent } from './hero-details.component'; +import { HeroControlsComponent } from './hero-controls.component'; +import { QuestSummaryComponent } from './quest-summary.component'; @Component({ selector: 'hero-app-main', diff --git a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts index 4978c75565..ebfb7241a4 100644 --- a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts +++ b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts @@ -1,6 +1,6 @@ -import {Component, HostBinding} from '@angular/core'; -import {Hero} from './hero'; -import {HeroAppMainComponent} from './hero-app-main.component'; +import { Component, HostBinding } from '@angular/core'; +import { Hero } from './hero'; +import { HeroAppMainComponent } from './hero-app-main.component'; // #docregion @Component({ @@ -17,7 +17,7 @@ export class HeroAppComponent { 'Human Torch', ['Mister Fantastic', 'Invisible Woman', 'Thing'] ) - + @HostBinding('class') get themeClass() { return 'theme-light'; } diff --git a/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts b/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts index df8883e50f..4abfc369b2 100644 --- a/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts +++ b/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts @@ -1,5 +1,5 @@ -import {Component, Input} from '@angular/core'; -import {Hero} from './hero'; +import { Component, Input } from '@angular/core'; +import { Hero } from './hero'; // #docregion inlinestyles @Component({ diff --git a/public/docs/_examples/component-styles/ts/app/hero-details.component.ts b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts index c271e7413c..f44984cfbd 100644 --- a/public/docs/_examples/component-styles/ts/app/hero-details.component.ts +++ b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts @@ -1,6 +1,6 @@ -import {Component, Input} from '@angular/core'; -import {Hero} from './hero'; -import {HeroTeamComponent} from './hero-team.component'; +import { Component, Input } from '@angular/core'; +import { Hero } from './hero'; +import { HeroTeamComponent } from './hero-team.component'; // #docregion styleurls @Component({ diff --git a/public/docs/_examples/component-styles/ts/app/hero-team.component.ts b/public/docs/_examples/component-styles/ts/app/hero-team.component.ts index 51091599b2..4f092d2827 100644 --- a/public/docs/_examples/component-styles/ts/app/hero-team.component.ts +++ b/public/docs/_examples/component-styles/ts/app/hero-team.component.ts @@ -1,5 +1,5 @@ -import {Component, Input} from '@angular/core'; -import {Hero} from './hero'; +import { Component, Input } from '@angular/core'; +import { Hero } from './hero'; // #docregion stylelink @Component({ diff --git a/public/docs/_examples/component-styles/ts/app/main.ts b/public/docs/_examples/component-styles/ts/app/main.ts index 4c53b4ae7a..1d1e75499c 100644 --- a/public/docs/_examples/component-styles/ts/app/main.ts +++ b/public/docs/_examples/component-styles/ts/app/main.ts @@ -1,4 +1,4 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {HeroAppComponent} from './hero-app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { HeroAppComponent } from './hero-app.component'; bootstrap(HeroAppComponent); diff --git a/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts b/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts index 33d86e2fab..ba363b303e 100644 --- a/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts +++ b/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts @@ -1,6 +1,6 @@ /* tslint:disable:no-unused-variable */ // #docplaster -import {Component, ViewEncapsulation} from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; // #docregion diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts index dda2bfb389..2e16a385dd 100644 --- a/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts +++ b/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts @@ -1,9 +1,10 @@ // Early versions // #docregion -import {Component} from '@angular/core'; -import {CarComponent} from './car/car.component'; -import {HeroesComponent} from './heroes/heroes.component.1'; +import { Component } from '@angular/core'; + +import { CarComponent } from './car/car.component'; +import { HeroesComponent } from './heroes/heroes.component.1'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts index 97bc660e06..b2c17c90ae 100644 --- a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts +++ b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts @@ -1,12 +1,12 @@ // #docregion // #docregion imports -import {Component} from '@angular/core'; -import {CarComponent} from './car/car.component'; -import {HeroesComponent} from './heroes/heroes.component.1'; +import { Component } from '@angular/core'; +import { CarComponent } from './car/car.component'; +import { HeroesComponent } from './heroes/heroes.component.1'; -import {provide, Inject} from '@angular/core'; -import {Config, CONFIG} from './app.config'; -import {Logger} from './logger.service'; +import { provide, Inject } from '@angular/core'; +import { Config, CONFIG } from './app.config'; +import { Logger } from './logger.service'; // #enddocregion imports @Component({ diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.ts index e10afd154f..30f2f5f303 100644 --- a/public/docs/_examples/dependency-injection/ts/app/app.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/app.component.ts @@ -1,20 +1,20 @@ // #docplaster // #docregion // #docregion imports -import {Component, Inject, provide} from '@angular/core'; +import { Component, Inject, provide } from '@angular/core'; -import {CarComponent} from './car/car.component'; -import {HeroesComponent} from './heroes/heroes.component'; +import { CarComponent } from './car/car.component'; +import { HeroesComponent } from './heroes/heroes.component'; -import {APP_CONFIG, - Config, CONFIG} from './app.config'; -import {Logger} from './logger.service'; +import { APP_CONFIG, + Config, CONFIG } from './app.config'; +import { Logger } from './logger.service'; -import {User, UserService} from './user.service'; +import { User, UserService } from './user.service'; // #enddocregion imports -import {InjectorComponent} from './injector.component'; -import {TestComponent} from './test.component'; -import {ProvidersComponent} from './providers.component'; +import { InjectorComponent } from './injector.component'; +import { TestComponent } from './test.component'; +import { ProvidersComponent } from './providers.component'; @Component({ selector: 'my-app', @@ -47,15 +47,15 @@ export class AppComponent { //#docregion ctor constructor( @Inject(APP_CONFIG) config:Config, - private _userService: UserService) { + private userService: UserService) { this.title = config.title; } // #enddocregion ctor get isAuthorized() { return this.user.isAuthorized;} - nextUser() { this._userService.getNewUser(); } - get user() { return this._userService.user; } + nextUser() { this.userService.getNewUser(); } + get user() { return this.userService.user; } get userInfo() { return `Current user, ${this.user.name}, is `+ diff --git a/public/docs/_examples/dependency-injection/ts/app/app.config.ts b/public/docs/_examples/dependency-injection/ts/app/app.config.ts index bf380936ad..0ed6225e86 100644 --- a/public/docs/_examples/dependency-injection/ts/app/app.config.ts +++ b/public/docs/_examples/dependency-injection/ts/app/app.config.ts @@ -1,6 +1,6 @@ //#docregion // #docregion token -import {OpaqueToken} from '@angular/core'; +import { OpaqueToken } from '@angular/core'; export let APP_CONFIG = new OpaqueToken('app.config'); // #enddocregion token diff --git a/public/docs/_examples/dependency-injection/ts/app/car/car-creations.ts b/public/docs/_examples/dependency-injection/ts/app/car/car-creations.ts index b6e56b85eb..2693ba37ca 100644 --- a/public/docs/_examples/dependency-injection/ts/app/car/car-creations.ts +++ b/public/docs/_examples/dependency-injection/ts/app/car/car-creations.ts @@ -1,7 +1,7 @@ // Examples with car and engine variations // #docplaster -import {Car, Engine, Tires} from './car'; +import { Car, Engine, Tires } from './car'; ///////// example 1 //////////// export function simpleCar() { diff --git a/public/docs/_examples/dependency-injection/ts/app/car/car-factory.ts b/public/docs/_examples/dependency-injection/ts/app/car/car-factory.ts index 6d869b6ee3..06daafe63b 100644 --- a/public/docs/_examples/dependency-injection/ts/app/car/car-factory.ts +++ b/public/docs/_examples/dependency-injection/ts/app/car/car-factory.ts @@ -1,5 +1,5 @@ // #docregion -import {Engine, Tires, Car} from './car'; +import { Engine, Tires, Car } from './car'; // BAD pattern! export class CarFactory { diff --git a/public/docs/_examples/dependency-injection/ts/app/car/car-injector.ts b/public/docs/_examples/dependency-injection/ts/app/car/car-injector.ts index 16b81bcd6a..d8e23efe36 100644 --- a/public/docs/_examples/dependency-injection/ts/app/car/car-injector.ts +++ b/public/docs/_examples/dependency-injection/ts/app/car/car-injector.ts @@ -2,8 +2,8 @@ //#docregion import { ReflectiveInjector } from '@angular/core'; -import {Car, Engine, Tires} from './car'; -import {Logger} from '../logger.service'; +import { Car, Engine, Tires } from './car'; +import { Logger } from '../logger.service'; //#docregion injector export function useInjector() { diff --git a/public/docs/_examples/dependency-injection/ts/app/car/car-no-di.ts b/public/docs/_examples/dependency-injection/ts/app/car/car-no-di.ts index 9556bffcab..059dccd4b7 100644 --- a/public/docs/_examples/dependency-injection/ts/app/car/car-no-di.ts +++ b/public/docs/_examples/dependency-injection/ts/app/car/car-no-di.ts @@ -1,5 +1,5 @@ // Car without DI -import {Engine, Tires} from './car'; +import { Engine, Tires } from './car'; //#docregion car export class Car { diff --git a/public/docs/_examples/dependency-injection/ts/app/car/car.component.ts b/public/docs/_examples/dependency-injection/ts/app/car/car.component.ts index 41a45d184d..f9f982ebd0 100644 --- a/public/docs/_examples/dependency-injection/ts/app/car/car.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/car/car.component.ts @@ -1,8 +1,9 @@ // #docregion -import { Component, Injector} from '@angular/core'; -import { Car, Engine, Tires } from './car'; -import { Car as CarNoDi } from './car-no-di'; -import { CarFactory} from './car-factory'; +import { Component, Injector } from '@angular/core'; + +import { Car, Engine, Tires } from './car'; +import { Car as CarNoDi } from './car-no-di'; +import { CarFactory } from './car-factory'; import { testCar, simpleCar, diff --git a/public/docs/_examples/dependency-injection/ts/app/car/car.ts b/public/docs/_examples/dependency-injection/ts/app/car/car.ts index 1895dbdf5f..dd7c76c0f2 100644 --- a/public/docs/_examples/dependency-injection/ts/app/car/car.ts +++ b/public/docs/_examples/dependency-injection/ts/app/car/car.ts @@ -1,5 +1,5 @@ // #docregion -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; // #docregion engine export class Engine { diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.1.ts index 768000da29..a9e0ce66f5 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.1.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.1.ts @@ -1,5 +1,6 @@ // #docregion import { Component } from '@angular/core'; + import { HEROES } from './mock-heroes'; @Component({ diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts index 0909cf45d5..bf0b9be7ff 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts @@ -1,5 +1,6 @@ // #docregion import { Component } from '@angular/core'; + import { Hero } from './hero'; import { HeroService } from './hero.service'; diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts index 88b5ba9a7c..3e2cb4579a 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts @@ -1,5 +1,6 @@ // #docregion import { Component } from '@angular/core'; + import { Hero } from './hero'; import { HeroService } from './hero.service'; diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.1.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.1.ts index ae962bd9b6..1edd6b8582 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.1.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.1.ts @@ -1,6 +1,6 @@ // #docregion -import {Hero} from './hero'; -import {HEROES} from './mock-heroes'; +import { Hero } from './hero'; +import { HEROES } from './mock-heroes'; export class HeroService { getHeroes() { return HEROES; } diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts index e64a81f799..0947d60494 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts @@ -1,18 +1,19 @@ // #docregion -import {Injectable} from '@angular/core'; -import {Hero} from './hero'; -import {HEROES} from './mock-heroes'; -import {Logger} from '../logger.service'; +import { Injectable } from '@angular/core'; + +import { Hero } from './hero'; +import { HEROES } from './mock-heroes'; +import { Logger } from '../logger.service'; @Injectable() export class HeroService { //#docregion ctor - constructor(private _logger: Logger) { } + constructor(private logger: Logger) { } //#enddocregion ctor getHeroes() { - this._logger.log('Getting heroes ...') + this.logger.log('Getting heroes ...') return HEROES; } } diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts index 424b0d1f28..861b0446b0 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts @@ -1,8 +1,9 @@ // #docregion -import {provide} from '@angular/core'; -import {HeroService} from './hero.service'; -import {Logger} from '../logger.service'; -import {UserService} from '../user.service'; +import { provide } from '@angular/core'; + +import { HeroService } from './hero.service'; +import { Logger } from '../logger.service'; +import { UserService } from '../user.service'; // #docregion factory let heroServiceFactory = (logger: Logger, userService: UserService) => { diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts index feee9f14fa..7e84ae5058 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts @@ -1,8 +1,9 @@ // #docregion -import {Injectable} from '@angular/core'; -import {Hero} from './hero'; -import {HEROES} from './mock-heroes'; -import {Logger} from '../logger.service'; +import { Injectable } from '@angular/core'; + +import { Hero } from './hero'; +import { HEROES } from './mock-heroes'; +import { Logger } from '../logger.service'; @Injectable() export class HeroService { @@ -10,13 +11,13 @@ export class HeroService { // #docregion internals constructor( - private _logger: Logger, - private _isAuthorized: boolean) { } + private logger: Logger, + private isAuthorized: boolean) { } getHeroes() { - let auth = this._isAuthorized ? 'authorized ': 'unauthorized'; - this._logger.log(`Getting heroes for ${auth} user.`); - return HEROES.filter(hero => this._isAuthorized || !hero.isSecret); + let auth = this.isAuthorized ? 'authorized ': 'unauthorized'; + this.logger.log(`Getting heroes for ${auth} user.`); + return HEROES.filter(hero => this.isAuthorized || !hero.isSecret); } // #enddocregion internals } diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts index 6504c35f5c..7f431d6d19 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts @@ -2,6 +2,7 @@ // #docregion // #docregion v1 import { Component } from '@angular/core'; + import { HeroListComponent } from './hero-list.component'; // #enddocregion v1 import { HeroService } from './hero.service'; diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts index 89b3c85c03..de46be16c3 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts @@ -1,5 +1,6 @@ // #docregion import { Component } from '@angular/core'; + import { HeroListComponent } from './hero-list.component'; import { heroServiceProvider} from './hero.service.provider'; diff --git a/public/docs/_examples/dependency-injection/ts/app/injector.component.ts b/public/docs/_examples/dependency-injection/ts/app/injector.component.ts index 2c9214cc2b..7938a5b8ed 100644 --- a/public/docs/_examples/dependency-injection/ts/app/injector.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/injector.component.ts @@ -1,11 +1,11 @@ // #docplaster //#docregion -import {Component, Injector} from '@angular/core'; +import { Component, Injector } from '@angular/core'; -import {Car, Engine, Tires} from './car/car'; -import {HeroService} from './heroes/hero.service'; -import {heroServiceProvider} from './heroes/hero.service.provider'; -import {Logger} from './logger.service'; +import { Car, Engine, Tires } from './car/car'; +import { HeroService } from './heroes/hero.service'; +import { heroServiceProvider } from './heroes/hero.service.provider'; +import { Logger } from './logger.service'; //#docregion injector @Component({ @@ -16,21 +16,22 @@ import {Logger} from './logger.service';
    {{hero.name}}
    {{rodent}}
    `, + providers: [Car, Engine, Tires, heroServiceProvider, Logger] }) export class InjectorComponent { - constructor(private _injector: Injector) { } + constructor(private injector: Injector) { } - car:Car = this._injector.get(Car); + car:Car = this.injector.get(Car); //#docregion get-hero-service - heroService:HeroService = this._injector.get(HeroService); + heroService:HeroService = this.injector.get(HeroService); //#enddocregion get-hero-service hero = this.heroService.getHeroes()[0]; get rodent() { - let rous = this._injector.get(ROUS, null); + let rous = this.injector.get(ROUS, null); if (rous) { throw new Error('Aaaargh!') } diff --git a/public/docs/_examples/dependency-injection/ts/app/logger.service.ts b/public/docs/_examples/dependency-injection/ts/app/logger.service.ts index 9d1df91ee4..7efb25ba4d 100644 --- a/public/docs/_examples/dependency-injection/ts/app/logger.service.ts +++ b/public/docs/_examples/dependency-injection/ts/app/logger.service.ts @@ -1,5 +1,5 @@ // #docregion -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; @Injectable() export class Logger { diff --git a/public/docs/_examples/dependency-injection/ts/app/main.1.ts b/public/docs/_examples/dependency-injection/ts/app/main.1.ts index 981a6bef30..a8c48c2d28 100644 --- a/public/docs/_examples/dependency-injection/ts/app/main.1.ts +++ b/public/docs/_examples/dependency-injection/ts/app/main.1.ts @@ -1,6 +1,6 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; -import {HeroService} from './heroes/hero.service'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { AppComponent } from './app.component'; +import { HeroService } from './heroes/hero.service'; //#docregion bootstrap bootstrap(AppComponent, diff --git a/public/docs/_examples/dependency-injection/ts/app/main.ts b/public/docs/_examples/dependency-injection/ts/app/main.ts index 878274eb61..2919d89387 100644 --- a/public/docs/_examples/dependency-injection/ts/app/main.ts +++ b/public/docs/_examples/dependency-injection/ts/app/main.ts @@ -1,9 +1,9 @@ //#docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; -import {ProvidersComponent} from './providers.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { AppComponent } from './app.component'; +import { ProvidersComponent } from './providers.component'; //#docregion bootstrap bootstrap(AppComponent); //#enddocregion bootstrap -bootstrap(ProvidersComponent); \ No newline at end of file +bootstrap(ProvidersComponent); diff --git a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts index 96e2721fe4..e0426ae9d0 100644 --- a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts @@ -1,15 +1,15 @@ // Examples of provider arrays //#docplaster import { Component, Host, Inject, Injectable, - provide, Provider} from '@angular/core'; + provide, Provider } from '@angular/core'; import { APP_CONFIG, - Config, CONFIG } from './app.config'; + Config, CONFIG } from './app.config'; -import { HeroService} from './heroes/hero.service'; -import { heroServiceProvider } from './heroes/hero.service.provider'; -import { Logger } from './logger.service'; -import { User, UserService } from './user.service'; +import { HeroService } from './heroes/hero.service'; +import { heroServiceProvider } from './heroes/hero.service.provider'; +import { Logger } from './logger.service'; +import { User, UserService } from './user.service'; let template = '{{log}}'; @@ -89,10 +89,10 @@ export class ProviderComponent4 { class EvenBetterLogger { logs:string[] = []; - constructor(private _userService: UserService) { } + constructor(private userService: UserService) { } log(message:string){ - message = `Message to ${this._userService.user.name}: ${message}.`; + message = `Message to ${this.userService.user.name}: ${message}.`; console.log(message); this.logs.push(message); } @@ -230,17 +230,17 @@ export class ProviderComponent9a { /* // #docregion provider-9a-ctor-interface // FAIL! Can't inject using the interface as the parameter type - constructor(private _config: Config){ } + constructor(private config: Config){ } // #enddocregion provider-9a-ctor-interface */ // #docregion provider-9a-ctor // @Inject(token) to inject the dependency - constructor(@Inject('app.config') private _config: Config){ } + constructor(@Inject('app.config') private config: Config){ } // #enddocregion provider-9a-ctor ngOnInit() { - this.log = '"app.config" Application title is ' + this._config.title; + this.log = '"app.config" Application title is ' + this.config.title; } } @@ -254,11 +254,11 @@ export class ProviderComponent9a { export class ProviderComponent9b { log: string; // #docregion provider-9b-ctor - constructor(@Inject(APP_CONFIG) private _config: Config){ } + constructor(@Inject(APP_CONFIG) private config: Config){ } // #enddocregion provider-9b-ctor ngOnInit() { - this.log = 'APP_CONFIG Application title is ' + this._config.title; + this.log = 'APP_CONFIG Application title is ' + this.config.title; } } ////////////////////////////////////////// @@ -290,27 +290,27 @@ import {Optional} from '@angular/core'; export class ProviderComponent10b { // #docregion provider-10-ctor log:string; - constructor(@Optional() private _logger:Logger) { } + constructor(@Optional() private logger:Logger) { } // #enddocregion provider-10-ctor ngOnInit() { // #docregion provider-10-logger // No logger? Make one! - if (!this._logger) { - this._logger = { - log: (msg:string)=> this._logger.logs.push(msg), + if (!this.logger) { + this.logger = { + log: (msg:string)=> this.logger.logs.push(msg), logs: [] } - // #enddocregion provider-10-logger - this._logger.log("Optional logger was not available.") - // #docregion provider-10-logger + // #enddocregion provider-10-logger + this.logger.log("Optional logger was not available.") + // #docregion provider-10-logger } // #enddocregion provider-10-logger else { - this._logger.log('Hello from the injected logger.') - this.log = this._logger.logs[0]; + this.logger.log('Hello from the injected logger.') + this.log = this.logger.logs[0]; } - this.log = this._logger.logs[0]; + this.log = this.logger.logs[0]; } } @@ -349,4 +349,4 @@ export class ProviderComponent10b { ProviderComponent10b, ], }) -export class ProvidersComponent { } \ No newline at end of file +export class ProvidersComponent { } diff --git a/public/docs/_examples/dependency-injection/ts/app/test.component.ts b/public/docs/_examples/dependency-injection/ts/app/test.component.ts index 72db98de57..48466c91d2 100644 --- a/public/docs/_examples/dependency-injection/ts/app/test.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/test.component.ts @@ -1,9 +1,10 @@ // Simulate a simple test // Reader should look to the testing chapter for the real thing -import {Component} from '@angular/core'; -import { HeroService } from './heroes/hero.service'; -import { HeroListComponent } from './heroes/hero-list.component'; +import { Component } from '@angular/core'; + +import { HeroService } from './heroes/hero.service'; +import { HeroListComponent } from './heroes/hero-list.component'; @Component({ selector: 'my-tests', @@ -50,4 +51,4 @@ function expect(actual:any) { function it(label:string, test: () => void) { testName = label; test(); -} \ No newline at end of file +} diff --git a/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts b/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts index 103a34d49d..ed59b40b2c 100644 --- a/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts +++ b/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'my-app-ctor', diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.1.ts b/public/docs/_examples/displaying-data/ts/app/app.component.1.ts index 2e676d5b47..1cbeb0f731 100644 --- a/public/docs/_examples/displaying-data/ts/app/app.component.1.ts +++ b/public/docs/_examples/displaying-data/ts/app/app.component.1.ts @@ -1,5 +1,5 @@ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.2.ts b/public/docs/_examples/displaying-data/ts/app/app.component.2.ts index 93aabd17b2..506215b36e 100644 --- a/public/docs/_examples/displaying-data/ts/app/app.component.2.ts +++ b/public/docs/_examples/displaying-data/ts/app/app.component.2.ts @@ -1,5 +1,5 @@ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts index bed5639a27..301343f851 100644 --- a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts +++ b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts @@ -1,7 +1,7 @@ // #docregion -import {Component} from '@angular/core'; +import { Component} from '@angular/core'; // #docregion import-hero -import {Hero} from './hero'; +import { Hero} from './hero'; // #enddocregion import-hero @Component({ diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.ts b/public/docs/_examples/displaying-data/ts/app/app.component.ts index 931ceba823..1ba40c62c9 100644 --- a/public/docs/_examples/displaying-data/ts/app/app.component.ts +++ b/public/docs/_examples/displaying-data/ts/app/app.component.ts @@ -1,9 +1,9 @@ // #docplaster // #docregion final // #docregion imports -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; // #enddocregion imports -import {Hero} from './hero'; +import { Hero } from './hero'; @Component({ selector: 'my-app', @@ -17,7 +17,8 @@ import {Hero} from './hero';
  • // #docregion message -

    There are many heroes!

    +

    There are many heroes!

    // #enddocregion message ` }) diff --git a/public/docs/_examples/displaying-data/ts/app/main.1.ts b/public/docs/_examples/displaying-data/ts/app/main.1.ts index 1027d45de5..2e0a4bc6f4 100644 --- a/public/docs/_examples/displaying-data/ts/app/main.1.ts +++ b/public/docs/_examples/displaying-data/ts/app/main.1.ts @@ -1,10 +1,11 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppCtorComponent} from './app-ctor.component'; -import {AppComponent as v1} from './app.component.1'; -import {AppComponent as v2} from './app.component.2'; -import {AppComponent as v3} from './app.component.3'; +import { bootstrap } from '@angular/platform-browser-dynamic'; -import {AppComponent as final} from './app.component'; +import { AppCtorComponent } from './app-ctor.component'; +import { AppComponent as v1 } from './app.component.1'; +import { AppComponent as v2 } from './app.component.2'; +import { AppComponent as v3 } from './app.component.3'; + +import { AppComponent as final } from './app.component'; // pick one //bootstrap(v1); @@ -13,4 +14,4 @@ import {AppComponent as final} from './app.component'; bootstrap(final); // for doc testing -bootstrap(AppCtorComponent); \ No newline at end of file +bootstrap(AppCtorComponent); diff --git a/public/docs/_examples/displaying-data/ts/app/main.ts b/public/docs/_examples/displaying-data/ts/app/main.ts index 38cc516baa..52b47899ef 100644 --- a/public/docs/_examples/displaying-data/ts/app/main.ts +++ b/public/docs/_examples/displaying-data/ts/app/main.ts @@ -1,5 +1,6 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent); diff --git a/public/docs/_examples/forms/ts/app/app.component.ts b/public/docs/_examples/forms/ts/app/app.component.ts index f6d7a2d3d8..b8551a0520 100644 --- a/public/docs/_examples/forms/ts/app/app.component.ts +++ b/public/docs/_examples/forms/ts/app/app.component.ts @@ -1,6 +1,6 @@ // #docregion -import {Component} from '@angular/core'; -import {HeroFormComponent} from './hero-form.component' +import { Component } from '@angular/core'; +import { HeroFormComponent } from './hero-form.component' @Component({ selector: 'my-app', diff --git a/public/docs/_examples/forms/ts/app/hero-form.component.ts b/public/docs/_examples/forms/ts/app/hero-form.component.ts index 04fbd90e67..c4876d8203 100644 --- a/public/docs/_examples/forms/ts/app/hero-form.component.ts +++ b/public/docs/_examples/forms/ts/app/hero-form.component.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion // #docregion first, final -import {Component} from '@angular/core'; -import {NgForm} from '@angular/common'; +import { Component } from '@angular/core'; +import { NgForm } from '@angular/common'; + import { Hero } from './hero'; @Component({ diff --git a/public/docs/_examples/forms/ts/app/main.ts b/public/docs/_examples/forms/ts/app/main.ts index 1bb870eea0..5338161d66 100644 --- a/public/docs/_examples/forms/ts/app/main.ts +++ b/public/docs/_examples/forms/ts/app/main.ts @@ -1,5 +1,6 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent); diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts index b7416ccd9d..a888168848 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component, Input} from '@angular/core'; -import {Hero} from './hero'; +import { Component, Input } from '@angular/core'; + +import { Hero } from './hero'; @Component({ selector: 'hero-card', diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts index 74ae9222e1..65f0b7f066 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts @@ -1,7 +1,8 @@ // #docregion -import {Component, Input, Output, EventEmitter} from '@angular/core'; -import {RestoreService} from './restore.service'; -import {Hero} from './hero'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +import { RestoreService } from './restore.service'; +import { Hero } from './hero'; @Component({ selector: 'hero-editor', diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts index 7330ed758e..0fef36e205 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts @@ -1,10 +1,11 @@ // #docregion -import {Component} from '@angular/core'; -import {EditItem} from './edit-item'; -import {HeroesService} from './heroes.service'; -import {HeroCardComponent} from './hero-card.component'; -import {HeroEditorComponent} from './hero-editor.component'; -import {Hero} from './hero'; +import { Component } from '@angular/core'; + +import { EditItem } from './edit-item'; +import { HeroesService } from './heroes.service'; +import { HeroCardComponent } from './hero-card.component'; +import { HeroEditorComponent } from './hero-editor.component'; +import { Hero } from './hero'; @Component({ selector: 'heroes-list', diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes.service.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes.service.ts index e4f9e2d213..b863ee7af8 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes.service.ts +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes.service.ts @@ -1,4 +1,4 @@ -import {Hero} from './hero'; +import { Hero } from './hero'; export class HeroesService { heroes: Array = [ diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts index 547806e01a..5a96ae391b 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts @@ -1,7 +1,8 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {HeroesListComponent} from './heroes-list.component'; -import {HeroesService} from './heroes.service'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { HeroesListComponent } from './heroes-list.component'; +import { HeroesService } from './heroes.service'; bootstrap(HeroesListComponent, [HeroesService]) @@ -10,4 +11,4 @@ bootstrap(HeroesListComponent, [HeroesService]) // Don't do this! bootstrap(HeroesListComponent, [HeroesService, RestoreService]) // #enddocregion bad-alternative -*/ \ No newline at end of file +*/ diff --git a/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts b/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts index 6c3969ea7e..67850d5749 100644 --- a/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts +++ b/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts @@ -1,5 +1,5 @@ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ // Declare the tag name in index.html to where the component attaches diff --git a/public/docs/_examples/homepage-hello-world/ts/app/main.ts b/public/docs/_examples/homepage-hello-world/ts/app/main.ts index 7a10b8b99a..625a9c338f 100644 --- a/public/docs/_examples/homepage-hello-world/ts/app/main.ts +++ b/public/docs/_examples/homepage-hello-world/ts/app/main.ts @@ -1,5 +1,6 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {HelloWorld} from './hello_world'; +import { bootstrap } from '@angular/platform-browser-dynamic'; -bootstrap(HelloWorld); \ No newline at end of file +import { HelloWorld } from './hello_world'; + +bootstrap(HelloWorld); diff --git a/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts b/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts index f0e73f9706..1e170bcd6f 100644 --- a/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts +++ b/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts @@ -1,6 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {UiTabs, UiPane} from './ui_tabs'; +import { Component } from '@angular/core'; + +import { UiTabs, UiPane } from './ui_tabs'; class Detail { title: string; diff --git a/public/docs/_examples/homepage-tabs/ts/app/main.ts b/public/docs/_examples/homepage-tabs/ts/app/main.ts index deb3f56527..b7904fd356 100644 --- a/public/docs/_examples/homepage-tabs/ts/app/main.ts +++ b/public/docs/_examples/homepage-tabs/ts/app/main.ts @@ -1,5 +1,6 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {DiDemo} from './di_demo'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { DiDemo } from './di_demo'; bootstrap(DiDemo); diff --git a/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts b/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts index 17c6bc4103..a9798d07e6 100644 --- a/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts +++ b/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts @@ -1,6 +1,6 @@ // #docregion -import {Component, Directive, Input, QueryList, - ViewContainerRef, TemplateRef, ContentChildren} from '@angular/core'; +import { Component, Directive, Input, QueryList, + ViewContainerRef, TemplateRef, ContentChildren } from '@angular/core'; @Directive({ selector: '[ui-pane]' diff --git a/public/docs/_examples/homepage-todo/ts/app/main.ts b/public/docs/_examples/homepage-todo/ts/app/main.ts index 661568820e..1beb139138 100644 --- a/public/docs/_examples/homepage-todo/ts/app/main.ts +++ b/public/docs/_examples/homepage-todo/ts/app/main.ts @@ -1,5 +1,6 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {TodoApp} from './todo_app'; +import { bootstrap } from '@angular/platform-browser-dynamic'; -bootstrap(TodoApp); \ No newline at end of file +import { TodoApp } from './todo_app'; + +bootstrap(TodoApp); diff --git a/public/docs/_examples/homepage-todo/ts/app/todo_app.ts b/public/docs/_examples/homepage-todo/ts/app/todo_app.ts index 99e303a17a..96cb759eeb 100644 --- a/public/docs/_examples/homepage-todo/ts/app/todo_app.ts +++ b/public/docs/_examples/homepage-todo/ts/app/todo_app.ts @@ -1,8 +1,9 @@ // #docregion -import {Component} from '@angular/core'; -import {Todo} from './todo'; -import {TodoList} from './todo_list'; -import {TodoForm} from './todo_form'; +import { Component } from '@angular/core'; + +import { Todo } from './todo'; +import { TodoList } from './todo_list'; +import { TodoForm } from './todo_form'; @Component({ selector: 'todo-app', diff --git a/public/docs/_examples/homepage-todo/ts/app/todo_form.ts b/public/docs/_examples/homepage-todo/ts/app/todo_form.ts index 5e381ed4bf..ecc8596772 100644 --- a/public/docs/_examples/homepage-todo/ts/app/todo_form.ts +++ b/public/docs/_examples/homepage-todo/ts/app/todo_form.ts @@ -1,6 +1,6 @@ // #docregion -import {Component, Output, EventEmitter} from '@angular/core'; -import {Todo} from './todo'; +import { Component, Output, EventEmitter } from '@angular/core'; +import { Todo } from './todo'; @Component({ selector: 'todo-form', diff --git a/public/docs/_examples/homepage-todo/ts/app/todo_list.ts b/public/docs/_examples/homepage-todo/ts/app/todo_list.ts index 68cebb4e4a..bdeff74a27 100644 --- a/public/docs/_examples/homepage-todo/ts/app/todo_list.ts +++ b/public/docs/_examples/homepage-todo/ts/app/todo_list.ts @@ -1,6 +1,6 @@ // #docregion -import {Component, Input} from '@angular/core'; -import {Todo} from './todo'; +import { Component, Input } from '@angular/core'; +import { Todo } from './todo'; @Component({ selector: 'todo-list', diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts index 77b17183e4..834ba650d1 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import {Component, AfterContentChecked, AfterContentInit, ContentChild} from '@angular/core'; +import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core'; import {LoggerService} from './logger.service'; @@ -29,33 +29,33 @@ export class ChildComponent { ` }) // #docregion hooks -export class AfterContentComponent implements AfterContentChecked, AfterContentInit { - private _prevHero = ''; +export class AfterContentComponent implements AfterContentChecked, AfterContentInit { + private prevHero = ''; comment = ''; // Query for a CONTENT child of type `ChildComponent` @ContentChild(ChildComponent) contentChild: ChildComponent; // #enddocregion hooks - constructor(private _logger: LoggerService) { - this._logIt('AfterContent constructor'); + constructor(private logger: LoggerService) { + this.logIt('AfterContent constructor'); } // #docregion hooks ngAfterContentInit() { // viewChild is set after the view has been initialized - this._logIt('AfterContentInit'); - this._doSomething(); + this.logIt('AfterContentInit'); + this.doSomething(); } ngAfterContentChecked() { // viewChild is updated after the view has been checked - if (this._prevHero === this.contentChild.hero) { - this._logIt('AfterContentChecked (no change)'); + if (this.prevHero === this.contentChild.hero) { + this.logIt('AfterContentChecked (no change)'); } else { - this._prevHero = this.contentChild.hero; - this._logIt('AfterContentChecked'); - this._doSomething(); + this.prevHero = this.contentChild.hero; + this.logIt('AfterContentChecked'); + this.doSomething(); } } // #enddocregion hooks @@ -64,14 +64,14 @@ export class AfterContentComponent implements AfterContentChecked, AfterContent // #docregion do-something // This surrogate for real business logic sets the `comment` - private _doSomething() { + private doSomething() { this.comment = this.contentChild.hero.length > 10 ? 'That\'s a long name' : ''; } - private _logIt(method: string) { + private logIt(method: string) { let vc = this.contentChild; let message = `${method}: ${vc ? vc.hero : 'no'} child view`; - this._logger.log(message); + this.logger.log(message); } // #docregion hooks // ... diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts index 66196d54ad..5acf686a59 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import {Component, AfterViewChecked, AfterViewInit, ViewChild} from '@angular/core'; +import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core'; import {LoggerService} from './logger.service'; @@ -34,31 +34,31 @@ export class ChildViewComponent { }) // #docregion hooks export class AfterViewComponent implements AfterViewChecked, AfterViewInit { - private _prevHero = ''; + private prevHero = ''; // Query for a VIEW child of type `ChildViewComponent` @ViewChild(ChildViewComponent) viewChild: ChildViewComponent; // #enddocregion hooks - constructor(private _logger:LoggerService){ - this._logIt('AfterView constructor'); + constructor(private logger:LoggerService){ + this.logIt('AfterView constructor'); } // #docregion hooks ngAfterViewInit() { // viewChild is set after the view has been initialized - this._logIt('AfterViewInit'); - this._doSomething(); + this.logIt('AfterViewInit'); + this.doSomething(); } ngAfterViewChecked() { // viewChild is updated after the view has been checked - if (this._prevHero === this.viewChild.hero) { - this._logIt('AfterViewChecked (no change)'); + if (this.prevHero === this.viewChild.hero) { + this.logIt('AfterViewChecked (no change)'); } else { - this._prevHero = this.viewChild.hero; - this._logIt('AfterViewChecked'); - this._doSomething(); + this.prevHero = this.viewChild.hero; + this.logIt('AfterViewChecked'); + this.doSomething(); } } // #enddocregion hooks @@ -67,7 +67,7 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit { // #docregion do-something // This surrogate for real business logic sets the `comment` - private _doSomething() { + private doSomething() { let c = this.viewChild.hero.length > 10 ? "That's a long name" : ''; if (c !== this.comment) { // Wait a tick because the component's view has already been checked @@ -76,10 +76,10 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit { } // #enddocregion do-something - private _logIt(method:string){ + private logIt(method:string){ let vc = this.viewChild; let message = `${method}: ${vc ? vc.hero:'no'} child view` - this._logger.log(message); + this.logger.log(message); } // #docregion hooks // ... diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts index 8663cdf633..b3d5e45b76 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts @@ -1,13 +1,13 @@ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; -import {AfterContentParentComponent} from './after-content.component'; -import {AfterViewParentComponent} from './after-view.component'; -import {CounterParentComponent} from './counter.component'; -import {DoCheckParentComponent} from './do-check.component'; -import {OnChangesParentComponent} from './on-changes.component'; -import {PeekABooParentComponent} from './peek-a-boo-parent.component'; -import {SpyParentComponent} from './spy.component'; +import { AfterContentParentComponent } from './after-content.component'; +import { AfterViewParentComponent } from './after-view.component'; +import { CounterParentComponent } from './counter.component'; +import { DoCheckParentComponent } from './do-check.component'; +import { OnChangesParentComponent } from './on-changes.component'; +import { PeekABooParentComponent } from './peek-a-boo-parent.component'; +import { SpyParentComponent } from './spy.component'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts index 1c5d3e5cb3..a66b1f4755 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts @@ -4,8 +4,8 @@ import { OnChanges, SimpleChange, } from '@angular/core'; -import {Spy} from './spy.directive'; -import {LoggerService} from './logger.service'; +import { Spy } from './spy.directive'; +import { LoggerService } from './logger.service'; @Component({ selector: 'my-counter', @@ -66,23 +66,23 @@ export class CounterParentComponent { value: number; spyLog: string[] = []; - private _logger: LoggerService; + private logger: LoggerService; constructor(logger: LoggerService) { - this._logger = logger; + this.logger = logger; this.spyLog = logger.logs; this.reset(); } updateCounter() { this.value += 1; - this._logger.tick(); + this.logger.tick(); } reset() { - this._logger.log('-- reset --'); + this.logger.log('-- reset --'); this.value = 0; - this._logger.tick(); + this.logger.tick(); } } diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts index acf604698a..d4120c5b55 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts @@ -1,6 +1,6 @@ /* tslint:disable:forin */ // #docregion -import {Component, DoCheck, OnChanges, Input, SimpleChange, ViewChild} from '@angular/core'; +import { Component, DoCheck, Input, OnChanges, SimpleChange, ViewChild } from '@angular/core'; class Hero { constructor(public name: string) {} diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/logger.service.ts b/public/docs/_examples/lifecycle-hooks/ts/app/logger.service.ts index e345663bfd..5e6e681aa8 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/logger.service.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/logger.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; @Injectable() export class LoggerService { diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts index d593721c00..1e9be2601e 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts @@ -1,4 +1,5 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent).catch(err => console.error(err)); diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts index 8000e803cb..ced0205e86 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts @@ -1,8 +1,8 @@ /* tslint:disable:forin */ // #docregion import { - Component, Input, ViewChild, - OnChanges, SimpleChange + Component, Input, Onchanges, + SimpleChange, ViewChild } from '@angular/core'; diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts index 5d7ff28047..e218dc3fc5 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts @@ -1,7 +1,8 @@ // #docregion -import {Component} from '@angular/core'; -import {PeekABooComponent} from './peek-a-boo.component'; -import {LoggerService} from './logger.service'; +import { Component } from '@angular/core'; + +import { PeekABooComponent } from './peek-a-boo.component'; +import { LoggerService } from './logger.service'; @Component({ selector: 'peek-a-boo-parent', @@ -31,10 +32,10 @@ export class PeekABooParentComponent { hookLog: string[]; heroName = 'Windstorm'; - private _logger: LoggerService; + private logger: LoggerService; constructor(logger: LoggerService) { - this._logger = logger; + this.logger = logger; this.hookLog = logger.logs; } @@ -42,13 +43,13 @@ export class PeekABooParentComponent { this.hasChild = !this.hasChild; if (this.hasChild) { this.heroName = 'Windstorm'; - this._logger.clear(); // clear log on create + this.logger.clear(); // clear log on create } - this._logger.tick(); + this.logger.tick(); } updateHero() { this.heroName += '!'; - this._logger.tick(); + this.logger.tick(); } } diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo.component.ts index 2c6bfd5647..1485f2992a 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo.component.ts @@ -1,12 +1,13 @@ import { - OnChanges, SimpleChange, - OnInit, - DoCheck, - AfterContentInit, AfterContentChecked, - AfterViewInit, + AfterContentInit, AfterViewChecked, - OnDestroy + AfterViewInit, + DoCheck, + OnChanges, + OnDestroy, + OnInit, + SimpleChange } from '@angular/core'; import {Component, Input} from '@angular/core'; import {LoggerService} from './logger.service'; @@ -15,13 +16,13 @@ let nextId = 1; // #docregion ngOnInit export class PeekABoo implements OnInit { - constructor(private _logger: LoggerService) { } + constructor(private logger: LoggerService) { } // implement OnInit's `ngOnInit` method - ngOnInit() { this._logIt(`OnInit`); } + ngOnInit() { this.logIt(`OnInit`); } - protected _logIt(msg: string) { - this._logger.log(`#${nextId++} ${msg}`); + protected logIt(msg: string) { + this.logger.log(`#${nextId++} ${msg}`); } } // #enddocregion ngOnInit @@ -40,13 +41,13 @@ export class PeekABooComponent extends PeekABoo implements OnDestroy { @Input() name: string; - private _verb = 'initialized'; + private verb = 'initialized'; constructor(logger: LoggerService) { super(logger); let is = this.name ? 'is' : 'is not'; - this._logIt(`name ${is} known at construction`); + this.logIt(`name ${is} known at construction`); } // only called for/if there is an @input variable set by parent. @@ -55,30 +56,30 @@ export class PeekABooComponent extends PeekABoo implements for (let propName in changes) { if (propName === 'name') { let name = changes['name'].currentValue; - changesMsgs.push(`name ${this._verb} to "${name}"`); + changesMsgs.push(`name ${this.verb} to "${name}"`); } else { - changesMsgs.push(propName + ' ' + this._verb); + changesMsgs.push(propName + ' ' + this.verb); } } - this._logIt(`OnChanges: ${changesMsgs.join('; ')}`); - this._verb = 'changed'; // next time it will be a change + this.logIt(`OnChanges: ${changesMsgs.join('; ')}`); + this.verb = 'changed'; // next time it will be a change } // Beware! Called frequently! // Called in every change detection cycle anywhere on the page - ngDoCheck() { this._logIt(`DoCheck`); } + ngDoCheck() { this.logIt(`DoCheck`); } - ngAfterContentInit() { this._logIt(`AfterContentInit`); } + ngAfterContentInit() { this.logIt(`AfterContentInit`); } // Beware! Called frequently! // Called in every change detection cycle anywhere on the page - ngAfterContentChecked() { this._logIt(`AfterContentChecked`); } + ngAfterContentChecked() { this.logIt(`AfterContentChecked`); } - ngAfterViewInit() { this._logIt(`AfterViewInit`); } + ngAfterViewInit() { this.logIt(`AfterViewInit`); } // Beware! Called frequently! // Called in every change detection cycle anywhere on the page - ngAfterViewChecked() { this._logIt(`AfterViewChecked`); } + ngAfterViewChecked() { this.logIt(`AfterViewChecked`); } - ngOnDestroy() { this._logIt(`OnDestroy`); } + ngOnDestroy() { this.logIt(`OnDestroy`); } } diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts index d7eef1597e..df7b3a2fb6 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts @@ -1,7 +1,8 @@ // #docregion -import {Component} from '@angular/core'; -import {LoggerService} from './logger.service'; -import {Spy} from './spy.directive'; +import { Component } from '@angular/core'; + +import { LoggerService } from './logger.service'; +import { Spy } from './spy.directive'; @Component({ selector: 'spy-parent', @@ -36,24 +37,24 @@ export class SpyParentComponent { heroes: string[] = ['Windstorm', 'Magneta']; spyLog: string[]; - constructor(private _logger: LoggerService) { - this.spyLog = _logger.logs; + constructor(private logger: LoggerService) { + this.spyLog = logger.logs; } addHero() { if (this.newName.trim()) { this.heroes.push(this.newName.trim()); this.newName = ''; - this._logger.tick(); + this.logger.tick(); } } removeHero(hero: string) { this.heroes.splice(this.heroes.indexOf(hero), 1); - this._logger.tick(); + this.logger.tick(); } reset() { - this._logger.log('-- reset --'); + this.logger.log('-- reset --'); this.heroes.length = 0; - this._logger.tick(); + this.logger.tick(); } } diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/spy.directive.ts b/public/docs/_examples/lifecycle-hooks/ts/app/spy.directive.ts index 5eb311aadf..ba7582ea50 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/spy.directive.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/spy.directive.ts @@ -1,6 +1,7 @@ // #docregion import {Directive, OnInit, OnDestroy} from '@angular/core'; -import {LoggerService} from './logger.service'; + +import {LoggerService} from './logger.service'; let nextId = 1; @@ -10,14 +11,14 @@ let nextId = 1; @Directive({selector: '[mySpy]'}) export class Spy implements OnInit, OnDestroy { - constructor(private _logger: LoggerService) { } + constructor(private logger: LoggerService) { } - ngOnInit() { this._logIt(`onInit`); } + ngOnInit() { this.logIt(`onInit`); } - ngOnDestroy() { this._logIt(`onDestroy`); } + ngOnDestroy() { this.logIt(`onDestroy`); } - private _logIt(msg: string) { - this._logger.log(`Spy #${nextId++} ${msg}`); + private logIt(msg: string) { + this.logger.log(`Spy #${nextId++} ${msg}`); } } // #enddocregion spy-directive diff --git a/public/docs/_examples/pipes/ts/app/app.component.ts b/public/docs/_examples/pipes/ts/app/app.component.ts index 6a823ebd6f..c79c1305df 100644 --- a/public/docs/_examples/pipes/ts/app/app.component.ts +++ b/public/docs/_examples/pipes/ts/app/app.component.ts @@ -1,15 +1,15 @@ // #docregion -import {Component} from '@angular/core'; -import {HTTP_PROVIDERS} from '@angular/http'; +import { Component } from '@angular/core'; +import { HTTP_PROVIDERS } from '@angular/http'; -import {FlyingHeroesComponent, - FlyingHeroesImpureComponent} from './flying-heroes.component'; -import {HeroAsyncMessageComponent} from './hero-async-message.component'; -import {HeroBirthday} from './hero-birthday1.component'; -import {HeroBirthday2} from './hero-birthday2.component'; -import {HeroListComponent} from './hero-list.component'; -import {PowerBooster} from './power-booster.component'; -import {PowerBoostCalculator} from './power-boost-calculator.component'; +import { FlyingHeroesComponent, + FlyingHeroesImpureComponent } from './flying-heroes.component'; +import { HeroAsyncMessageComponent } from './hero-async-message.component'; +import { HeroBirthday } from './hero-birthday1.component'; +import { HeroBirthday2 } from './hero-birthday2.component'; +import { HeroListComponent } from './hero-list.component'; +import { PowerBooster } from './power-booster.component'; +import { PowerBoostCalculator } from './power-boost-calculator.component'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/pipes/ts/app/exponential-strength.pipe.ts b/public/docs/_examples/pipes/ts/app/exponential-strength.pipe.ts index 62ea8b1f24..0a703d7016 100644 --- a/public/docs/_examples/pipes/ts/app/exponential-strength.pipe.ts +++ b/public/docs/_examples/pipes/ts/app/exponential-strength.pipe.ts @@ -1,5 +1,5 @@ // #docregion -import {Pipe, PipeTransform} from '@angular/core'; +import { Pipe, PipeTransform } from '@angular/core'; /* * Raise the value exponentially * Takes an exponent argument that defaults to 1. diff --git a/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts b/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts index c491baaf9e..5a5de3707e 100644 --- a/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts +++ b/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts @@ -1,6 +1,6 @@ // #docregion -import {Pipe, PipeTransform} from '@angular/core'; -import {Http} from '@angular/http'; +import { Pipe, PipeTransform } from '@angular/core'; +import { Http } from '@angular/http'; // #docregion pipe-metadata @Pipe({ diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts index 05a7112149..94323297ba 100644 --- a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts +++ b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts @@ -1,9 +1,10 @@ // #docplaster // #docregion -import {Component} from '@angular/core'; -import {FlyingHeroesPipe, - FlyingHeroesImpurePipe} from './flying-heroes.pipe'; -import {HEROES} from './heroes'; +import { Component } from '@angular/core'; + +import { FlyingHeroesPipe, + FlyingHeroesImpurePipe } from './flying-heroes.pipe'; +import { HEROES } from './heroes'; @Component({ selector: 'flying-heroes', diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts b/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts index 0db0096d4e..3dee7d6757 100644 --- a/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts +++ b/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts @@ -1,7 +1,8 @@ // #docregion // #docregion pure -import {Flyer} from './heroes'; -import {Pipe, PipeTransform} from '@angular/core'; +import { Pipe, PipeTransform } from '@angular/core'; + +import { Flyer } from './heroes'; @Pipe({ name: 'flyingHeroes' }) export class FlyingHeroesPipe implements PipeTransform { diff --git a/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts b/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts index bc77e39f70..6975d0d6d2 100644 --- a/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts +++ b/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts @@ -1,6 +1,6 @@ // #docregion -import {Component} from '@angular/core'; -import {Observable} from 'rxjs/Rx'; +import { Component } from '@angular/core'; +import { Observable } from 'rxjs/Rx'; // Initial view: "Message: " // After 500ms: Message: You are my Hero!" diff --git a/public/docs/_examples/pipes/ts/app/hero-birthday1.component.ts b/public/docs/_examples/pipes/ts/app/hero-birthday1.component.ts index 368d96218e..7e998a33e6 100644 --- a/public/docs/_examples/pipes/ts/app/hero-birthday1.component.ts +++ b/public/docs/_examples/pipes/ts/app/hero-birthday1.component.ts @@ -1,6 +1,6 @@ // Version #1 // #docregion -import {Component} from '@angular/core' +import { Component } from '@angular/core' @Component({ selector: 'hero-birthday', @@ -11,4 +11,4 @@ import {Component} from '@angular/core' export class HeroBirthday { birthday = new Date(1988,3,15); // April 15, 1988 } -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/public/docs/_examples/pipes/ts/app/hero-birthday2.component.ts b/public/docs/_examples/pipes/ts/app/hero-birthday2.component.ts index a0c9f38f71..04fad5e26a 100644 --- a/public/docs/_examples/pipes/ts/app/hero-birthday2.component.ts +++ b/public/docs/_examples/pipes/ts/app/hero-birthday2.component.ts @@ -1,6 +1,6 @@ // Version #2 // #docregion -import {Component} from '@angular/core' +import { Component } from '@angular/core' @Component({ selector: 'hero-birthday2', diff --git a/public/docs/_examples/pipes/ts/app/hero-list.component.ts b/public/docs/_examples/pipes/ts/app/hero-list.component.ts index 788ebe87b0..0b9d8df37e 100644 --- a/public/docs/_examples/pipes/ts/app/hero-list.component.ts +++ b/public/docs/_examples/pipes/ts/app/hero-list.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {FetchJsonPipe} from './fetch-json.pipe'; +import { Component } from '@angular/core'; + +import { FetchJsonPipe } from './fetch-json.pipe'; @Component({ selector: 'hero-list', diff --git a/public/docs/_examples/pipes/ts/app/main.ts b/public/docs/_examples/pipes/ts/app/main.ts index 0e080e0da5..dd9994d2b6 100644 --- a/public/docs/_examples/pipes/ts/app/main.ts +++ b/public/docs/_examples/pipes/ts/app/main.ts @@ -1,6 +1,6 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; +import { bootstrap } from '@angular/platform-browser-dynamic'; import 'rxjs/Rx'; -import {AppComponent} from './app.component'; +import { AppComponent } from './app.component'; bootstrap(AppComponent); diff --git a/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts b/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts index 9421feac64..549056afb1 100644 --- a/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts +++ b/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {ExponentialStrengthPipe} from './exponential-strength.pipe'; +import { Component } from '@angular/core'; + +import { ExponentialStrengthPipe } from './exponential-strength.pipe'; @Component({ selector: 'power-boost-calculator', diff --git a/public/docs/_examples/pipes/ts/app/power-booster.component.ts b/public/docs/_examples/pipes/ts/app/power-booster.component.ts index 59fccfdf27..df753bb572 100644 --- a/public/docs/_examples/pipes/ts/app/power-booster.component.ts +++ b/public/docs/_examples/pipes/ts/app/power-booster.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {ExponentialStrengthPipe} from './exponential-strength.pipe'; +import { Component } from '@angular/core'; + +import { ExponentialStrengthPipe } from './exponential-strength.pipe'; @Component({ selector: 'power-booster', diff --git a/public/docs/_examples/quickstart/ts/app/app.component.ts b/public/docs/_examples/quickstart/ts/app/app.component.ts index c06649ce5b..c8a4288719 100644 --- a/public/docs/_examples/quickstart/ts/app/app.component.ts +++ b/public/docs/_examples/quickstart/ts/app/app.component.ts @@ -1,6 +1,6 @@ // #docregion // #docregion import -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; // #enddocregion import // #docregion metadata diff --git a/public/docs/_examples/quickstart/ts/app/main.ts b/public/docs/_examples/quickstart/ts/app/main.ts index b4af948a35..433fd05c80 100644 --- a/public/docs/_examples/quickstart/ts/app/main.ts +++ b/public/docs/_examples/quickstart/ts/app/main.ts @@ -1,7 +1,8 @@ // #docregion -import {bootstrap} from '@angular/platform-browser-dynamic'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + // #docregion app-component -import {AppComponent} from './app.component'; +import { AppComponent } from './app.component'; // #enddocregion app-component bootstrap(AppComponent); diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/add-crisis.component.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/add-crisis.component.ts index ac7fe55f7c..5067e8aa3f 100644 --- a/public/docs/_examples/router-deprecated/ts/app/crisis-center/add-crisis.component.ts +++ b/public/docs/_examples/router-deprecated/ts/app/crisis-center/add-crisis.component.ts @@ -1,7 +1,8 @@ -import {Component} from '@angular/core'; -import {Crisis, CrisisService} from './crisis.service'; -import {DialogService} from '../dialog.service'; -import {CanDeactivate, ComponentInstruction, Router} from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { CanDeactivate, ComponentInstruction, Router } from '@angular/router-deprecated'; + +import { Crisis, CrisisService } from './crisis.service'; +import { DialogService } from '../dialog.service'; @Component({ template: ` @@ -19,23 +20,23 @@ export class AddCrisisComponent implements CanDeactivate { editName: string; constructor( - private _service: CrisisService, - private _router: Router, - private _dialog: DialogService) { } + private service: CrisisService, + private router: Router, + private dialog: DialogService) { } routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) { return !!this.editName.trim() || - this._dialog.confirm('Discard changes?'); + this.dialog.confirm('Discard changes?'); } cancel() { this.gotoCrises(); } save() { - this._service.addCrisis(this.editName); + this.service.addCrisis(this.editName); this.gotoCrises(); } gotoCrises() { - this._router.navigate(['CrisisCenter']); + this.router.navigate(['CrisisCenter']); } } \ No newline at end of file diff --git a/public/docs/_examples/router/ts/app/app.component.1.ts b/public/docs/_examples/router/ts/app/app.component.1.ts index 274bb61909..a041cb2198 100644 --- a/public/docs/_examples/router/ts/app/app.component.1.ts +++ b/public/docs/_examples/router/ts/app/app.component.1.ts @@ -3,7 +3,7 @@ // #docregion import { Component } from '@angular/core'; -import { Routes, ROUTER_DIRECTIVES } from '@angular/router'; +import { ROUTER_DIRECTIVES, Routes } from '@angular/router'; import { CrisisListComponent } from './crisis-list.component'; import { HeroListComponent } from './hero-list.component'; diff --git a/public/docs/_examples/router/ts/app/app.component.2.ts b/public/docs/_examples/router/ts/app/app.component.2.ts index f50d0435a8..5cbe9b1e7e 100644 --- a/public/docs/_examples/router/ts/app/app.component.2.ts +++ b/public/docs/_examples/router/ts/app/app.component.2.ts @@ -3,7 +3,7 @@ // #docregion import { Component, OnInit } from '@angular/core'; -import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router'; +import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router'; import { CrisisListComponent } from './crisis-list.component'; // #enddocregion @@ -11,15 +11,15 @@ import { CrisisListComponent } from './crisis-list.component'; // Apparent Milestone 2 imports // #docregion // #docregion hero-import - import { HeroListComponent } from './heroes/hero-list.component'; import { HeroDetailComponent } from './heroes/hero-detail.component'; + import { HeroListComponent } from './heroes/hero-list.component'; import { HeroService } from './heroes/hero.service'; // #enddocregion hero-import // #enddocregion */ // Actual Milestone 2 imports -import { HeroListComponent } from './heroes/hero-list.component.1'; import { HeroDetailComponent } from './heroes/hero-detail.component.1'; +import { HeroListComponent } from './heroes/hero-list.component.1'; import { HeroService } from './heroes/hero.service'; // #docregion diff --git a/public/docs/_examples/router/ts/app/app.component.3.ts b/public/docs/_examples/router/ts/app/app.component.3.ts index 928b374475..b44db38fc6 100644 --- a/public/docs/_examples/router/ts/app/app.component.3.ts +++ b/public/docs/_examples/router/ts/app/app.component.3.ts @@ -1,11 +1,11 @@ /* tslint:disable:no-unused-variable */ // #docplaster import { Component, OnInit } from '@angular/core'; -import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router'; +import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router'; import { CrisisCenterComponent } from './crisis-center/crisis-center.component.1'; -import { HeroListComponent } from './heroes/hero-list.component.1'; import { HeroDetailComponent } from './heroes/hero-detail.component.1'; +import { HeroListComponent } from './heroes/hero-list.component.1'; import { DialogService } from './dialog.service'; import { HeroService } from './heroes/hero.service'; diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts index 05f429401a..d195a4a162 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; -import { Routes, ROUTER_DIRECTIVES } from '@angular/router'; +import { ROUTER_DIRECTIVES, Routes } from '@angular/router'; -import { CrisisListComponent } from './crisis-list.component.1'; import { CrisisDetailComponent } from './crisis-detail.component.1'; +import { CrisisListComponent } from './crisis-list.component.1'; import { CrisisService } from './crisis.service'; // #docregion minus-imports diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts index 427ef1ed79..73cee8baac 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts @@ -1,9 +1,9 @@ // #docregion import { Component } from '@angular/core'; -import { Routes, ROUTER_DIRECTIVES } from '@angular/router'; +import { ROUTER_DIRECTIVES, Routes } from '@angular/router'; -import { CrisisListComponent } from './crisis-list.component'; import { CrisisDetailComponent } from './crisis-detail.component'; +import { CrisisListComponent } from './crisis-list.component'; import { CrisisService } from './crisis.service'; @Component({ diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts index ca77bed356..9ac3df8eb8 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion import { Component } from '@angular/core'; +import { OnActivate, Router, RouteSegment } from '@angular/router'; + import { Crisis, CrisisService } from './crisis.service'; -import { Router, OnActivate, RouteSegment } from '@angular/router'; // #docregion routerCanDeactivate // import { CanDeactivate } from '@angular/router'; import { DialogService } from '../dialog.service'; diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts index 8f0263438a..f01712d64e 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion import { Component } from '@angular/core'; +import { CanDeactivate, OnActivate, Router, RouteSegment } from '@angular/router'; + import { Crisis, CrisisService } from './crisis.service'; -import { Router, OnActivate, CanDeactivate, RouteSegment } from '@angular/router'; import { DialogService } from '../dialog.service'; @Component({ @@ -60,6 +61,7 @@ export class CrisisDetailComponent implements OnActivate, CanDeactivate { } cancel() { + this.editName = this.crisis.name; this.gotoCrises(); } diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts index 429cb432a7..7c78a63bf6 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion import { Component } from '@angular/core'; +import { OnActivate, Router, RouteSegment } from '@angular/router'; + import { Crisis, CrisisService } from './crisis.service'; -import { Router, OnActivate, RouteSegment } from '@angular/router'; @Component({ // #docregion template diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts index 5a34dcf263..d6f99ff4b5 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts @@ -1,8 +1,9 @@ // #docplaster // #docregion import { Component } from '@angular/core'; +import { OnActivate, Router, RouteSegment, RouteTree } from '@angular/router'; + import { Crisis, CrisisService } from './crisis.service'; -import { Router, OnActivate, RouteSegment, RouteTree } from '@angular/router'; @Component({ template: ` diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts index bb503b748d..eecc838ab3 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts @@ -1,7 +1,8 @@ // #docregion import { Component } from '@angular/core'; +import { OnActivate, Router, RouteSegment } from '@angular/router'; + import { Hero, HeroService } from './hero.service'; -import { Router, OnActivate, RouteSegment } from '@angular/router'; @Component({ template: ` diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts index e1befcc981..21ab9fba8c 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts @@ -1,7 +1,8 @@ // #docregion import { Component } from '@angular/core'; +import { OnActivate, Router, RouteSegment } from '@angular/router'; + import { Hero, HeroService } from './hero.service'; -import { Router, OnActivate, RouteSegment } from '@angular/router'; @Component({ template: ` diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts index 47015ba5e1..967ca97ccb 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts @@ -2,8 +2,9 @@ // #docregion // TODO SOMEDAY: Feature Componetized like HeroCenter import {Component, OnInit} from '@angular/core'; +import {Router} from '@angular/router'; + import {Hero, HeroService} from './hero.service'; -import {Router} from '@angular/router-deprecated'; @Component({ // #docregion template diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts index ef9466dbeb..00361ac9fe 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts @@ -2,10 +2,11 @@ // #docregion // TODO SOMEDAY: Feature Componetized like CrisisCenter import { Component } from '@angular/core'; +// #docregion import-router +import { OnActivate, Router, RouteSegment, RouteTree } from '@angular/router'; +// #enddocregion import-router + import { Hero, HeroService} from './hero.service'; -// #docregion import-route-params -import { Router, RouteSegment, Tree, OnActivate, RouteTree } from '@angular/router'; -// #enddocregion import-route-params @Component({ // #docregion template diff --git a/public/docs/_examples/router/ts/app/main.2.ts b/public/docs/_examples/router/ts/app/main.2.ts index a26f927fef..3b604f1aca 100644 --- a/public/docs/_examples/router/ts/app/main.2.ts +++ b/public/docs/_examples/router/ts/app/main.2.ts @@ -7,12 +7,12 @@ import { bootstrap } from '@angular/platform-browser-dynamic'; import { ROUTER_PROVIDERS } from '@angular/router'; -import { AppComponent } from './app.component'; - // Add these symbols to override the `LocationStrategy` import { provide } from '@angular/core'; import { LocationStrategy, HashLocationStrategy } from '@angular/common'; + +import { AppComponent } from './app.component'; // #enddocregion /* Can't use AppComponent ... but display as if we can // #docregion diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts index b12c7c0b7b..b9ac4ade37 100644 --- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts +++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts @@ -1,8 +1,8 @@ // ToH Promise Version // #docregion -import {Component, OnInit} from '@angular/core'; -import {Hero} from './hero'; -import {HeroService} from './hero.service.1'; +import { Component, OnInit } from '@angular/core'; +import { Hero } from './hero'; +import { HeroService } from './hero.service.1'; @Component({ selector: 'hero-list', @@ -12,7 +12,7 @@ import {HeroService} from './hero.service.1'; // #docregion component export class HeroListComponent implements OnInit { - constructor (private _heroService: HeroService) {} + constructor (private heroService: HeroService) {} errorMessage: string; heroes: Hero[]; @@ -21,7 +21,7 @@ export class HeroListComponent implements OnInit { // #docregion methods getHeroes() { - this._heroService.getHeroes() + this.heroService.getHeroes() .then( heroes => this.heroes = heroes, error => this.errorMessage = error); @@ -29,7 +29,7 @@ export class HeroListComponent implements OnInit { addHero (name: string) { if (!name) {return;} - this._heroService.addHero(name) + this.heroService.addHero(name) .then( hero => this.heroes.push(hero), error => this.errorMessage = error); diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts index 1387de477a..67a7b4f0de 100644 --- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts +++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts @@ -1,7 +1,8 @@ // #docregion -import {Component, OnInit} from '@angular/core'; -import {Hero} from './hero'; -import {HeroService} from './hero.service'; +import { Component, OnInit } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; @Component({ selector: 'hero-list', @@ -11,7 +12,7 @@ import {HeroService} from './hero.service'; // #docregion component export class HeroListComponent implements OnInit { - constructor (private _heroService: HeroService) {} + constructor (private heroService: HeroService) {} errorMessage: string; heroes:Hero[]; @@ -21,7 +22,7 @@ export class HeroListComponent implements OnInit { // #docregion methods // #docregion getHeroes getHeroes() { - this._heroService.getHeroes() + this.heroService.getHeroes() .subscribe( heroes => this.heroes = heroes, error => this.errorMessage = error); @@ -31,7 +32,7 @@ export class HeroListComponent implements OnInit { // #docregion addHero addHero (name: string) { if (!name) {return;} - this._heroService.addHero(name) + this.heroService.addHero(name) .subscribe( hero => this.heroes.push(hero), error => this.errorMessage = error); diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts index 3f2d7f868b..04b7c476a6 100644 --- a/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts +++ b/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts @@ -2,21 +2,21 @@ // #docplaster // #docregion -import {Injectable} from '@angular/core'; -import {Http, Response} from '@angular/http'; -import {Headers, RequestOptions} from '@angular/http'; -import {Hero} from './hero'; +import { Injectable } from '@angular/core'; +import { Http, Response } from '@angular/http'; +import { Headers, RequestOptions } from '@angular/http'; +import { Hero } from './hero'; @Injectable() export class HeroService { constructor (private http: Http) {} // URL to web api - private _heroesUrl = 'app/heroes.json'; + private heroesUrl = 'app/heroes.json'; // #docregion methods getHeroes (): Promise { - return this.http.get(this._heroesUrl) + return this.http.get(this.heroesUrl) .toPromise() .then(this.extractData) .catch(this.handleError); @@ -27,7 +27,7 @@ export class HeroService { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); - return this.http.post(this._heroesUrl, body, options) + return this.http.post(this.heroesUrl, body, options) .toPromise() .then(this.extractData) .catch(this.handleError); diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts index faa04c2475..bab15e21e1 100644 --- a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts +++ b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts @@ -2,15 +2,16 @@ // #docregion // #docregion v1 -import {Injectable} from '@angular/core'; -import {Http, Response} from '@angular/http'; +import { Injectable } from '@angular/core'; +import { Http, Response } from '@angular/http'; // #enddocregion v1 // #docregion import-request-options -import {Headers, RequestOptions} from '@angular/http'; +import { Headers, RequestOptions } from '@angular/http'; // #enddocregion import-request-options // #docregion v1 -import {Hero} from './hero'; -import {Observable} from 'rxjs/Observable'; + +import { Hero } from './hero'; +import { Observable } from 'rxjs/Observable'; @Injectable() export class HeroService { @@ -20,20 +21,20 @@ export class HeroService { /* // #docregion endpoint-json - private _heroesUrl = 'app/heroes.json'; // URL to JSON file + private heroesUrl = 'app/heroes.json'; // URL to JSON file // #enddocregion endpoint-json */ // #docregion // #docregion v1 // #docregion endpoint - private _heroesUrl = 'app/heroes'; // URL to web api + private heroesUrl = 'app/heroes'; // URL to web api // #enddocregion endpoint // #docregion methods // #docregion error-handling, http-get getHeroes (): Observable { - return this.http.get(this._heroesUrl) + return this.http.get(this.heroesUrl) .map(this.extractData) .catch(this.handleError); } @@ -48,7 +49,7 @@ export class HeroService { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); - return this.http.post(this._heroesUrl, body, options) + return this.http.post(this.heroesUrl, body, options) // #enddocregion headers .map(this.extractData) .catch(this.handleError); diff --git a/public/docs/_examples/server-communication/ts/app/toh/toh.component.1.ts b/public/docs/_examples/server-communication/ts/app/toh/toh.component.1.ts index 3603550d37..f66bebc427 100644 --- a/public/docs/_examples/server-communication/ts/app/toh/toh.component.1.ts +++ b/public/docs/_examples/server-communication/ts/app/toh/toh.component.1.ts @@ -3,16 +3,14 @@ console.log ('Promise version'); import { Component } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; - -import { HeroListComponent } from './hero-list.component.1'; -import { HeroService } from './hero.service.1'; - import { provide } from '@angular/core'; import { XHRBackend } from '@angular/http'; - import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api/core'; + import { HeroData } from '../hero-data'; +import { HeroListComponent } from './hero-list.component.1'; +import { HeroService } from './hero.service.1'; @Component({ selector: 'my-toh', diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts index f34b72d4de..a91f03124b 100644 --- a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts +++ b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts @@ -1,12 +1,12 @@ // #docregion -import {Component} from '@angular/core'; -import {JSONP_PROVIDERS} from '@angular/http'; -import {Observable} from 'rxjs/Observable'; +import { Component } from '@angular/core'; +import { JSONP_PROVIDERS } from '@angular/http'; +import { Observable } from 'rxjs/Observable'; // #docregion import-subject -import {Subject} from 'rxjs/Subject'; +import { Subject } from 'rxjs/Subject'; // #enddocregion import-subject -import {WikipediaService} from './wikipedia.service'; +import { WikipediaService } from './wikipedia.service'; @Component({ selector: 'my-wiki-smart', @@ -24,18 +24,18 @@ import {WikipediaService} from './wikipedia.service'; }) export class WikiSmartComponent { - constructor (private _wikipediaService: WikipediaService) { } + constructor (private wikipediaService: WikipediaService) { } // #docregion subject - private _searchTermStream = new Subject(); + private searchTermStream = new Subject(); - search(term:string) { this._searchTermStream.next(term); } + search(term:string) { this.searchTermStream.next(term); } // #enddocregion subject // #docregion observable-operators - items:Observable = this._searchTermStream + items:Observable = this.searchTermStream .debounceTime(300) .distinctUntilChanged() - .switchMap((term:string) => this._wikipediaService.search(term)); + .switchMap((term:string) => this.wikipediaService.search(term)); // #enddocregion observable-operators } diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts index fa88a0bda6..5a764cbc52 100644 --- a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts +++ b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts @@ -1,9 +1,9 @@ // #docregion -import {Component} from '@angular/core'; -import {JSONP_PROVIDERS} from '@angular/http'; -import {Observable} from 'rxjs/Observable'; +import { Component } from '@angular/core'; +import { JSONP_PROVIDERS } from '@angular/http'; +import { Observable } from 'rxjs/Observable'; -import {WikipediaService} from './wikipedia.service'; +import { WikipediaService } from './wikipedia.service'; @Component({ selector: 'my-wiki', @@ -12,7 +12,7 @@ import {WikipediaService} from './wikipedia.service';

    Fetches after each keystroke

    - +
    • {{item}}
    @@ -21,11 +21,11 @@ import {WikipediaService} from './wikipedia.service'; }) export class WikiComponent { - constructor (private _wikipediaService: WikipediaService) {} + constructor (private wikipediaService: WikipediaService) {} items: Observable; search (term: string) { - this.items = this._wikipediaService.search(term); + this.items = this.wikipediaService.search(term); } } diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts index 7556163e71..f57bbf06d3 100644 --- a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts +++ b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts @@ -1,7 +1,7 @@ // Create the query string by hand // #docregion -import {Injectable} from '@angular/core'; -import {Jsonp} from '@angular/http'; +import { Injectable } from '@angular/core'; +import { Jsonp } from '@angular/http'; @Injectable() export class WikipediaService { diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts index 161fdf9fe7..3333c29cfb 100644 --- a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts +++ b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts @@ -1,6 +1,6 @@ // #docregion -import {Injectable} from '@angular/core'; -import {Jsonp, URLSearchParams} from '@angular/http'; +import { Injectable } from '@angular/core'; +import { Jsonp, URLSearchParams } from '@angular/http'; @Injectable() export class WikipediaService { @@ -12,7 +12,7 @@ export class WikipediaService { // #docregion search-parameters var params = new URLSearchParams(); - params.set('search', term); // the user's search value +params.set('search', term); // the user's search value params.set('action', 'opensearch'); params.set('format', 'json'); params.set('callback', 'JSONP_CALLBACK'); diff --git a/public/docs/_examples/structural-directives/ts/app/heavy-loader.component.ts b/public/docs/_examples/structural-directives/ts/app/heavy-loader.component.ts index 4e66f7866e..8272048b96 100644 --- a/public/docs/_examples/structural-directives/ts/app/heavy-loader.component.ts +++ b/public/docs/_examples/structural-directives/ts/app/heavy-loader.component.ts @@ -1,5 +1,5 @@ // #docregion -import {Component, Input, Output} from '@angular/core'; +import { Component, Input, Output } from '@angular/core'; let nextId = 1; @@ -13,23 +13,23 @@ export class HeavyLoaderComponent { ngOnInit() { // Mock todo: get 10,000 rows of data from the server - this._log(`heavy-loader ${this.id} initialized, + this.log(`heavy-loader ${this.id} initialized, loading 10,000 rows of data from the server`); } ngOnDestroy() { // Mock todo: clean-up - this._log(`heavy-loader ${this.id} destroyed, cleaning up`); + this.log(`heavy-loader ${this.id} destroyed, cleaning up`); } - private _log(msg: string) { + private log(msg: string) { this.logs.push(msg); - this._tick(); + this.tick(); } // Triggers the next round of Angular change detection // after one turn of the browser event loop // ensuring display of msg added in onDestroy - private _tick() { setTimeout(() => { }, 0); } + private tick() { setTimeout(() => { }, 0); } } // #enddocregion diff --git a/public/docs/_examples/structural-directives/ts/app/main.ts b/public/docs/_examples/structural-directives/ts/app/main.ts index bc7a18d255..5f5b5aeb19 100644 --- a/public/docs/_examples/structural-directives/ts/app/main.ts +++ b/public/docs/_examples/structural-directives/ts/app/main.ts @@ -1,4 +1,5 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {StructuralDirectivesComponent} from './structural-directives.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { StructuralDirectivesComponent } from './structural-directives.component'; bootstrap(StructuralDirectivesComponent); diff --git a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts index 3f21d50037..4620905568 100644 --- a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts +++ b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts @@ -1,8 +1,8 @@ // #docplaster // #docregion -import {Component, Input, Output} from '@angular/core'; -import {UnlessDirective} from './unless.directive'; -import {HeavyLoaderComponent} from './heavy-loader.component'; +import { Component, Input, Output } from '@angular/core'; +import { UnlessDirective } from './unless.directive'; +import { HeavyLoaderComponent } from './heavy-loader.component'; @Component({ selector: 'structural-directives', diff --git a/public/docs/_examples/structural-directives/ts/app/unless.directive.ts b/public/docs/_examples/structural-directives/ts/app/unless.directive.ts index bc8464f0d6..105fdde4ae 100644 --- a/public/docs/_examples/structural-directives/ts/app/unless.directive.ts +++ b/public/docs/_examples/structural-directives/ts/app/unless.directive.ts @@ -1,10 +1,10 @@ // #docplaster // #docregion // #docregion unless-declaration -import {Directive, Input} from '@angular/core'; +import { Directive, Input } from '@angular/core'; // #enddocregion unless-declaration -import {TemplateRef, ViewContainerRef} from '@angular/core'; +import { TemplateRef, ViewContainerRef } from '@angular/core'; // #docregion unless-declaration @Directive({ selector: '[myUnless]' }) @@ -13,17 +13,17 @@ export class UnlessDirective { // #docregion unless-constructor constructor( - private _templateRef: TemplateRef, - private _viewContainer: ViewContainerRef + private templateRef: TemplateRef, + private viewContainer: ViewContainerRef ) { } // #enddocregion unless-constructor // #docregion unless-set @Input() set myUnless(condition: boolean) { if (!condition) { - this._viewContainer.createEmbeddedView(this._templateRef); + this.viewContainer.createEmbeddedView(this.templateRef); } else { - this._viewContainer.clear(); + this.viewContainer.clear(); } } // #enddocregion unless-set diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.ts b/public/docs/_examples/template-syntax/ts/app/app.component.ts index e9343da91a..1333f9c24d 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts @@ -1,11 +1,11 @@ //#docplaster -import {Component, AfterViewInit, ElementRef, OnInit, QueryList, ViewChildren} from '@angular/core'; -import {NgForm} from '@angular/common'; +import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core'; +import { NgForm } from '@angular/common'; -import {Hero} from './hero'; -import {HeroDetailComponent, BigHeroDetailComponent} from './hero-detail.component'; -import {MyClickDirective, MyClickDirective2} from './my-click.directive'; +import { Hero } from './hero'; +import { HeroDetailComponent, BigHeroDetailComponent } from './hero-detail.component'; +import { MyClickDirective, MyClickDirective2 } from './my-click.directive'; // Alerter fn: monkey patch during test export function alerter(msg?:string) { @@ -32,7 +32,7 @@ export class AppComponent implements AfterViewInit, OnInit { } ngAfterViewInit() { - this._detectNgForTrackByEffects(); + this.detectNgForTrackByEffects(); } actionName = 'Go for it'; @@ -53,9 +53,9 @@ export class AppComponent implements AfterViewInit, OnInit { deleteHero(hero:Hero){ this.alert('Deleted hero: '+ (hero && hero.firstName)) } - + // DevMode memoization fields - private _priorClasses:{}; + private priorClasses:{}; private _priorStyles:{}; private _priorStyles2:{}; @@ -119,10 +119,10 @@ export class AppComponent implements AfterViewInit, OnInit { // #enddocregion refresh-heroes // #docregion same-as-it-ever-was - private _samenessCount = 5; - moreOfTheSame() {this._samenessCount++;}; + private samenessCount = 5; + moreOfTheSame() {this.samenessCount++;}; get sameAsItEverWas() { - var result:string[] = Array(this._samenessCount); + var result:string[] = Array(this.samenessCount); for (var i=result.length; i-- > 0;){result[i]='same as it ever was ...'} return result; // return [1,2,3,4,5].map(id => { @@ -145,10 +145,10 @@ export class AppComponent implements AfterViewInit, OnInit { } // #enddocregion setClasses // compensate for DevMode (sigh) - if (JSON.stringify(classes) === JSON.stringify(this._priorClasses)){ - return this._priorClasses; + if (JSON.stringify(classes) === JSON.stringify(this.priorClasses)){ + return this.priorClasses; } - this._priorClasses = classes; + this.priorClasses = classes; // #docregion setClasses return classes; } @@ -209,7 +209,7 @@ export class AppComponent implements AfterViewInit, OnInit { heroesNoTrackByChangeCount = 0; heroesWithTrackByChangeCount = 0; - private _detectNgForTrackByEffects() { + private detectNgForTrackByEffects() { this._oldNoTrackBy = toArray(this.childrenNoTrackBy); this._oldWithTrackBy = toArray(this.childrenWithTrackBy); @@ -241,4 +241,4 @@ function toArray(viewChildren:QueryList) { let children = viewChildren.toArray()[0].nativeElement.children; for (var i = 0; i < children.length; i++) { result.push(children[i]); } return result; -} \ No newline at end of file +} diff --git a/public/docs/_examples/template-syntax/ts/app/decorator.directive.ts b/public/docs/_examples/template-syntax/ts/app/decorator.directive.ts index 694d8b2f5e..a7e9c7d93c 100644 --- a/public/docs/_examples/template-syntax/ts/app/decorator.directive.ts +++ b/public/docs/_examples/template-syntax/ts/app/decorator.directive.ts @@ -1,6 +1,6 @@ // Useful for spying on an element // for fun; not used (yet) -import {Directive, ElementRef} from '@angular/core'; +import { Directive, ElementRef } from '@angular/core'; // set the selector for the element type to spy on. @Directive({selector: 'select'}) diff --git a/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts b/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts index 52901e4413..b613fa63b4 100644 --- a/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts @@ -1,7 +1,7 @@ // #docplaster -import {Component, Input, Output, EventEmitter} from '@angular/core'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; -import {Hero} from './hero'; +import { Hero } from './hero'; let nextHeroDetailId = 1; diff --git a/public/docs/_examples/template-syntax/ts/app/hero.ts b/public/docs/_examples/template-syntax/ts/app/hero.ts index b576908b96..aca1fd5a72 100644 --- a/public/docs/_examples/template-syntax/ts/app/hero.ts +++ b/public/docs/_examples/template-syntax/ts/app/hero.ts @@ -8,7 +8,8 @@ export class Hero { public url?:string, public rate:number = 100, id?:number) { - this.id = id != null ? id : Hero.nextId++; + + this.id = id != null ? id : Hero.nextId++; } static clone({firstName, lastName, birthdate, url, rate, id} : Hero){ diff --git a/public/docs/_examples/template-syntax/ts/app/main.ts b/public/docs/_examples/template-syntax/ts/app/main.ts index fb12d36bb3..19551339f8 100644 --- a/public/docs/_examples/template-syntax/ts/app/main.ts +++ b/public/docs/_examples/template-syntax/ts/app/main.ts @@ -1,3 +1,5 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; + bootstrap(AppComponent); \ No newline at end of file diff --git a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts b/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts index e461c77283..4b2b23b5cf 100644 --- a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts +++ b/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts @@ -1,20 +1,20 @@ // #docplaster -import {Directive, Output, ElementRef, EventEmitter} from '@angular/core'; +import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; @Directive({selector:'[myClick]'}) export class MyClickDirective { // #docregion my-click-output-1 @Output('myClick') clicks = new EventEmitter(); // @Output(alias) propertyName = ... // #enddocregion my-click-output-1 - + constructor(el: ElementRef){ el.nativeElement .addEventListener('click', (event:Event) => { - this._toggle = !this._toggle; - this.clicks.emit(this._toggle ? 'Click!' : ''); + this.toggle = !this.toggle; + this.clicks.emit(this.toggle ? 'Click!' : ''); }); } - _toggle = false; + toggle = false; } // #docregion my-click-output-2 @@ -27,13 +27,13 @@ export class MyClickDirective { // #enddocregion my-click-output-2 export class MyClickDirective2 { clicks = new EventEmitter(); - + constructor(el: ElementRef){ el.nativeElement .addEventListener('click', (event:Event) => { - this._toggle = !this._toggle; - this.clicks.emit(this._toggle ? 'Click2!' : ''); + this.toggle = !this.toggle; + this.clicks.emit(this.toggle ? 'Click2!' : ''); }); } - _toggle = false; -} \ No newline at end of file + toggle = false; +} diff --git a/public/docs/_examples/toh-1/ts/app/app.component.ts b/public/docs/_examples/toh-1/ts/app/app.component.ts index 242a81a8e6..b3cd4e8f55 100644 --- a/public/docs/_examples/toh-1/ts/app/app.component.ts +++ b/public/docs/_examples/toh-1/ts/app/app.component.ts @@ -1,5 +1,5 @@ // #docregion pt1 -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; // #docregion hero-class-1 export class Hero { diff --git a/public/docs/_examples/toh-1/ts/app/main.ts b/public/docs/_examples/toh-1/ts/app/main.ts index a5e9aa55ae..dae4ddf676 100644 --- a/public/docs/_examples/toh-1/ts/app/main.ts +++ b/public/docs/_examples/toh-1/ts/app/main.ts @@ -1,6 +1,7 @@ // #docregion pt1 -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent); -// #enddocregion pt1 \ No newline at end of file +// #enddocregion pt1 diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts index 38c03395d5..2dee49f08c 100644 --- a/public/docs/_examples/toh-2/ts/app/app.component.ts +++ b/public/docs/_examples/toh-2/ts/app/app.component.ts @@ -1,5 +1,5 @@ // #docregion pt2 -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; export class Hero { id: number; diff --git a/public/docs/_examples/toh-2/ts/app/main.ts b/public/docs/_examples/toh-2/ts/app/main.ts index a5e9aa55ae..dae4ddf676 100644 --- a/public/docs/_examples/toh-2/ts/app/main.ts +++ b/public/docs/_examples/toh-2/ts/app/main.ts @@ -1,6 +1,7 @@ // #docregion pt1 -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent); -// #enddocregion pt1 \ No newline at end of file +// #enddocregion pt1 diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts index 2a0cb20cae..9fc4f99910 100644 --- a/public/docs/_examples/toh-3/ts/app/app.component.ts +++ b/public/docs/_examples/toh-3/ts/app/app.component.ts @@ -1,10 +1,11 @@ //#docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; + // #docregion hero-import -import {Hero} from './hero'; +import { Hero } from './hero'; // #enddocregion hero-import // #docregion hero-detail-import -import {HeroDetailComponent} from './hero-detail.component'; +import { HeroDetailComponent } from './hero-detail.component'; // #enddocregion hero-detail-import @Component({ diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts index 017256c0d9..1192359265 100644 --- a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts @@ -1,17 +1,17 @@ // #docplaster // #docregion // #docregion v1 -import {Component, Input} from '@angular/core'; +import { Component, Input } from '@angular/core'; // #enddocregion v1 // #docregion hero-import -import {Hero} from './hero'; +import { Hero } from './hero'; // #enddocregion hero-import // #docregion v1 @Component({ selector: 'my-hero-detail', -// #enddocregion v1 +// #enddocregion v1 // #docregion template template: `
    diff --git a/public/docs/_examples/toh-3/ts/app/main.ts b/public/docs/_examples/toh-3/ts/app/main.ts index a5e9aa55ae..dae4ddf676 100644 --- a/public/docs/_examples/toh-3/ts/app/main.ts +++ b/public/docs/_examples/toh-3/ts/app/main.ts @@ -1,6 +1,7 @@ // #docregion pt1 -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; + +import { AppComponent } from './app.component'; bootstrap(AppComponent); -// #enddocregion pt1 \ No newline at end of file +// #enddocregion pt1 diff --git a/public/docs/_examples/toh-4/ts/app/app.component.1.ts b/public/docs/_examples/toh-4/ts/app/app.component.1.ts index 254a3af91f..42558a8a4b 100644 --- a/public/docs/_examples/toh-4/ts/app/app.component.1.ts +++ b/public/docs/_examples/toh-4/ts/app/app.component.1.ts @@ -1,13 +1,14 @@ // #docplaster // #docregion on-init -import {OnInit} from '@angular/core'; +import { OnInit } from '@angular/core'; // #enddocregion on-init -import {Component} from '@angular/core'; -import {Hero} from './hero'; -import {HeroDetailComponent} from './hero-detail.component'; +import { Component } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroDetailComponent } from './hero-detail.component'; // #docregion hero-service-import -import {HeroService} from './hero.service.1'; +import { HeroService } from './hero.service.1'; // #enddocregion hero-service-import // Testable but never shown @@ -37,12 +38,12 @@ export class AppComponent implements OnInit { heroService = new HeroService(); // don't do this // #enddocregion new-service // #docregion ctor - constructor(private _heroService: HeroService) { } + constructor(private heroService: HeroService) { } // #enddocregion ctor // #docregion getHeroes getHeroes() { //#docregion get-heroes - this.heroes = this._heroService.getHeroes(); + this.heroes = this.heroService.getHeroes(); // #enddocregion get-heroes } // #enddocregion getHeroes @@ -61,4 +62,4 @@ export class AppComponent implements OnInit { // #docregion on-init } // #enddocregion on-init -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts index 5087ea012b..9b0de3caeb 100644 --- a/public/docs/_examples/toh-4/ts/app/app.component.ts +++ b/public/docs/_examples/toh-4/ts/app/app.component.ts @@ -1,10 +1,11 @@ // #docplaster // #docregion -import {Component, OnInit} from '@angular/core'; -import {Hero} from './hero'; -import {HeroDetailComponent} from './hero-detail.component'; +import { Component, OnInit } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroDetailComponent } from './hero-detail.component'; // #docregion hero-service-import -import {HeroService} from './hero.service'; +import { HeroService } from './hero.service'; // #enddocregion hero-service-import @Component({ @@ -80,11 +81,11 @@ export class AppComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; - constructor(private _heroService: HeroService) { } + constructor(private heroService: HeroService) { } // #docregion get-heroes getHeroes() { - this._heroService.getHeroes().then(heroes => this.heroes = heroes); + this.heroService.getHeroes().then(heroes => this.heroes = heroes); } // #enddocregion get-heroes diff --git a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts index 4f14867356..80d6ca020c 100644 --- a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts @@ -1,6 +1,6 @@ // #docregion -import {Component, Input} from '@angular/core'; -import {Hero} from './hero'; +import { Component, Input } from '@angular/core'; +import { Hero } from './hero'; @Component({ selector: 'my-hero-detail', diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts index 23dde3546d..1374cb25fd 100644 --- a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts +++ b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts @@ -1,9 +1,12 @@ // #docplaster // #docregion -import {HEROES} from './mock-heroes'; // #docregion empty-class -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; +// #enddocregion empty-class +import { HEROES } from './mock-heroes'; + +// #docregion empty-class // #docregion getHeroes-stub @Injectable() export class HeroService { @@ -17,4 +20,4 @@ export class HeroService { } // #enddocregion getHeroes-stub // #enddocregion empty-class -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.ts b/public/docs/_examples/toh-4/ts/app/hero.service.ts index 10137658b2..181745489f 100644 --- a/public/docs/_examples/toh-4/ts/app/hero.service.ts +++ b/public/docs/_examples/toh-4/ts/app/hero.service.ts @@ -1,10 +1,10 @@ // #docplaster // #docregion // #docregion just-get-heroes -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; -import {Hero} from './hero'; -import {HEROES} from './mock-heroes'; +import { Hero } from './hero'; +import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { @@ -25,4 +25,4 @@ export class HeroService { // #docregion just-get-heroes } // #enddocregion just-get-heroes -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/public/docs/_examples/toh-4/ts/app/main.1.ts b/public/docs/_examples/toh-4/ts/app/main.1.ts index 8f122d2f62..f8cf0497d6 100644 --- a/public/docs/_examples/toh-4/ts/app/main.1.ts +++ b/public/docs/_examples/toh-4/ts/app/main.1.ts @@ -1,4 +1,5 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component.1'; +import { bootstrap } from '@angular/platform-browser-dynamic'; -bootstrap(AppComponent); \ No newline at end of file +import { AppComponent } from './app.component.1'; + +bootstrap(AppComponent); diff --git a/public/docs/_examples/toh-4/ts/app/main.ts b/public/docs/_examples/toh-4/ts/app/main.ts index 07a96da44b..42dbeb9f7d 100644 --- a/public/docs/_examples/toh-4/ts/app/main.ts +++ b/public/docs/_examples/toh-4/ts/app/main.ts @@ -1,4 +1,5 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; -bootstrap(AppComponent); \ No newline at end of file +import { AppComponent } from './app.component'; + +bootstrap(AppComponent); diff --git a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts index 617bab5410..35fa5c67a8 100644 --- a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts +++ b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts @@ -1,5 +1,5 @@ // #docregion -import {Hero} from './hero'; +import { Hero } from './hero'; export var HEROES: Hero[] = [ {"id": 11, "name": "Mr. Nice"}, @@ -13,4 +13,4 @@ export var HEROES: Hero[] = [ {"id": 19, "name": "Magma"}, {"id": 20, "name": "Tornado"} ]; -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/app.component.1.ts b/public/docs/_examples/toh-5/ts/app/app.component.1.ts index 65fe5d5826..b35870af20 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.1.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.1.ts @@ -1,6 +1,7 @@ // #docplaster // #docregion import { Component } from '@angular/core'; + import { HeroService } from './hero.service'; import { HeroesComponent } from './heroes.component'; // #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts index 3c92b205c8..430a30ebbe 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts @@ -6,3 +6,4 @@ import { Component } from '@angular/core'; template: '

    My Dashboard

    ' }) export class DashboardComponent { } + diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts index cb32fdff21..3825a7625c 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts @@ -15,10 +15,10 @@ export class DashboardComponent implements OnInit { heroes: Hero[] = []; - constructor(private _heroService: HeroService) { } + constructor(private heroService: HeroService) { } ngOnInit() { - this._heroService.getHeroes() + this.heroService.getHeroes() .then(heroes => this.heroes = heroes.slice(1,5)); } diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts index 455e4b4159..64489ff312 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -24,20 +24,20 @@ export class DashboardComponent implements OnInit { // #docregion ctor constructor( - private _router: Router, - private _heroService: HeroService) { + private router: Router, + private heroService: HeroService) { } // #enddocregion ctor ngOnInit() { - this._heroService.getHeroes() + this.heroService.getHeroes() .then(heroes => this.heroes = heroes.slice(1,5)); } // #docregion goto-detail gotoDetail(hero: Hero) { let link = ['HeroDetail', { id: hero.id }]; - this._router.navigate(link); + this.router.navigate(link); } // #enddocregion goto-detail } diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts index 31d689f772..08af69c69c 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts @@ -31,17 +31,17 @@ export class HeroDetailComponent implements OnInit { // #docregion ctor constructor( - private _heroService: HeroService, - private _routeParams: RouteParams) { + private heroService: HeroService, + private routeParams: RouteParams) { } // #enddocregion ctor // #docregion ng-oninit ngOnInit() { // #docregion get-id - let id = +this._routeParams.get('id'); + let id = +this.routeParams.get('id'); // #enddocregion get-id - this._heroService.getHero(id) + this.heroService.getHero(id) .then(hero => this.hero = hero); } // #enddocregion ng-oninit diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts index 0061e43f73..6567c899d9 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts @@ -27,11 +27,11 @@ export class HeroesComponent implements OnInit { selectedHero: Hero; constructor( - private _router: Router, - private _heroService: HeroService) { } + private router: Router, + private heroService: HeroService) { } getHeroes() { - this._heroService.getHeroes().then(heroes => this.heroes = heroes); + this.heroService.getHeroes().then(heroes => this.heroes = heroes); } ngOnInit() { @@ -41,10 +41,10 @@ export class HeroesComponent implements OnInit { onSelect(hero: Hero) { this.selectedHero = hero; } gotoDetail() { - this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]); + this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]); } // #docregion heroes-component-renaming } // #enddocregion heroes-component-renaming // #enddocregion class -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts index 50c5c6ab84..ad256f0823 100644 --- a/public/docs/_examples/toh-5/ts/app/main.ts +++ b/public/docs/_examples/toh-5/ts/app/main.ts @@ -1,4 +1,5 @@ import { bootstrap } from '@angular/platform-browser-dynamic'; + import { AppComponent } from './app.component'; -bootstrap(AppComponent); \ No newline at end of file +bootstrap(AppComponent); diff --git a/public/docs/_examples/tutorial/ts/app/app.component.ts b/public/docs/_examples/tutorial/ts/app/app.component.ts index 1ef1457bd0..8b0e0ad8da 100644 --- a/public/docs/_examples/tutorial/ts/app/app.component.ts +++ b/public/docs/_examples/tutorial/ts/app/app.component.ts @@ -1,9 +1,10 @@ -import {Component} from '@angular/core'; -import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; -import {HeroesComponent} from './heroes.component'; -import {HeroDetailComponent} from './hero-detail.component'; -import {DashboardComponent} from './dashboard.component'; -import {HeroService} from './hero.service'; +import { Component } from '@angular/core'; +import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; + +import { HeroesComponent } from './heroes.component'; +import { HeroDetailComponent } from './hero-detail.component'; +import { DashboardComponent } from './dashboard.component'; +import { HeroService } from './hero.service'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts index b1facbeaab..f08e40a6e1 100644 --- a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts +++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts @@ -1,7 +1,8 @@ -import {Component, OnInit} from '@angular/core'; -import {Router} from '@angular/router-deprecated'; -import {Hero} from './hero'; -import {HeroService} from './hero.service'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router-deprecated'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; @Component({ selector: 'my-dashboard', @@ -11,10 +12,10 @@ import {HeroService} from './hero.service'; export class DashboardComponent implements OnInit { heroes: Hero[] = []; - constructor(private _heroService: HeroService, private _router: Router) { } + constructor(private heroService: HeroService, private _router: Router) { } ngOnInit() { - this._heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5)); + this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5)); } gotoDetail(hero: Hero) { diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts index f326f02a8b..0a168944c0 100644 --- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts @@ -1,8 +1,8 @@ -import {Component, OnInit} from '@angular/core'; -import {RouteParams} from '@angular/router-deprecated'; +import { Component, OnInit } from '@angular/core'; +import { RouteParams } from '@angular/router-deprecated'; -import {Hero} from './hero'; -import {HeroService} from './hero.service'; +import { Hero } from './hero'; +import { HeroService } from './hero.service'; @Component({ selector: 'my-hero-detail', @@ -12,13 +12,13 @@ import {HeroService} from './hero.service'; export class HeroDetailComponent implements OnInit { hero: Hero; - constructor(private _heroService: HeroService, - private _routeParams: RouteParams) { + constructor(private heroService: HeroService, + private routeParams: RouteParams) { } ngOnInit() { - let id = +this._routeParams.get('id'); - this._heroService.getHero(id).then(hero => this.hero = hero); + let id = +this.routeParams.get('id'); + this.heroService.getHero(id).then(hero => this.hero = hero); } goBack() { diff --git a/public/docs/_examples/tutorial/ts/app/hero.service.ts b/public/docs/_examples/tutorial/ts/app/hero.service.ts index bd43053ef5..7d5c08de07 100644 --- a/public/docs/_examples/tutorial/ts/app/hero.service.ts +++ b/public/docs/_examples/tutorial/ts/app/hero.service.ts @@ -1,5 +1,6 @@ -import {Injectable} from '@angular/core'; -import {HEROES} from './mock-heroes'; +import { Injectable } from '@angular/core'; + +import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.ts b/public/docs/_examples/tutorial/ts/app/heroes.component.ts index 222aa66e04..1081aab2bd 100644 --- a/public/docs/_examples/tutorial/ts/app/heroes.component.ts +++ b/public/docs/_examples/tutorial/ts/app/heroes.component.ts @@ -1,8 +1,8 @@ -import {Component, OnInit} from '@angular/core'; -import {Router} from '@angular/router-deprecated'; -import {HeroService} from './hero.service'; -import {HeroDetailComponent} from './hero-detail.component'; -import {Hero} from './hero'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router-deprecated'; +import { HeroService } from './hero.service'; +import { HeroDetailComponent } from './hero-detail.component'; +import { Hero } from './hero'; @Component({ selector: 'my-heroes', @@ -14,14 +14,14 @@ export class HeroesComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; - constructor(private _heroService: HeroService, private _router: Router) { } + constructor(private heroService: HeroService, private router: Router) { } getHeroes() { - this._heroService.getHeroes().then(heroes => this.heroes = heroes); + this.heroService.getHeroes().then(heroes => this.heroes = heroes); } gotoDetail() { - this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]); + this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]); } ngOnInit() { diff --git a/public/docs/_examples/tutorial/ts/app/main.ts b/public/docs/_examples/tutorial/ts/app/main.ts index 3a351ae5b9..0e07c5e213 100644 --- a/public/docs/_examples/tutorial/ts/app/main.ts +++ b/public/docs/_examples/tutorial/ts/app/main.ts @@ -1,7 +1,8 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; -import {HeroService} from './hero.service'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; + +import { HeroService } from './hero.service'; +import { AppComponent } from './app.component'; bootstrap(AppComponent, [ ROUTER_PROVIDERS, diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts index 36ee07d431..2e2b7b5b54 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts @@ -1,7 +1,7 @@ declare var angular:any; // #docregion bootstrap -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; // #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/app.module.ts index 39e2e092c4..f7e1ba4b13 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/app.module.ts @@ -1,5 +1,5 @@ // #docregion bootstrap -import {upgradeAdapter} from './upgrade_adapter'; +import { upgradeAdapter } from './upgrade_adapter'; // #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts index 0aeb894a86..f6066f9109 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts @@ -1,3 +1,3 @@ // #docregion -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts index 60dfe96d3e..2534ebd99a 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts @@ -1,6 +1,7 @@ -import {UpgradeAdapter} from '@angular/upgrade'; -import {MainController} from './main.controller'; -import {HeroDetailComponent} from './hero-detail.component'; +import { UpgradeAdapter } from '@angular/upgrade'; + +import { MainController } from './main.controller'; +import { HeroDetailComponent } from './hero-detail.component'; declare var angular:any; const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts index e6656eb4d9..7a2956eb26 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts @@ -1,6 +1,6 @@ // #docregion -import {Component, Input} from '@angular/core'; -import {Hero} from '../hero'; +import { Component, Input } from '@angular/core'; +import { Hero } from '../hero'; @Component({ selector: 'hero-detail', diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/main.controller.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/main.controller.ts index e4754e710d..a47d561b1b 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/main.controller.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/main.controller.ts @@ -1,4 +1,4 @@ -import {Hero} from '../Hero'; +import { Hero } from '../Hero'; export class MainController { hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds'); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/app.module.ts index 2d04886a8a..feba407bce 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/app.module.ts @@ -1,6 +1,6 @@ -import {HeroDetailComponent} from './hero-detail.component'; -import {HeroesService} from './heroes.service'; -import {upgradeAdapter} from './upgrade_adapter'; +import { HeroDetailComponent } from './hero-detail.component'; +import { HeroesService } from './heroes.service'; +import { upgradeAdapter } from './upgrade_adapter'; declare var angular:any; diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts index 3fb05f97f2..fa1c26a9fa 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts @@ -1,7 +1,7 @@ // #docregion -import {Component, Inject} from '@angular/core'; -import {HeroesService} from './heroes.service'; -import {Hero} from '../hero'; +import { Component, Inject } from '@angular/core'; +import { HeroesService } from './heroes.service'; +import { Hero } from '../hero'; @Component({ selector: 'hero-detail', diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/heroes.service.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/heroes.service.ts index 416d1af639..4a258e205a 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/heroes.service.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/heroes.service.ts @@ -1,5 +1,5 @@ // #docregion -import {Hero} from '../hero'; +import { Hero } from '../hero'; export class HeroesService { get() { diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts index 0aeb894a86..f6066f9109 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts @@ -1,3 +1,3 @@ // #docregion -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/app.module.ts index 43a7fcf250..657c4d25cc 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/app.module.ts @@ -1,6 +1,6 @@ -import {heroDetailComponent} from './hero-detail.component'; -import {Heroes} from './heroes'; -import {upgradeAdapter} from './upgrade_adapter'; +import { heroDetailComponent } from './hero-detail.component'; +import { Heroes } from './heroes'; +import { upgradeAdapter } from './upgrade_adapter'; declare var angular:any; diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/hero-detail.component.ts index 36bb5368aa..d736117ce0 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/hero-detail.component.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/hero-detail.component.ts @@ -1,4 +1,4 @@ -import {Heroes} from './heroes'; +import { Heroes } from './heroes'; // #docregion export const heroDetailComponent = { diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts index 157436ed54..f5f6d87ed8 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts @@ -1,6 +1,6 @@ // #docregion -import {Injectable} from '@angular/core'; -import {Hero} from '../hero'; +import { Injectable } from '@angular/core'; +import { Hero } from '../hero'; @Injectable() export class Heroes { diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts index 0aeb894a86..f6066f9109 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts @@ -1,3 +1,3 @@ // #docregion -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts index 0b36fe1379..ab16d3a24d 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts @@ -1,7 +1,7 @@ -import {UpgradeAdapter} from '@angular/upgrade'; -import {ContainerComponent} from './container.component'; -import {heroDetailComponent} from './hero-detail.component'; -import {upgradeAdapter} from './upgrade_adapter'; +import { UpgradeAdapter } from '@angular/upgrade'; +import { ContainerComponent } from './container.component'; +import { heroDetailComponent } from './hero-detail.component'; +import { upgradeAdapter } from './upgrade_adapter'; declare var angular:any; diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts index 387e5d9c0d..fabb595405 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts @@ -1,7 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {upgradeAdapter} from './upgrade_adapter'; -import {Hero} from '../Hero'; +import { Component } from '@angular/core'; +import { upgradeAdapter } from './upgrade_adapter'; +import { Hero } from '../Hero'; const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts index 0aeb894a86..f6066f9109 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts @@ -1,3 +1,3 @@ // #docregion -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts index b6246b871e..d9af4e0104 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts @@ -1,9 +1,9 @@ -import {MainController} from './main.controller'; +import { MainController } from './main.controller'; // #docregion downgradecomponent -import {HeroDetailComponent} from './hero-detail.component'; +import { HeroDetailComponent } from './hero-detail.component'; // #enddocregion downgradecomponent -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts index eeb367e3af..12879ac980 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts @@ -1,5 +1,5 @@ // #docregion -import {Component, Input, Output, EventEmitter} from '@angular/core'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; import {Hero} from '../hero'; @Component({ diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/main.controller.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/main.controller.ts index a43140429e..2bf72de681 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/main.controller.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/main.controller.ts @@ -1,4 +1,4 @@ -import {Hero} from '../Hero'; +import { Hero } from '../Hero'; export class MainController { hero = new Hero(1, 'Windstorm'); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts index fc4ed4a2f0..44935340f0 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts @@ -1,8 +1,8 @@ // #docregion downgradecomponent -import {HeroDetailComponent} from './hero-detail.component'; +import { HeroDetailComponent } from './hero-detail.component'; // #enddocregion downgradecomponent -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts index 297d4d9669..cbcadfbd5a 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts @@ -1,5 +1,5 @@ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'hero-detail', diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/app.module.ts index 5599ea67f0..dd2df20bdf 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/app.module.ts @@ -1,6 +1,6 @@ -import {heroDetail} from './hero-detail.component'; -import {ContainerComponent} from './container.component'; -import {upgradeAdapter} from './upgrade_adapter'; +import { heroDetail } from './hero-detail.component'; +import { ContainerComponent } from './container.component'; +import { upgradeAdapter } from './upgrade_adapter'; declare var angular:any; diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts index 01844b7727..c13857c7c5 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts @@ -1,7 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {upgradeAdapter} from './upgrade_adapter'; -import {Hero} from '../Hero'; +import { Component } from '@angular/core'; +import { upgradeAdapter } from './upgrade_adapter'; +import { Hero } from '../Hero'; const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts index 0aeb894a86..f6066f9109 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts @@ -1,3 +1,3 @@ // #docregion -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/app.module.ts index 5599ea67f0..dd2df20bdf 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/app.module.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/app.module.ts @@ -1,6 +1,6 @@ -import {heroDetail} from './hero-detail.component'; -import {ContainerComponent} from './container.component'; -import {upgradeAdapter} from './upgrade_adapter'; +import { heroDetail } from './hero-detail.component'; +import { ContainerComponent } from './container.component'; +import { upgradeAdapter } from './upgrade_adapter'; declare var angular:any; diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts index be52f7aeb8..ca8a93dd26 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts @@ -1,6 +1,6 @@ // #docregion -import {Component} from '@angular/core'; -import {upgradeAdapter} from './upgrade_adapter'; +import { Component } from '@angular/core'; +import { upgradeAdapter } from './upgrade_adapter'; const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts index 0aeb894a86..f6066f9109 100644 --- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts +++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts @@ -1,3 +1,3 @@ // #docregion -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts index 07fce56e81..7ec8dd42f2 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts @@ -1,11 +1,11 @@ // #docregion adapter-import -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; // #enddocregion adapter-import // #docregion adapter-state-import import upgradeAdapter from './core/upgrade_adapter'; // #enddocregion adapter-state-import // #docregion http-import -import {HTTP_PROVIDERS} from '@angular/http'; +import { HTTP_PROVIDERS } from '@angular/http'; // #enddocregion http-import import core from './core/core.module'; import phoneList from './phone_list/phone_list.module'; @@ -24,7 +24,7 @@ angular.module('phonecatApp', [ configure.$inject = ['$routeProvider']; -function configure($routeProvider) { +function configure($routeProvider) { } // #docregion list-route $routeProvider. when('/phones', { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts index 135f78b02d..d129a44e50 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts @@ -1,5 +1,5 @@ // #docregion -import {Pipe} from '@angular/core'; +import { Pipe } from '@angular/core'; @Pipe({name: 'checkmark'}) export class CheckmarkPipe { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/core.module.ts index 5d80850593..c3e1ba514b 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/core.module.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/core.module.ts @@ -1,5 +1,5 @@ // #docregion -import {Phones} from './phones.service'; +import { Phones } from './phones.service'; import upgradeAdapter from './upgrade_adapter'; upgradeAdapter.addProvider(Phones); diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts index c9f2cb6408..d292bc54ee 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts @@ -1,7 +1,7 @@ // #docregion full -import {Injectable} from '@angular/core'; -import {Http, Response} from '@angular/http'; -import {Observable} from 'rxjs/Rx'; +import { Injectable } from '@angular/core'; +import { Http, Response } from '@angular/http'; +import { Observable } from 'rxjs/Rx'; import 'rxjs/add/operator/map'; // #docregion phone-interface diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts index c5d20edd7a..f1ad63012a 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts @@ -1,5 +1,5 @@ // #docregion full -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; // #docregion adapter-init const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts index 4e645336a2..dc6c1ff4fd 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts @@ -1,8 +1,8 @@ // #docregion // #docregion top -import {Component, Inject} from '@angular/core'; -import {Phones, Phone} from '../core/phones.service'; -import {CheckmarkPipe} from '../core/checkmark.pipe'; +import { Component, Inject } from '@angular/core'; +import { Phones, Phone } from '../core/phones.service'; +import { CheckmarkPipe } from '../core/checkmark.pipe'; interface PhoneRouteParams { phoneId: string diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts index a743d115bd..0926ffeb84 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts @@ -1,6 +1,6 @@ // #docregion -import {Component, Inject} from '@angular/core'; -import {Phones, Phone} from '../core/phones.service'; +import { Component, Inject } from '@angular/core'; +import { Phone, Phones } from '../core/phones.service'; interface PhoneRouteParams { phoneId: string diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts index 89c239a999..162b91cf60 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts @@ -1,5 +1,5 @@ // #docregion -import {Pipe} from '@angular/core'; +import { Pipe } from '@angular/core'; @Pipe({name: 'orderBy'}) export default class OrderByPipe { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts index de5040df01..9f38608e8f 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts @@ -1,6 +1,6 @@ // #docregion -import {Pipe} from '@angular/core'; -import {Phone} from '../core/phones.service'; +import { Pipe } from '@angular/core'; +import { Phone } from '../core/phones.service'; @Pipe({name: 'phoneFilter'}) export default class PhoneFilterPipe { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts index 098783b487..d876e28861 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts @@ -1,8 +1,8 @@ // #docregion full // #docregion top -import {Component} from '@angular/core'; -import {Observable} from 'rxjs'; -import {Phones, Phone} from '../core/phones.service'; +import { Component } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Phones, Phone } from '../core/phones.service'; import PhoneFilterPipe from './phone_filter.pipe'; import OrderByPipe from './order_by.pipe'; diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts index cd54e48e8a..d967ce464e 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts @@ -1,7 +1,7 @@ // #docregion top -import {Component} from '@angular/core'; -import {Observable} from 'rxjs'; -import {Phones, Phone} from '../core/phones.service'; +import { Component } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Phone, Phones } from '../core/phones.service'; @Component({ selector: 'pc-phone-list', diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts index dafa140aae..a959a641a2 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts @@ -1,6 +1,7 @@ // #docregion -import {Component} from '@angular/core'; -import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router'; +import { Component } from '@angular/core'; +import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router'; + import PhoneList from './phone_list/phone_list.component'; import PhoneDetail from './phone_detail/phone_detail.component'; diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts index 135f78b02d..d129a44e50 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts @@ -1,5 +1,5 @@ // #docregion -import {Pipe} from '@angular/core'; +import { Pipe } from '@angular/core'; @Pipe({name: 'checkmark'}) export class CheckmarkPipe { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts index c9f2cb6408..d292bc54ee 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts @@ -1,7 +1,7 @@ // #docregion full -import {Injectable} from '@angular/core'; -import {Http, Response} from '@angular/http'; -import {Observable} from 'rxjs/Rx'; +import { Injectable } from '@angular/core'; +import { Http, Response } from '@angular/http'; +import { Observable } from 'rxjs/Rx'; import 'rxjs/add/operator/map'; // #docregion phone-interface diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts index c5d20edd7a..f1ad63012a 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts @@ -1,5 +1,5 @@ // #docregion full -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; // #docregion adapter-init const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts index 210e280884..fa854b1946 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts @@ -1,16 +1,16 @@ // #docregion // #docregion importbootstrap -import {provide} from '@angular/core'; -import {LocationStrategy, HashLocationStrategy} from '@angular/common'; -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {ROUTER_PROVIDERS} from '@angular/router'; +import { provide } from '@angular/core'; +import { LocationStrategy, HashLocationStrategy } from '@angular/common'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { ROUTER_PROVIDERS } from '@angular/router'; -import {Phones} from './core/phones.service'; +import { Phones } from './core/phones.service'; import AppComponent from './app.component'; // #enddocregion importbootstrap // #docregion http-import -import {HTTP_PROVIDERS} from '@angular/http'; +import { HTTP_PROVIDERS } from '@angular/http'; // #enddocregion http-import // #docregion bootstrap diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts index 4d1b28ab5f..a6bfb4cb13 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts @@ -1,9 +1,10 @@ // #docregion // #docregion top -import {Component, Inject} from '@angular/core'; -import {RouteParams} from '@angular/router'; -import {Phones, Phone} from '../core/phones.service'; -import {CheckmarkPipe} from '../core/checkmark.pipe'; +import { Component, Inject } from '@angular/core'; +import { RouteParams } from '@angular/router'; + +import { Phones, Phone } from '../core/phones.service'; +import { CheckmarkPipe } from '../core/checkmark.pipe'; @Component({ selector: 'pc-phone-detail', diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts index 89c239a999..162b91cf60 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts @@ -1,5 +1,5 @@ // #docregion -import {Pipe} from '@angular/core'; +import { Pipe } from '@angular/core'; @Pipe({name: 'orderBy'}) export default class OrderByPipe { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts index de5040df01..9f38608e8f 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts @@ -1,6 +1,6 @@ // #docregion -import {Pipe} from '@angular/core'; -import {Phone} from '../core/phones.service'; +import { Pipe } from '@angular/core'; +import { Phone } from '../core/phones.service'; @Pipe({name: 'phoneFilter'}) export default class PhoneFilterPipe { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts index ca240414e2..2899bfbbb0 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts @@ -1,9 +1,10 @@ // #docregion full // #docregion top -import {Component} from '@angular/core'; -import {RouterLink} from '@angular/router'; -import {Observable} from 'rxjs'; -import {Phones, Phone} from '../core/phones.service'; +import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { Observable } from 'rxjs'; + +import { Phones, Phone } from '../core/phones.service'; import PhoneFilterPipe from './phone_filter.pipe'; import OrderByPipe from './order_by.pipe'; diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts index 5a5b2284c2..c9a1def071 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts @@ -1,6 +1,7 @@ // #docregion -import {describe, beforeEachProviders, it, inject, expect} from '@angular/core/testing'; -import {CheckmarkPipe} from '../../app/js/core/checkmark.pipe'; +import { describe, beforeEachProviders, it, inject, expect } from '@angular/core/testing'; + +import { CheckmarkPipe } from '../../app/js/core/checkmark.pipe'; describe('CheckmarkPipe', () => { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts index 09e0fbb1bf..416ca0797b 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts @@ -1,5 +1,5 @@ // #docregion -import {describe, beforeEachProviders, it, inject} from '@angular/core/testing'; +import { describe, beforeEachProviders, it, inject } from '@angular/core/testing'; import OrderByPipe from '../../app/js/phone_list/order_by.pipe'; diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts index b1b86ec4c1..380eb62470 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts @@ -1,9 +1,9 @@ -import {provide} from '@angular/core'; +import { provide } from '@angular/core'; // #docregion routeparams -import {RouteParams} from '@angular/router'; +import { RouteParams } from '@angular/router'; // #enddocregion routeparams -import {HTTP_PROVIDERS} from '@angular/http'; -import {Observable} from 'rxjs/Rx'; +import { HTTP_PROVIDERS } from '@angular/http'; +import { Observable } from 'rxjs/Rx'; import { describe, beforeEachProviders, @@ -11,10 +11,10 @@ import { it, expect } from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; +import { TestComponentBuilder } from '@angular/compiler/testing'; import PhoneDetail from '../../app/js/phone_detail/phone_detail.component'; -import {Phones, Phone} from '../../app/js/core/phones.service'; +import { Phones, Phone } from '../../app/js/core/phones.service'; function xyzPhoneData():Phone { return { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts index 9c3fba870b..6de1e5722d 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts @@ -1,8 +1,8 @@ // #docregion -import {describe, beforeEachProviders, it, inject} from '@angular/core/testing'; +import { describe, beforeEachProviders, it, inject } from '@angular/core/testing'; import PhoneFilterPipe from '../../app/js/phone_list/phone_filter.pipe'; -import {Phone} from '../../app/js/core/phones.service'; +import { Phone } from '../../app/js/core/phones.service'; describe('PhoneFilterPipe', () => { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts index ae9fc89b14..85a6f7335f 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts @@ -1,9 +1,9 @@ // #docregion -import {provide, ApplicationRef} from '@angular/core'; -import {LocationStrategy, HashLocationStrategy} from '@angular/common'; -import {HTTP_PROVIDERS} from '@angular/http'; -import {ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT} from '@angular/router'; -import {Observable} from 'rxjs/Rx'; +import { provide, ApplicationRef } from '@angular/core'; +import { LocationStrategy, HashLocationStrategy } from '@angular/common'; +import { HTTP_PROVIDERS } from '@angular/http'; +import { ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT } from '@angular/router'; +import { Observable } from 'rxjs/Rx'; import { describe, beforeEachProviders, @@ -12,12 +12,12 @@ import { expect, MockApplicationRef } from '@angular/core/testing'; -import {MockLocationStrategy} from '@angular/common/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; +import { MockLocationStrategy } from '@angular/common/testing'; +import { TestComponentBuilder } from '@angular/compiler/testing'; import AppComponent from '../../app/js/app.component'; import PhoneList from '../../app/js/phone_list/phone_list.component'; -import {Phones, Phone} from '../../app/js/core/phones.service'; +import { Phones, Phone } from '../../app/js/core/phones.service'; class MockPhones extends Phones { query():Observable { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts index fd7b93c77e..8d3fc5270f 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts @@ -1,7 +1,7 @@ // #docregion -import {describe, beforeEachProviders, it, inject} from '@angular/core/testing'; -import {HTTP_PROVIDERS} from '@angular/http'; -import {Phones} from '../../app/js/core/phones.service'; +import { describe, beforeEachProviders, it, inject } from '@angular/core/testing'; +import { HTTP_PROVIDERS } from '@angular/http'; +import { Phones } from '../../app/js/core/phones.service'; describe('Phones', () => { diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts index eb5d23b89f..974836e396 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts @@ -1,11 +1,11 @@ // #docregion adapter-import -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; // #enddocregion adapter-import // #docregion adapter-state-import import upgradeAdapter from './core/upgrade_adapter'; // #enddocregion adapter-state-import // #docregion http-import -import {HTTP_PROVIDERS} from '@angular/http'; +import { HTTP_PROVIDERS } from '@angular/http'; // #enddocregion http-import import core from './core/core.module'; import phoneList from './phone_list/phone_list.module'; diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/core.module.ts index d30604a807..e02e7dcf1a 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/core.module.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/core.module.ts @@ -1,5 +1,5 @@ // #docregion -import {Phones} from './phones.service'; +import { Phones } from './phones.service'; import checkmarkFilter from './checkmark.filter'; import upgradeAdapter from './upgrade_adapter'; diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts index 6eac9b1611..96cce48520 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts @@ -1,7 +1,7 @@ // #docregion full -import {Injectable} from '@angular/core'; -import {Http, Response} from '@angular/http'; -import {Observable} from 'rxjs/Rx'; +import { Injectable } from '@angular/core'; +import { Http, Response } from '@angular/http'; +import { Observable } from 'rxjs/Rx'; import 'rxjs/add/operator/map'; diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts index c5d20edd7a..f1ad63012a 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts @@ -1,5 +1,5 @@ // #docregion full -import {UpgradeAdapter} from '@angular/upgrade'; +import { UpgradeAdapter } from '@angular/upgrade'; // #docregion adapter-init const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts index 2dd8b25c9e..ef24ac5814 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts @@ -1,5 +1,5 @@ // #docregion -import {Phones, Phone} from '../core/phones.service'; +import { Phones, Phone } from '../core/phones.service'; interface PhoneRouteParams { phoneId: string diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts index 05ea2907ad..ae4c39b0c9 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts @@ -1,5 +1,5 @@ // #docregion -import {Phones, Phone} from '../core/phones.service'; +import { Phones, Phone } from '../core/phones.service'; class PhoneListCtrl { phones:Phone[]; diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts index 1b2b7048e2..b28fc2d8c4 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts @@ -1,7 +1,7 @@ // #docregion -import {Observable} from 'rxjs/Rx'; +import { Observable } from 'rxjs/Rx'; import '../../app/js/phone_detail/phone_detail.module'; -import {Phones} from '../../app/js/core/phones.service'; +import { Phones } from '../../app/js/core/phones.service'; describe('PhoneDetailCtrl', () => { var scope, phones, $controller, diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts index 704d21bb10..3df1418d9a 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts @@ -1,7 +1,7 @@ // #docregion -import {Observable} from 'rxjs/Rx'; +import { Observable } from 'rxjs/Rx'; import '../../app/js/phone_list/phone_list.module'; -import {Phones} from '../../app/js/core/phones.service'; +import { Phones } from '../../app/js/core/phones.service'; describe('PhoneListCtrl', () => { var scope, ctrl, $httpBackend; diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts index fd7b93c77e..8d3fc5270f 100644 --- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts +++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts @@ -1,7 +1,7 @@ // #docregion -import {describe, beforeEachProviders, it, inject} from '@angular/core/testing'; -import {HTTP_PROVIDERS} from '@angular/http'; -import {Phones} from '../../app/js/core/phones.service'; +import { describe, beforeEachProviders, it, inject } from '@angular/core/testing'; +import { HTTP_PROVIDERS } from '@angular/http'; +import { Phones } from '../../app/js/core/phones.service'; describe('Phones', () => { diff --git a/public/docs/_examples/user-input/ts/app/app.component.ts b/public/docs/_examples/user-input/ts/app/app.component.ts index bc76c0bbfb..2b6754f2aa 100644 --- a/public/docs/_examples/user-input/ts/app/app.component.ts +++ b/public/docs/_examples/user-input/ts/app/app.component.ts @@ -1,17 +1,17 @@ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; -import {ClickMeComponent} from './click-me.component'; -import {ClickMeComponent2} from './click-me2.component'; +import { ClickMeComponent } from './click-me.component'; +import { ClickMeComponent2 } from './click-me2.component'; -import {LoopbackComponent} from './loop-back.component'; +import { LoopbackComponent } from './loop-back.component'; -import {KeyUpComponent_v1, +import { KeyUpComponent_v1, KeyUpComponent_v2, KeyUpComponent_v3, - KeyUpComponent_v4} from './keyup.components'; + KeyUpComponent_v4 } from './keyup.components'; -import {LittleTourComponent} from './little-tour.component'; +import { LittleTourComponent } from './little-tour.component'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/user-input/ts/app/click-me.component.ts b/public/docs/_examples/user-input/ts/app/click-me.component.ts index 6a8a90a120..20e77ad427 100644 --- a/public/docs/_examples/user-input/ts/app/click-me.component.ts +++ b/public/docs/_examples/user-input/ts/app/click-me.component.ts @@ -5,7 +5,7 @@ */ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; // #docregion click-me-component @Component({ diff --git a/public/docs/_examples/user-input/ts/app/click-me2.component.ts b/public/docs/_examples/user-input/ts/app/click-me2.component.ts index b9ff83d3d4..b444e3594e 100644 --- a/public/docs/_examples/user-input/ts/app/click-me2.component.ts +++ b/public/docs/_examples/user-input/ts/app/click-me2.component.ts @@ -1,5 +1,5 @@ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'click-me2', diff --git a/public/docs/_examples/user-input/ts/app/keyup.components.ts b/public/docs/_examples/user-input/ts/app/keyup.components.ts index 4fccd401be..c4acf742f5 100644 --- a/public/docs/_examples/user-input/ts/app/keyup.components.ts +++ b/public/docs/_examples/user-input/ts/app/keyup.components.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; // #docregion key-up-component-1 @Component({ diff --git a/public/docs/_examples/user-input/ts/app/little-tour.component.ts b/public/docs/_examples/user-input/ts/app/little-tour.component.ts index 23a4fabdd5..f48abe3518 100644 --- a/public/docs/_examples/user-input/ts/app/little-tour.component.ts +++ b/public/docs/_examples/user-input/ts/app/little-tour.component.ts @@ -1,5 +1,5 @@ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; // #docregion little-tour @Component({ diff --git a/public/docs/_examples/user-input/ts/app/loop-back.component.ts b/public/docs/_examples/user-input/ts/app/loop-back.component.ts index f7c089b4d0..f7c15f36bf 100644 --- a/public/docs/_examples/user-input/ts/app/loop-back.component.ts +++ b/public/docs/_examples/user-input/ts/app/loop-back.component.ts @@ -1,5 +1,5 @@ // #docregion -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; // #docregion loop-back-component @Component({ selector: 'loop-back', diff --git a/public/docs/_examples/user-input/ts/app/main.ts b/public/docs/_examples/user-input/ts/app/main.ts index 07a96da44b..42dbeb9f7d 100644 --- a/public/docs/_examples/user-input/ts/app/main.ts +++ b/public/docs/_examples/user-input/ts/app/main.ts @@ -1,4 +1,5 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {AppComponent} from './app.component'; +import { bootstrap } from '@angular/platform-browser-dynamic'; -bootstrap(AppComponent); \ No newline at end of file +import { AppComponent } from './app.component'; + +bootstrap(AppComponent); diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade index c5fdcd0a7c..1e21e9409b 100644 --- a/public/docs/ts/latest/cookbook/dependency-injection.jade +++ b/public/docs/ts/latest/cookbook/dependency-injection.jade @@ -287,11 +287,11 @@ figure.image-display Focus on the constructor parameters +makeExample('cb-dependency-injection/ts/app/hero-contact.component.ts','ctor-params','app/hero-contact.component.ts')(format='.') :marked - The `@Host()` function decorating the `_heroCache` property ensures that + The `@Host()` function decorating the `heroCache` property ensures that we get a reference to the cache service from the parent `HeroBioComponent`. Angular throws if the parent lacks that service, even if a component higher in the component tree happens to have that service. - A second `@Host()` function decorates the `_loggerService` property. + A second `@Host()` function decorates the `loggerService` property. We know the only `LoggerService` instance in the app is provided at the `AppComponent` level. The host `HeroBioComponent` doesn't have its own `LoggerService` provider. @@ -647,7 +647,7 @@ figure.image-display This rule makes the component safe to construct under test without fear that it will do something dramatic like talk to the server. That's why we call the `HeroService` from within the `ngOnInit` rather than the constructor. - We explain the mysterious `_afterGetHeroes` below. + We explain the mysterious `afterGetHeroes` below. :marked Users want to see the heroes in alphabetical order. Rather than modify the original component, we sub-class it and create a @@ -661,12 +661,12 @@ figure.image-display +makeExample('cb-dependency-injection/ts/app/sorted-heroes.component.ts','sorted-heroes','app/sorted-heroes.component.ts (SortedHeroesComponent)') :marked - Now take note of the `_afterGetHeroes` method. + Now take note of the `afterGetHeroes` method. Our first instinct was to create an `ngOnInit` method in `SortedHeroesComponent` and do the sorting there. But Angular calls the *derived* class's `ngOnInit` *before* calling the base class's `ngOnInit` so we'd be sorting the heroes array *before they arrived*. That produces a nasty error. - Overriding the base class's `_afterGetHeroes` method solves the problem + Overriding the base class's `afterGetHeroes` method solves the problem These complications argue for *avoiding component inheritance*. diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade index 7452ac19c8..3c285c4497 100644 --- a/public/docs/ts/latest/guide/attribute-directives.jade +++ b/public/docs/ts/latest/guide/attribute-directives.jade @@ -186,8 +186,8 @@ figure.image-display Now we implement those two mouse event handlers: +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','mouse-methods')(format=".") :marked - Notice that they delegate to a helper method that sets the color via a private local variable, `_el`. - We revise the constructor to capture the `ElementRef.nativeElement` in `_el`. + Notice that they delegate to a helper method that sets the color via a private local variable, `el`. + We revise the constructor to capture the `ElementRef.nativeElement` in `el`. +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','ctor')(format=".") :marked diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade index 96f003456a..5a185c6941 100644 --- a/public/docs/ts/latest/guide/dependency-injection.jade +++ b/public/docs/ts/latest/guide/dependency-injection.jade @@ -386,7 +386,7 @@ include ../_util-fns app/heroes/hero.service (v.1)`) // #docregion di-service-service-2 :marked - The constructor now asks for an injected instance of a `Logger` and stores it in a private property called `_logger`. + The constructor now asks for an injected instance of a `Logger` and stores it in a private property called `logger`. We call that property within our `getHeroes` method when anyone asks for heroes. // #enddocregion di-service-service-2 // #docregion di-injectable-1 @@ -488,8 +488,8 @@ code-example(format, language="html"). - var rewrite = lang == 'dart' ? 'Just rewrite' : 'Then rewrite' - var decorator = lang == 'dart' ? 'annotation' : 'decorator' :marked - #{rewrite} the constructor with the `@Optional()` #{decorator} preceding the private `_logger` parameter. - That tells the injector that `_logger` is optional. + #{rewrite} the constructor with the `@Optional()` #{decorator} preceding the private `logger` parameter. + That tells the injector that `logger` is optional. // #enddocregion logger-service-5 +makeExample('dependency-injection/ts/app/providers.component.ts','provider-10-ctor')(format='.') // #docregion logger-service-6 diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade index b373d638ac..2ade9bf761 100644 --- a/public/docs/ts/latest/guide/lifecycle-hooks.jade +++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade @@ -489,11 +489,11 @@ figure.image-display .a(id="wait-a-tick") :marked ### Abide by the unidirectional data flow rule - The `_doSomething` method updates the screen when the hero name exceeds 10 characters. + The `doSomething` method updates the screen when the hero name exceeds 10 characters. -+makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'do-something', 'AfterViewComponent (_doSomething)')(format=".") ++makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'do-something', 'AfterViewComponent (doSomething)')(format=".") :marked - Why does the `_doSomething` method waits a tick w/ `setTimeout` before updating `comment`? + Why does the `doSomething` method waits a tick w/ `setTimeout` before updating `comment`? We must adhere to Angular's unidirectional data flow rule which says that we may not update the view *after* it has been composed. @@ -568,7 +568,7 @@ figure.image-display :marked ### No unidirectional flow worries - This component's `_doSomething` method update's the component's data-bound `comment` property immediately. + This component's `doSomething` method update's the component's data-bound `comment` property immediately. There's no [need to wait](#wait-a-tick). Recall that Angular calls both *AfterContent* hooks before calling either of the *AfterView* hooks. diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 761a7223a0..df26af5d99 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -1128,7 +1128,7 @@ code-example(format="." language="bash"). First we extend the router import statement to include the `RouteParams` service symbol; +makeExample('router/ts/app/heroes/hero-list.component.ts','import-route-params', 'hero-list.component.ts (import)')(format=".") :marked - Then we extend the constructor to inject the `RouteParams` service and extract the `id` parameter as the `_selectedId`: + Then we extend the constructor to inject the `RouteParams` service and extract the `id` parameter as the `selectedId`: +makeExample('router/ts/app/heroes/hero-list.component.ts','ctor', 'hero-list.component.ts (constructor)')(format=".") .l-sub-section :marked diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade index 81ee12f07a..6e4dfe3341 100644 --- a/public/docs/ts/latest/guide/server-communication.jade +++ b/public/docs/ts/latest/guide/server-communication.jade @@ -555,7 +555,7 @@ figure.image-display which we import from the RxJS observable library: +makeExample('server-communication/ts/app/wiki/wiki-smart.component.ts', 'import-subject') :marked - Each search term is a string, so we create a new `Subject` of type `string` called `_searchTermStream`. + Each search term is a string, so we create a new `Subject` of type `string` called `searchTermStream`. After every keystroke, the `search` method adds the search box value to that stream via the subject's `next` method. +makeExample('server-communication/ts/app/wiki/wiki-smart.component.ts', 'subject')(format='.') diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade index 592715023c..b518856b05 100644 --- a/public/docs/ts/latest/tutorial/toh-pt4.jade +++ b/public/docs/ts/latest/tutorial/toh-pt4.jade @@ -175,11 +175,7 @@ code-example(format="." language="bash"). +makeExample('toh-4/ts/app/app.component.1.ts', 'ctor', 'app.component.ts (constructor)') :marked The constructor itself does nothing. The parameter simultaneously - defines a private `_heroService` property and identifies it as a `HeroService` injection site. -.l-sub-section - :marked - We prefix private variables with an underscore (_) to warn readers of our code - that this variable is not part of the component's public API. + defines a private `heroService` property and identifies it as a `HeroService` injection site. :marked Now Angular will know to supply an instance of the `HeroService` when it creates a new `AppComponent`. @@ -223,7 +219,7 @@ code-example(format="." language="html"). There should be only one instance of that component and only one instance of the `HeroService` in our entire app. :marked ### *getHeroes* in the *AppComponent* - We've got the service in a `_heroService` private variable. Let's use it. + We've got the service in a `heroService` private variable. Let's use it. We pause to think. We can call the service and get the data in one line. +makeExample('toh-4/ts/app/app.component.1.ts', 'get-heroes')(format=".") @@ -386,7 +382,7 @@ code-example(format="." language="html"). Like `getHeroes`, it also returns a promise. But this promise waits 2 seconds before resolving the promise with mock heroes. - Back in the `AppComponent`, replace `_heroService.getHeroes` with `_heroService.getHeroesSlowly` + Back in the `AppComponent`, replace `heroService.getHeroes` with `heroService.getHeroesSlowly` and see how the app behaves. .l-main-section diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index a72fd6a776..275cce5d7f 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -316,7 +316,7 @@ code-example(format="." language="bash"). :marked We saw this kind of logic before in the `HeroesComponent`. * create a `heroes` array property - * inject the `HeroService` in the constructor and hold it in a private `_heroService` field. + * inject the `HeroService` in the constructor and hold it in a private `heroService` field. * call the service to get heroes inside the Angular `ngOnInit` lifecycle hook. The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with *slice* From 2842058a3091ee3fdcd7a8e4a861bebeaf627a2f Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Tue, 3 May 2016 12:19:50 -0600 Subject: [PATCH 03/94] docs(router): document new router and samples - phase 2 --- .../docs/_examples/router-deprecated/e2e-spec.js | 3 ++- .../router-deprecated/ts/app/app.component.1.ts | 2 +- .../router-deprecated/ts/app/app.component.2.ts | 2 +- .../router-deprecated/ts/app/app.component.3.ts | 2 +- .../router-deprecated/ts/app/app.component.ts | 2 +- .../_examples/router-deprecated/ts/index.1.html | 2 +- .../_examples/router-deprecated/ts/index.2.html | 2 +- .../_examples/router-deprecated/ts/index.3.html | 2 +- .../_examples/router-deprecated/ts/index.html | 2 +- public/docs/_examples/router/e2e-spec.js | 3 ++- public/docs/ts/latest/guide/router.jade | 16 ++++++++-------- 11 files changed, 20 insertions(+), 18 deletions(-) diff --git a/public/docs/_examples/router-deprecated/e2e-spec.js b/public/docs/_examples/router-deprecated/e2e-spec.js index bd3f84ee83..4e3018b5c2 100644 --- a/public/docs/_examples/router-deprecated/e2e-spec.js +++ b/public/docs/_examples/router-deprecated/e2e-spec.js @@ -92,7 +92,8 @@ describe('Router', function () { function crisisCenterEdit(index, shouldSave) { var page = getPageStruct(); var crisisEle, crisisText; - page.crisisHref.click().then(function () { + page.crisisHref.click() + .then(function () { crisisEle = page.crisisList.get(index); return crisisEle.getText(); }).then(function (text) { diff --git a/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts index 0ceeb73848..0e20623fd3 100644 --- a/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts +++ b/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts @@ -14,7 +14,7 @@ import { HeroListComponent } from './hero-list.component'; selector: 'my-app', // #docregion template template: ` -

    Component Router

    +

    Component Router (Deprecated)