cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add HeroService to code tabs and fix headers (#22373)

Browse Source 
PR Close #22373
This commit is contained in:
Kapunahele Wong 2018-02-22 11:08:07 -05:00 committed by Kara Erickson
parent 2a236b4066
commit 311232004c
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
aio/content/tutorial/toh-pt5.md
View File

@ -15,7 +15,7 @@ When you’re done, users will be able to navigate the app like this:
</figure> </figure>
## Add the _AppRoutingModule_ ## Add the `AppRoutingModule`
An Angular best practice is to load and configure the router in a separate, top-level module An Angular best practice is to load and configure the router in a separate, top-level module
that is dedicated to routing and imported by the root `AppModule`. that is dedicated to routing and imported by the root `AppModule`.
@ -138,7 +138,7 @@ You should see the familiar heroes master/detail view.
{@a routerlink} {@a routerlink}
## Add a navigation link (_routerLink_) ## Add a navigation link (`routerLink`)
Users shouldn't have to paste a route URL into the address bar. Users shouldn't have to paste a route URL into the address bar.
They should be able to click a link to navigate. They should be able to click a link to navigate.
@ -283,7 +283,7 @@ The user should be able to get to these details in three ways.
In this section, you'll enable navigation to the `HeroDetailsComponent` In this section, you'll enable navigation to the `HeroDetailsComponent`
and liberate it from the `HeroesComponent`. and liberate it from the `HeroesComponent`.
### Delete _hero details_ from _HeroesComponent_ ### Delete _hero details_ from `HeroesComponent`
When the user clicks a hero item in the `HeroesComponent`, When the user clicks a hero item in the `HeroesComponent`,
the app should navigate to the `HeroDetailComponent`, the app should navigate to the `HeroDetailComponent`,
@ -325,7 +325,7 @@ At this point, all application routes are in place.
title="src/app/app-routing.module.ts (all routes)"> title="src/app/app-routing.module.ts (all routes)">
</code-example> </code-example>
### _DashboardComponent_ hero links ### `DashboardComponent` hero links
The `DashboardComponent` hero links do nothing at the moment. The `DashboardComponent` hero links do nothing at the moment.
@ -343,7 +343,7 @@ to insert the current interation's `hero.id` into each
[`routerLink`](#routerlink). [`routerLink`](#routerlink).
{@a heroes-component-links} {@a heroes-component-links}
### _HeroesComponent_ hero links ### `HeroesComponent` hero links
The hero items in the `HeroesComponent` are `<li>` elements whose click events The hero items in the `HeroesComponent` are `<li>` elements whose click events
are bound to the component's `onSelect()` method. are bound to the component's `onSelect()` method.
@ -446,7 +446,7 @@ The browser refreshes and the app crashes with a compiler error.
`HeroService` doesn't have a `getHero()` method. `HeroService` doesn't have a `getHero()` method.
Add it now. Add it now.
### Add *HeroService.getHero()* ### Add `HeroService.getHero()`
Open `HeroService` and add this `getHero()` method Open `HeroService` and add this `getHero()` method
@ -518,7 +518,7 @@ Here are the code files discussed on this page and your app should look like thi
{@a approutingmodule} {@a approutingmodule}
{@a appmodule} {@a appmodule}
#### _AppRoutingModule_ and _AppModule_ #### _AppRoutingModule_, _AppModule_, and _HeroService_
<code-tabs> <code-tabs>
<code-pane <code-pane
@ -529,6 +529,10 @@ Here are the code files discussed on this page and your app should look like thi
title="src/app/app.module.ts" title="src/app/app.module.ts"
path="toh-pt5/src/app/app.module.ts"> path="toh-pt5/src/app/app.module.ts">
</code-pane> </code-pane>
<code-pane
title="src/app/hero.service.ts"
path="toh-pt5/src/app/hero.service.ts">
</code-pane>
</code-tabs> </code-tabs>
{@a appcomponent} {@a appcomponent}
@ -565,6 +569,7 @@ Here are the code files discussed on this page and your app should look like thi
{@a heroescomponent} {@a heroescomponent}
#### _HeroesComponent_ #### _HeroesComponent_
<code-tabs> <code-tabs>
<code-pane <code-pane
title="src/app/heroes/heroes.component.html" path="toh-pt5/src/app/heroes/heroes.component.html"> title="src/app/heroes/heroes.component.html" path="toh-pt5/src/app/heroes/heroes.component.html">