@@ -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
3133code-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-snippets/app.component.snippets.pt1.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-snippets/app.component.snippets.pt1.ts' , 'multi-line-strings' , 'app.component.ts (AppComponent\' s template)' )
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 a textbox.
102108
0 commit comments