docs(toh): make a few corrections

closes #967
This commit is contained in:
Foxandxss 2016-03-15 13:24:50 +01:00 committed by Ward Bell
parent 11160f09ab
commit b2f2fb87ec
6 changed files with 11 additions and 7 deletions

View File

@ -26,7 +26,7 @@ template:`
<div><label>id: </label>{{hero.id}}</div> <div><label>id: </label>{{hero.id}}</div>
<div> <div>
<label>name: </label> <label>name: </label>
<div><input value="{{hero.name}}" placeholder="name"></div> <input value="{{hero.name}}" placeholder="name">
</div> </div>
` `
// #enddocregion editing-Hero // #enddocregion editing-Hero

View File

@ -16,7 +16,7 @@ interface Hero {
<div><label>id: </label>{{hero.id}}</div> <div><label>id: </label>{{hero.id}}</div>
<div> <div>
<label>name: </label> <label>name: </label>
<div><input [(ngModel)]="hero.name" placeholder="name"></div> <input [(ngModel)]="hero.name" placeholder="name">
</div> </div>
` `
}) })

View File

@ -1,9 +1,10 @@
// #docplaster // #docplaster
// #docregion // #docregion
// #docregion just-get-heroes // #docregion just-get-heroes
import {Injectable} from 'angular2/core';
import {Hero} from './hero'; import {Hero} from './hero';
import {HEROES} from './mock-heroes'; import {HEROES} from './mock-heroes';
import {Injectable} from 'angular2/core';
@Injectable() @Injectable()
export class HeroService { export class HeroService {

View File

@ -2,7 +2,7 @@
<h3>Top Heroes</h3> <h3>Top Heroes</h3>
<div class="grid grid-pad"> <div class="grid grid-pad">
<!-- #docregion click --> <!-- #docregion click -->
<div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4" > <div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
<!-- #enddocregion click --> <!-- #enddocregion click -->
<div class="module hero"> <div class="module hero">
<h4>{{hero.name}}</h4> <h4>{{hero.name}}</h4>

View File

@ -34,7 +34,7 @@ include ../_util-fns
.file hero-detail.component.ts .file hero-detail.component.ts
.file main.ts .file main.ts
.file node_modules ... .file node_modules ...
.file typings ... .file typings ...
.file index.html .file index.html
.file package.json .file package.json
.file tsconfig.json .file tsconfig.json
@ -70,7 +70,7 @@ code-example(format="." language="bash").
.l-sub-section .l-sub-section
:marked :marked
We've adopted a convention in which we spell the name of a service in lowercase followed by `.service`. We've adopted a convention in which we spell the name of a service in lowercase followed by `.service`.
If the service name were multi-word, we'd spell the base filename with lower dash case (AKA kebab-case). If the service name were multi-word, we'd spell the base filename with lower dash case (AKA "kebab-case").
The `SpecialSuperHeroService` would be defined in the `special-super-hero.service.ts` file. The `SpecialSuperHeroService` would be defined in the `special-super-hero.service.ts` file.
:marked :marked
We name the class `HeroService` and export it for others to import. We name the class `HeroService` and export it for others to import.

View File

@ -411,6 +411,9 @@ code-example(format='').
We inject the both the `RouteParams` service and the `HeroService` into the constructor as we've done before, We inject the both the `RouteParams` service and the `HeroService` into the constructor as we've done before,
making private variables for both: making private variables for both:
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'ctor', 'app/hero-detail.component.ts (constructor)')(format=".") +makeExample('toh-5/ts/app/hero-detail.component.ts', 'ctor', 'app/hero-detail.component.ts (constructor)')(format=".")
:marked
We tell the class that we want to implement the `OnInit` interface.
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'implement')(format=".")
:marked :marked
Inside the `ngOnInit` lifecycle hook, extract the `id` parameter value from the `RouteParams` service Inside the `ngOnInit` lifecycle hook, extract the `id` parameter value from the `RouteParams` service
and use the `HeroService` to fetch the hero with that `id`. and use the `HeroService` to fetch the hero with that `id`.
@ -679,7 +682,7 @@ figure.image-display
## Recap ## Recap
### The Road Behind ### The Road Behind
We travelled a great distance in this chapter We travelled a great distance in this chapter.
- We added the Angular *Component Router* to navigate among different components. - We added the Angular *Component Router* to navigate among different components.
- We learned how to create router links to represent navigation menu items - We learned how to create router links to represent navigation menu items
- We used router parameters to navigate to the details of user selected hero - We used router parameters to navigate to the details of user selected hero