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>name: </label>
<div><input value="{{hero.name}}" placeholder="name"></div>
<input value="{{hero.name}}" placeholder="name">
</div>
`
// #enddocregion editing-Hero

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<h3>Top Heroes</h3>
<div class="grid grid-pad">
<!-- #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 -->
<div class="module hero">
<h4>{{hero.name}}</h4>

View File

@ -34,7 +34,7 @@ include ../_util-fns
.file hero-detail.component.ts
.file main.ts
.file node_modules ...
.file typings ...
.file typings ...
.file index.html
.file package.json
.file tsconfig.json
@ -70,7 +70,7 @@ code-example(format="." language="bash").
.l-sub-section
:marked
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.
:marked
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,
making private variables for both:
+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
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`.
@ -679,7 +682,7 @@ figure.image-display
## Recap
### 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 learned how to create router links to represent navigation menu items
- We used router parameters to navigate to the details of user selected hero