docs(aio): rename ToH to match the guide name

aio/content/examples/toh-pt4/src/app/app.component.1.ts

@@ -0,0 +1,65 @@
+// #docplaster
+// #docregion on-init
+import { OnInit } from '@angular/core';
+
+// #enddocregion on-init
+import { Component } from '@angular/core';
+
+import { Hero } from './hero';
+// #docregion hero-service-import
+import { HeroService } from './hero.service.2';
+// #enddocregion hero-service-import
+
+// Testable but never shown
+@Component({
+  selector: 'my-app',
+  template: `
+  <div *ngFor="let hero of heroes" (click)="onSelect(hero)">
+    {{hero.name}}
+  </div>
+  <hero-detail [hero]="selectedHero"></hero-detail>
+  `,
+  // #docregion providers
+  providers: [HeroService]
+  // #enddocregion providers
+})
+// #docregion on-init
+export class AppComponent implements OnInit {
+  // #enddocregion on-init
+  title = 'Tour of Heroes';
+  // #docregion heroes-prop
+  heroes: Hero[];
+  // #enddocregion heroes-prop
+  selectedHero: Hero;
+
+  /*
+  // #docregion new-service
+  heroService = new HeroService(); // don't do this
+  // #enddocregion new-service
+  */
+  // #docregion ctor
+  constructor(private heroService: HeroService) { }
+  // #enddocregion ctor
+  // #docregion getHeroes
+  getHeroes(): void {
+    // #docregion get-heroes
+    this.heroes = this.heroService.getHeroes();
+    // #enddocregion get-heroes
+  }
+  // #enddocregion getHeroes
+
+  // #docregion ng-on-init
+  // #docregion on-init
+  ngOnInit(): void {
+    // #enddocregion on-init
+    this.getHeroes();
+    // #docregion on-init
+  }
+  // #enddocregion on-init
+  // #enddocregion ng-on-init
+
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+  // #docregion on-init
+}

aio/content/examples/toh-pt4/src/app/app.component.ts

@@ -0,0 +1,97 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from './hero';
+// #docregion hero-service-import
+import { HeroService } from './hero.service';
+// #enddocregion hero-service-import
+
+@Component({
+  selector: 'my-app',
+  // #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <h2>My Heroes</h2>
+    <ul class="heroes">
+      <li *ngFor="let hero of heroes"
+        [class.selected]="hero === selectedHero"
+        (click)="onSelect(hero)">
+        <span class="badge">{{hero.id}}</span> {{hero.name}}
+      </li>
+    </ul>
+    <hero-detail [hero]="selectedHero"></hero-detail>
+  `,
+  // #enddocregion template
+  styles: [`
+    .selected {
+      background-color: #CFD8DC !important;
+      color: white;
+    }
+    .heroes {
+      margin: 0 0 2em 0;
+      list-style-type: none;
+      padding: 0;
+      width: 15em;
+    }
+    .heroes li {
+      cursor: pointer;
+      position: relative;
+      left: 0;
+      background-color: #EEE;
+      margin: .5em;
+      padding: .3em 0;
+      height: 1.6em;
+      border-radius: 4px;
+    }
+    .heroes li.selected:hover {
+      background-color: #BBD8DC !important;
+      color: white;
+    }
+    .heroes li:hover {
+      color: #607D8B;
+      background-color: #DDD;
+      left: .1em;
+    }
+    .heroes .text {
+      position: relative;
+      top: -3px;
+    }
+    .heroes .badge {
+      display: inline-block;
+      font-size: small;
+      color: white;
+      padding: 0.8em 0.7em 0 0.7em;
+      background-color: #607D8B;
+      line-height: 1em;
+      position: relative;
+      left: -1px;
+      top: -4px;
+      height: 1.8em;
+      margin-right: .8em;
+      border-radius: 4px 0 0 4px;
+    }
+  `],
+  providers: [HeroService]
+})
+export class AppComponent implements OnInit {
+  title = 'Tour of Heroes';
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  constructor(private heroService: HeroService) { }
+
+// #docregion get-heroes
+  getHeroes(): void {
+    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+  }
+// #enddocregion get-heroes
+
+  ngOnInit(): void {
+    this.getHeroes();
+  }
+
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+}

aio/content/examples/toh-pt4/src/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+
+import { AppComponent }  from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

aio/content/examples/toh-pt4/src/app/hero-detail.component.ts

@@ -0,0 +1,22 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <div *ngIf="hero">
+      <h2>{{hero.name}} details!</h2>
+      <div>
+        <label>id: </label>{{hero.id}}
+      </div>
+      <div>
+        <label>name: </label>
+        <input [(ngModel)]="hero.name" placeholder="name"/>
+      </div>
+    </div>
+  `
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+}

aio/content/examples/toh-pt4/src/app/hero.service.1.ts

@@ -0,0 +1,24 @@
+// #docplaster
+// #docregion
+// #docregion empty-class, full
+import { Injectable } from '@angular/core';
+
+// #enddocregion empty-class
+import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
+
+// #docregion empty-class, getHeroes-stub
+@Injectable()
+export class HeroService {
+  // #enddocregion empty-class, getHeroes-stub, full
+  /*
+  // #docregion getHeroes-stub
+  getHeroes(): void {} // stub
+  // #enddocregion getHeroes-stub
+  */
+  // #docregion full
+  getHeroes(): Hero[] {
+    return HEROES;
+  }
+  // #docregion empty-class, getHeroes-stub
+}

aio/content/examples/toh-pt4/src/app/hero.service.2.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+
+  getHeroes(): Hero[] {
+    return HEROES;
+  }
+}

aio/content/examples/toh-pt4/src/app/hero.service.ts

@@ -0,0 +1,29 @@
+// #docplaster
+// #docregion
+// #docregion just-get-heroes
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+  // #docregion get-heroes
+  getHeroes(): Promise<Hero[]> {
+    return Promise.resolve(HEROES);
+  }
+  // #enddocregion get-heroes, just-get-heroes
+  // #enddocregion
+
+  // See the "Take it slow" appendix
+  // #docregion get-heroes-slowly
+  getHeroesSlowly(): Promise<Hero[]> {
+    return new Promise(resolve => {
+      // Simulate server latency with 2 second delay
+      setTimeout(() => resolve(this.getHeroes()), 2000);
+    });
+  }
+  // #enddocregion get-heroes-slowly
+  // #docregion
+  // #docregion just-get-heroes
+}

aio/content/examples/toh-pt4/src/app/hero.ts

@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}

aio/content/examples/toh-pt4/src/app/mock-heroes.ts

@@ -0,0 +1,15 @@
+// #docregion
+import { Hero } from './hero';
+
+export const HEROES: Hero[] = [
+  {id: 11, name: 'Mr. Nice'},
+  {id: 12, name: 'Narco'},
+  {id: 13, name: 'Bombasto'},
+  {id: 14, name: 'Celeritas'},
+  {id: 15, name: 'Magneta'},
+  {id: 16, name: 'RubberMan'},
+  {id: 17, name: 'Dynama'},
+  {id: 18, name: 'Dr IQ'},
+  {id: 19, name: 'Magma'},
+  {id: 20, name: 'Tornado'}
+];

aio/content/examples/toh-pt4/src/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Angular Tour of Heroes</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>

aio/content/examples/toh-pt4/src/main.1.ts

@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/toh-pt4/src/main.ts

@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);