docs(toh-2/dart): copyedits

Author: chalin

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

@@ -6,14 +6,12 @@ include ../_util-fns
   We’ll expand our Tour of Heroes app to display a list of heroes,
   allow the user to select a hero, and display the hero’s details.
 
+p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
+:marked
   Let’s take stock of what we’ll need to display a list of heroes.
   First, we need a list of heroes. We want to display those heroes in the view’s template,
   so we’ll need a way to do that.
 
-.callout.is-helpful
-  header Source code
-  p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
-
 .l-main-section
 :marked
   ## Where We Left Off
@@ -48,7 +46,7 @@ code-example(language="bash").
   ### Creating heroes
   Let’s create a list of ten heroes at the bottom of `app_component.dart`.
 
-+makeExample('toh-2/dart/lib/app_component.dart', 'hero-array', 'app_component.dart (Hero list)')(format=".")
++makeExample('toh-2/dart/lib/app_component.dart', 'hero-array', 'app_component.dart (hero list)')(format=".")
 
 :marked
   The `mockHeroes` list is of type `Hero`, the class defined in part one,
@@ -59,7 +57,7 @@ code-example(language="bash").
   ### Exposing heroes
   Let’s create a public property in `AppComponent` that exposes the heroes for binding.
 
-+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'hero-array-1', 'app_component.dart (Hero list property)')
++makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'hero-array-1', 'app_component.dart (hero list property)')
 
 .l-sub-section
   :marked
@@ -72,7 +70,7 @@ code-example(language="bash").
   Our component has `heroes`. Let’s create an unordered list in our template to display them.
   We’ll insert the following chunk of HTML below the title and above the hero details.
 
-+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-template-1', 'app_component.dart (Heroes template)')(format=".")
++makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-template-1', 'app_component.dart (heroes template)')(format=".")
 
 :marked
   Now we have a template that we can fill with our heroes.
@@ -103,7 +101,7 @@ code-example(language="bash").
     “*take each hero in the `heroes` list, store it in the local `hero` variable,
     and make it available to the corresponding template instance*”.
 
-    The `let` keyword before "hero" identifies the `hero` as a template input variable.
+    The `let` keyword before "hero" identifies `hero` as a template input variable.
     We can reference this variable within the template to access a hero’s properties.
 
     Learn more about `ngFor` and template input variables in the
@@ -126,21 +124,20 @@ code-example(language="bash").
   Let’s add some styles to our component by setting the `styles` argument of the `@Component` annotation
   to the following CSS classes:
 
-+makeExample('toh-2/dart/lib/app_component.dart', 'styles-1', 'app_component.dart (Styling)')(format=".")
++makeExample('toh-2/dart/lib/app_component.dart', 'styles-1', 'app_component.dart (styles)')(format=".")
 
 :marked
   Notice that we again use the triple-quote notation for multi-line strings.
 
+  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.
+  We'll do this in a later chapter. For now let's keep rolling.
+
   When we assign styles to a component they are scoped to that specific component.
   Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
 
   Our template for displaying the heroes should now look like this:
 
-+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-styled', 'app_component.dart (Styled heroes)')
-
-:marked
-  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.
-  We'll do this in a later chapter. For now let's keep rolling.
++makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-styled', 'app_component.dart (styled heroes)')
 
 .l-main-section
   :marked
@@ -156,7 +153,7 @@ code-example(language="bash").
     ### Click event
     We modify the `<li>` by inserting an Angular event binding to its click event.
 
-  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-click', 'app_component.dart (Capturing the click event)')(format=".")
+  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-click', 'app_component.dart (template excerpt)')(format=".")
 
   :marked
     Focus on the event binding
@@ -199,7 +196,7 @@ code-example(language="bash").
     At the moment, it is still referring to the old `hero` property.
     Let’s fix the template to bind to the new `selectedHero` property.
 
-  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (Binding to the selectedHero\'s name)')(format=".")
+  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (template excerpt)')(format=".")
   :marked
     ### Hide the empty detail with ngIf
 
@@ -261,16 +258,16 @@ code-example(language="bash").
 
     The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
     We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
-  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-1', 'app_component.dart (Setting the CSS class)')(format=".")
+  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-1', 'app_component.dart (setting the CSS class)')(format=".")
   :marked
     Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
-    This is the syntax for a Property Binding, a binding in which data flows one way
+    This is the syntax for a **property binding**, a binding in which data flows one way
     from the data source (the expression `hero == selectedHero`) to a property of `class`.
-  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-2', 'app_component.dart (Styling each hero)')(format=".")
+  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-2', 'app_component.dart (styling each hero)')(format=".")
 
   .l-sub-section
     :marked
-      Learn more about [Property Binding](../guide/template-syntax.html#property-binding)
+      Learn more about [property bindings](../guide/template-syntax.html#property-binding)
       in the Template Syntax chapter.
 
   :marked
@@ -296,6 +293,8 @@ code-example(language="bash").
   * We added the ability to select a hero and show the hero’s details
   * We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
 
+p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
+:marked
   ### The Road Ahead
   Our Tour of Heroes has grown, but it’s far from complete.
   We can't put the entire app into a single component.