@@ -2,10 +2,12 @@ include ../_util-fns
2
2
3
3
:marked
4
4
## Setup to develop locally
5
- Application development takes place in a local development environment, like your machine.
6
-
7
5
Follow the [setup](../guide/setup.html) instructions for creating a new project
8
6
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") -->
9
11
The file structure should look like this:
10
12
11
13
.filetree
@@ -26,20 +28,21 @@ include ../_util-fns
26
28
When you're done with this page, the app should look like this <live-example></live-example>.
27
29
28
30
## 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 :
30
32
31
33
code-example( language ="sh" class ="code-shell" ) .
32
34
npm start
33
35
34
36
: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.
37
41
38
42
.l-main-section
39
43
: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
43
46
for a hero named "Windstorm."
44
47
45
48
+ 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").
52
55
:marked
53
56
The browser refreshes and displays the title and hero name.
54
57
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
+
57
62
.l-sub-section
58
63
:marked
59
64
Read more about interpolation in the [Displaying Data](../guide/displaying-data.html) page.
@@ -71,7 +76,7 @@ code-example(language="sh" class="code-shell").
71
76
72
77
:marked
73
78
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`.
75
80
76
81
+ makeExample('toh-1/ts/app/app.component.ts' , 'hero-property-1' , 'app.component.ts (hero property)' )( format ="." )
77
82
@@ -87,16 +92,17 @@ code-example(language="sh" class="code-shell").
87
92
88
93
To show all of the hero's properties,
89
94
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>.
94
100
95
101
+ makeExample('toh-1/ts/app/app.component.1.ts' , 'multi-line-strings' , 'app.component.ts (AppComponent\' s template)' )( format ='.' )
96
102
97
103
.l-main-section
98
104
:marked
99
- ## Editing the hero name
105
+ ## Edit the hero name
100
106
101
107
Users should be able to edit the hero name in an `<input>` textbox.
102
108
The textbox should both _display_ the hero's `name` property
0 commit comments