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

Commit 0e9da9f

Browse files
cfrangerwardbell
authored andcommitted
Additional updates based on Ward's feedback, and more comments after I went through the last two pages of the tutorial.
1 parent 4fcd3e5 commit 0e9da9f

File tree

7 files changed

+187
-173
lines changed

7 files changed

+187
-173
lines changed

public/docs/ts/latest/tutorial/index.jade

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,28 +37,28 @@ figure.image-display
3737
img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard")
3838

3939
:marked
40-
Users can click the two links above the dashboard ("Dashboard" and "Heroes")
40+
You can click the two links above the dashboard ("Dashboard" and "Heroes")
4141
to navigate between this Dashboard view and a Heroes view.
4242

43-
If a user clicks the dashboard hero "Magneta," the router opens a "Hero Details" view
44-
where the user can change the hero's name.
43+
If you click the dashboard hero "Magneta," the router opens a "Hero Details" view
44+
where you can change the hero's name.
4545

4646
figure.image-display
4747
img(src='/resources/images/devguide/toh/hero-details-1.png' alt="Details of hero in app")
4848

4949
:marked
50-
Clicking the "Back" button returns users to the Dashboard.
51-
Links at the top take them to either of the main views.
52-
If a user clicks "Heroes," the app displays the "Heroes" master list view.
50+
Clicking the "Back" button returns you to the Dashboard.
51+
Links at the top take you to either of the main views.
52+
If you click "Heroes," the app displays the "Heroes" master list view.
5353

5454
figure.image-display
5555
img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app")
5656
// CF: The ability to add heroes isn't shown in the images or discussed in this page. Should that be added?
5757
5858
:marked
59-
When a user clicks a different hero name, the read-only mini detail beneath the list reflects the new choice.
59+
When you click a different hero name, the read-only mini detail beneath the list reflects the new choice.
6060

61-
Users can click the "View Details" button to drill into the
61+
You can click the "View Details" button to drill into the
6262
editable details of the selected hero.
6363

6464
The following diagram captures all of the navigation options.

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

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ include ../_util-fns
22

33
:marked
44
## Setup to develop locally
5-
Application development takes place in a local development environment, like your machine.
6-
75
Follow the [setup](../guide/setup.html) instructions for creating a new project
86
named <ngio-ex path="angular-tour-of-heroes"></ngio-ex>.
7+
<!-- CF: TO DO: Ward commented: if you only followed the current setup instructions, there would be many more files.
8+
I just added a section to the Setup guide for deleting non-essential files. We should refer to that too.
9+
See #3079 which will merge soon. The link to it would be:
10+
[_Deleting non-essential files_](../guide/setup.html#non-essential "Setup: Deleting non-essential files") -->
911
The file structure should look like this:
1012

1113
.filetree
@@ -26,20 +28,21 @@ include ../_util-fns
2628
When you're done with this page, the app should look like this <live-example></live-example>.
2729

2830
## Keep the app transpiling and running
29-
To start the TypeScript compiler in watch mode and start the server, type the following:
31+
Enter the following command in the terminal window:
3032

3133
code-example(language="sh" class="code-shell").
3234
npm start
3335

3436
:marked
35-
This command launches the app in a browser
36-
and keeps the app running while you build the Tour of Heroes.
37+
This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
38+
The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
39+
40+
You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
3741

3842
.l-main-section
3943
:marked
40-
## Show your hero
41-
To display hero data in the app,
42-
add two properties to the `AppComponent`: a `title` property for the app name and a `hero` property
44+
## Show the hero
45+
Add two properties to the `AppComponent`: a `title` property for the app name and a `hero` property
4346
for a hero named "Windstorm."
4447

4548
+makeExample('toh-1/ts/app/app.component.1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".")
@@ -52,8 +55,10 @@ code-example(language="sh" class="code-shell").
5255
:marked
5356
The browser refreshes and displays the title and hero name.
5457

55-
The double curly braces instruct the app to read the `title` and `hero` properties from the component and render them.
56-
This is the "interpolation" form of one-way data binding.
58+
The double curly braces are Angular's *interpolation binding* syntax.
59+
These interpolation bindings present the component's `title` and `hero` property values,
60+
as strings, inside the HTML header tags.
61+
5762
.l-sub-section
5863
:marked
5964
Read more about interpolation in the [Displaying Data](../guide/displaying-data.html) page.
@@ -71,7 +76,7 @@ code-example(language="sh" class="code-shell").
7176

7277
:marked
7378
In the `Hero` class, refactor the component's `hero` property to be of type `Hero`,
74-
then initialize it with an ID of `1` and the name "Windstorm."
79+
then initialize it with an id of `1` and the name `Windstorm`.
7580

7681
+makeExample('toh-1/ts/app/app.component.ts', 'hero-property-1', 'app.component.ts (hero property)')(format=".")
7782

@@ -87,16 +92,17 @@ code-example(language="sh" class="code-shell").
8792

8893
To show all of the hero's properties,
8994
add a `<div>` for the hero's `id` property and another `<div>` for the hero's `name`.
90-
To keep the template readable, use the template strings feature
91-
in ES2015 and TypeScript:
92-
change the quotes around the template to backticks
93-
and put the `<h1>`, `<h2>`, and `<div>` elements on their own lines.
95+
To keep the template readable, place each `<div>` on its own line.
96+
97+
The backticks around the component template let you put the `<h1>`, `<h2>`, and `<div>` elements on their own lines,
98+
thanks to the <i>template literals</i> feature in ES2015 and TypeScript. For more information, see
99+
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" target="_blank" title="template literal">Template literals</a>.
94100

95101
+makeExample('toh-1/ts/app/app.component.1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)')(format='.')
96102

97103
.l-main-section
98104
:marked
99-
## Editing the hero name
105+
## Edit the hero name
100106

101107
Users should be able to edit the hero name in an `<input>` textbox.
102108
The textbox should both _display_ the hero's `name` property

0 commit comments

Comments
 (0)