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

Commit 9ad9ede

Browse files
committed
docs(toh-3/ts): copyedits
1 parent 074a33a commit 9ad9ede

File tree

1 file changed

+9
-8
lines changed

1 file changed

+9
-8
lines changed

public/docs/ts/latest/tutorial/toh-pt3.jade

+9-8
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
3030
### Keep the app transpiling and running
3131
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
3232

33-
code-example(format="." language="bash").
33+
code-example(language="bash").
3434
npm start
3535

3636
:marked
@@ -54,7 +54,7 @@ code-example(format="." language="bash").
5454
### Separating the Hero Detail Component
5555
Add a new file named `hero-detail.component.ts` to the `app` folder and create `HeroDetailComponent` as follows.
5656

57-
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'hero-detail.component.ts (initial version)')(format=".")
57+
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'app/hero-detail.component.ts (initial version)')(format=".")
5858
.l-sub-section
5959
:marked
6060
### Naming conventions
@@ -65,7 +65,8 @@ code-example(format="." language="bash").
6565

6666
All of our component names end in "Component". All of our component file names end in ".component".
6767

68-
We spell our file names in lower dash case (AKA "kebab-case") so we don't worry about
68+
We spell our file names in lower **[dash case](../guide/glossary.html#!#dash-case)**
69+
(AKA **[kebab-case](../guide/glossary.html#!#kebab-case)**) so we don't worry about
6970
case sensitivity on the server or in source control.
7071

7172
<!-- TODO
@@ -92,7 +93,7 @@ code-example(format="." language="bash").
9293
So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
9394
The result looks like this:
9495

95-
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'hero-detail.component.ts (template)')(format=".")
96+
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'app/hero-detail.component.ts (template)')(format=".")
9697

9798
:marked
9899
Now our hero detail layout exists only in the `HeroDetailComponent`.
@@ -106,13 +107,13 @@ code-example(format="." language="bash").
106107

107108
We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
108109

109-
+makeExample('toh-3/ts/app/hero.ts', null, 'hero.ts (Exported Hero class)')(format=".")
110+
+makeExample('toh-3/ts/app/hero.ts', '', 'app/hero.ts')(format=".")
110111

111112
:marked
112113
We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files.
113-
Add the following import statement near the top of both `app.component.ts` and `hero-detail.component.ts`.
114+
Add the following import statement near the top of **both `app.component.ts` and `hero-detail.component.ts`**.
114115

115-
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import', 'hero-detail.component.ts and app.component.ts (Import the Hero class)')
116+
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import')
116117

117118
:marked
118119
#### The *hero* property is an ***input***
@@ -171,7 +172,7 @@ code-example(format=".")
171172
:marked
172173
The `AppComponent`’s template should now look like this
173174

174-
+makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (Template)')(format='.')
175+
+makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (template)')(format='.')
175176
:marked
176177
Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
177178
The detail should update every time the user picks a new hero.

0 commit comments

Comments
 (0)