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

docs(toh-3/ts): copyedits

Browse Source 
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 ### 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 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 npm start
:marked :marked
@ -54,7 +54,7 @@ code-example(format="." language="bash").
### Separating the Hero Detail Component ### Separating the Hero Detail Component
Add a new file named `hero-detail.component.ts` to the `app` folder and create `HeroDetailComponent` as follows. 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 .l-sub-section
:marked :marked
### Naming conventions ### 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". 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. case sensitivity on the server or in source control.
<!-- TODO <!-- 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. So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
The result looks like this: 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 :marked
Now our hero detail layout exists only in the `HeroDetailComponent`. 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. 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 :marked
We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files. 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 :marked
#### The *hero* property is an ***input*** #### The *hero* property is an ***input***
@ -171,7 +172,7 @@ code-example(format=".")
:marked :marked
The `AppComponent`’s template should now look like this 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 :marked
Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list. 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. The detail should update every time the user picks a new hero.