parent
11160f09ab
commit
b2f2fb87ec
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
`
|
||||
})
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue