Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(toh-3/ts): copyedits #1630

Closed
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions public/docs/ts/latest/tutorial/toh-pt3.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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`.
Expand All @@ -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***
Expand Down Expand Up @@ -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.
Expand Down