honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(toh-3/ts): copyedits 

closes #1630
This commit is contained in:
Patrice Chalin 2016-06-08 17:23:46 -07:00 committed by Ward Bell
parent 16848fc822
commit 070cb5a193
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/docs/ts/latest/tutorial/toh-pt3.jade
View File

@ -30,7 +30,7 @@ p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
### Keep the app transpiling and running
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
code-example(format="." language="bash").
code-example(language="bash").
npm start
:marked
@ -54,7 +54,7 @@ code-example(format="." language="bash").
### Separating the Hero Detail Component
Add a new file named `hero-detail.component.ts` to the `app` folder and create `HeroDetailComponent` as follows.
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'hero-detail.component.ts (initial version)')(format=".")
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'app/hero-detail.component.ts (initial version)')(format=".")
.l-sub-section
:marked
### Naming conventions
@ -65,7 +65,8 @@ code-example(format="." language="bash").
All of our component names end in "Component". All of our component file names end in ".component".
We spell our file names in lower dash case (AKA "kebab-case") so we don't worry about
We spell our file names in lower **[dash case](../guide/glossary.html#!#dash-case)**
(AKA **[kebab-case](../guide/glossary.html#!#kebab-case)**) so we don't worry about
case sensitivity on the server or in source control.
<!-- TODO
@ -92,7 +93,7 @@ code-example(format="." language="bash").
So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
The result looks like this:
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'hero-detail.component.ts (template)')(format=".")
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'app/hero-detail.component.ts (template)')(format=".")
:marked
Now our hero detail layout exists only in the `HeroDetailComponent`.
@ -106,13 +107,13 @@ code-example(format="." language="bash").
We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
+makeExample('toh-3/ts/app/hero.ts', null, 'hero.ts (Exported Hero class)')(format=".")
+makeExample('toh-3/ts/app/hero.ts', '', 'app/hero.ts')(format=".")
:marked
We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files.
Add the following import statement near the top of both `app.component.ts` and `hero-detail.component.ts`.
Add the following import statement near the top of **both `app.component.ts` and `hero-detail.component.ts`**.
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import', 'hero-detail.component.ts and app.component.ts (Import the Hero class)')
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import')
:marked
#### The *hero* property is an ***input***
@ -171,7 +172,7 @@ code-example(format=".")
:marked
The `AppComponent`’s template should now look like this
+makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (Template)')(format='.')
+makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (template)')(format='.')
:marked
Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
The detail should update every time the user picks a new hero.