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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user