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

Commit 514f403

Browse files
committed
docs(toh-2/dart): copyedits
1 parent 7db6684 commit 514f403

File tree

1 file changed

+19
-20
lines changed

1 file changed

+19
-20
lines changed

public/docs/dart/latest/tutorial/toh-pt2.jade

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@ include ../_util-fns
66
We’ll expand our Tour of Heroes app to display a list of heroes,
77
allow the user to select a hero, and display the hero’s details.
88

9+
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
10+
:marked
911
Let’s take stock of what we’ll need to display a list of heroes.
1012
First, we need a list of heroes. We want to display those heroes in the view’s template,
1113
so we’ll need a way to do that.
1214

13-
.callout.is-helpful
14-
header Source code
15-
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
16-
1715
.l-main-section
1816
:marked
1917
## Where We Left Off
@@ -48,7 +46,7 @@ code-example(language="bash").
4846
### Creating heroes
4947
Let’s create a list of ten heroes at the bottom of `app_component.dart`.
5048

51-
+makeExample('toh-2/dart/lib/app_component.dart', 'hero-array', 'app_component.dart (Hero list)')(format=".")
49+
+makeExample('toh-2/dart/lib/app_component.dart', 'hero-array', 'app_component.dart (hero list)')(format=".")
5250

5351
:marked
5452
The `mockHeroes` list is of type `Hero`, the class defined in part one,
@@ -59,7 +57,7 @@ code-example(language="bash").
5957
### Exposing heroes
6058
Let’s create a public property in `AppComponent` that exposes the heroes for binding.
6159

62-
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'hero-array-1', 'app_component.dart (Hero list property)')
60+
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'hero-array-1', 'app_component.dart (hero list property)')
6361

6462
.l-sub-section
6563
:marked
@@ -72,7 +70,7 @@ code-example(language="bash").
7270
Our component has `heroes`. Let’s create an unordered list in our template to display them.
7371
We’ll insert the following chunk of HTML below the title and above the hero details.
7472

75-
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-template-1', 'app_component.dart (Heroes template)')(format=".")
73+
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-template-1', 'app_component.dart (heroes template)')(format=".")
7674

7775
:marked
7876
Now we have a template that we can fill with our heroes.
@@ -103,7 +101,7 @@ code-example(language="bash").
103101
“*take each hero in the `heroes` list, store it in the local `hero` variable,
104102
and make it available to the corresponding template instance*”.
105103

106-
The `let` keyword before "hero" identifies the `hero` as a template input variable.
104+
The `let` keyword before "hero" identifies `hero` as a template input variable.
107105
We can reference this variable within the template to access a hero’s properties.
108106

109107
Learn more about `ngFor` and template input variables in the
@@ -126,21 +124,20 @@ code-example(language="bash").
126124
Let’s add some styles to our component by setting the `styles` argument of the `@Component` annotation
127125
to the following CSS classes:
128126

129-
+makeExample('toh-2/dart/lib/app_component.dart', 'styles-1', 'app_component.dart (Styling)')(format=".")
127+
+makeExample('toh-2/dart/lib/app_component.dart', 'styles-1', 'app_component.dart (styles)')(format=".")
130128

131129
:marked
132130
Notice that we again use the triple-quote notation for multi-line strings.
133131

132+
That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
133+
We'll do this in a later chapter. For now let's keep rolling.
134+
134135
When we assign styles to a component they are scoped to that specific component.
135136
Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
136137

137138
Our template for displaying the heroes should now look like this:
138139

139-
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-styled', 'app_component.dart (Styled heroes)')
140-
141-
:marked
142-
That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
143-
We'll do this in a later chapter. For now let's keep rolling.
140+
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-styled', 'app_component.dart (styled heroes)')
144141

145142
.l-main-section
146143
:marked
@@ -156,7 +153,7 @@ code-example(language="bash").
156153
### Click event
157154
We modify the `<li>` by inserting an Angular event binding to its click event.
158155

159-
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-click', 'app_component.dart (Capturing the click event)')(format=".")
156+
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-click', 'app_component.dart (template excerpt)')(format=".")
160157

161158
:marked
162159
Focus on the event binding
@@ -199,7 +196,7 @@ code-example(language="bash").
199196
At the moment, it is still referring to the old `hero` property.
200197
Let’s fix the template to bind to the new `selectedHero` property.
201198

202-
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (Binding to the selectedHero\'s name)')(format=".")
199+
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (template excerpt)')(format=".")
203200
:marked
204201
### Hide the empty detail with ngIf
205202

@@ -261,16 +258,16 @@ code-example(language="bash").
261258

262259
The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
263260
We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
264-
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-1', 'app_component.dart (Setting the CSS class)')(format=".")
261+
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-1', 'app_component.dart (setting the CSS class)')(format=".")
265262
:marked
266263
Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
267-
This is the syntax for a Property Binding, a binding in which data flows one way
264+
This is the syntax for a **property binding**, a binding in which data flows one way
268265
from the data source (the expression `hero == selectedHero`) to a property of `class`.
269-
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-2', 'app_component.dart (Styling each hero)')(format=".")
266+
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-2', 'app_component.dart (styling each hero)')(format=".")
270267

271268
.l-sub-section
272269
:marked
273-
Learn more about [Property Binding](../guide/template-syntax.html#property-binding)
270+
Learn more about [property bindings](../guide/template-syntax.html#property-binding)
274271
in the Template Syntax chapter.
275272

276273
:marked
@@ -296,6 +293,8 @@ code-example(language="bash").
296293
* We added the ability to select a hero and show the hero’s details
297294
* We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
298295

296+
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
297+
:marked
299298
### The Road Ahead
300299
Our Tour of Heroes has grown, but it’s far from complete.
301300
We can't put the entire app into a single component.

0 commit comments

Comments
 (0)