docs(toh-3/dart): copyedits and new snake_case glossary entry (#1629)

Author: chalin

public/docs/_examples/toh-3/dart/lib/app_component.dart

@@ -10,7 +10,7 @@ import 'hero_detail_component.dart';
 
 @Component(
     selector: 'my-app',
-// #docregion hero-detail-template
+    // #docregion hero-detail-template
     template: '''
       <h1>{{title}}</h1>
       <h2>My Heroes</h2>
@@ -23,8 +23,9 @@ import 'hero_detail_component.dart';
       </ul>
       <my-hero-detail [hero]="selectedHero"></my-hero-detail>
     ''',
-// #enddocregion hero-detail-template
-    styles: const ['''
+    // #enddocregion hero-detail-template
+    styles: const [
+      '''
       .selected {
         background-color: #CFD8DC !important;
         color: white;
@@ -73,17 +74,16 @@ import 'hero_detail_component.dart';
       }
     '''
     ],
-// #docregion directives
-    directives: const [
-      HeroDetailComponent
-    ])
-// #enddocregion directives
+    // #docregion directives
+    directives: const [HeroDetailComponent]
+    // #enddocregion directives
+    )
 class AppComponent {
   final String title = 'Tour of Heroes';
   final List<Hero> heroes = mockHeroes;
   Hero selectedHero;
 
-  onSelect(Hero hero) {
+  void onSelect(Hero hero) {
     selectedHero = hero;
   }
 }

public/docs/_examples/toh-3/dart/lib/hero.dart

@@ -5,4 +5,3 @@ class Hero {
 
   Hero(this.id, this.name);
 }
-// #enddocregion

public/docs/_examples/toh-3/dart/lib/hero_detail_component.dart

@@ -11,29 +11,26 @@ import 'hero.dart';
 // #docregion v1
 @Component(
     selector: 'my-hero-detail',
-// #enddocregion v1
+    // #enddocregion v1
     // #docregion template
     template: '''
-    <div *ngIf="hero != null">
-      <h2>{{hero.name}} details!</h2>
-      <div><label>id: </label>{{hero.id}}</div>
-      <div>
-        <label>name: </label>
-        <input [(ngModel)]="hero.name" placeholder="name">
-      </div>
-    </div>
-  '''
+      <div *ngIf="hero != null">
+        <h2>{{hero.name}} details!</h2>
+        <div><label>id: </label>{{hero.id}}</div>
+        <div>
+          <label>name: </label>
+          <input [(ngModel)]="hero.name" placeholder="name">
+        </div>
+      </div>'''
     // #enddocregion template
-// #docregion v1
+    // #docregion v1
     )
 class HeroDetailComponent {
-// #enddocregion v1
-// #docregion inputs
+  // #enddocregion v1
+  // #docregion inputs
   @Input()
-// #docregion hero
+  // #docregion hero
   Hero hero;
-// #enddocregion hero
-// #enddocregion inputs
-// #docregion v1
+  // #enddocregion hero, inputs
+  // #docregion v1
 }
-// #enddocregion v1

public/docs/dart/latest/glossary.jade

@@ -12,7 +12,19 @@ include _util-fns
 !=partial('../../ts/latest/_fragments/glossary-f-l')
 !=partial('../../ts/latest/_fragments/glossary-m1')
 //!=partial('../../ts/latest/_fragments/glossary-m2') not needed in dart
-!=partial('../../ts/latest/_fragments/glossary-n-s')
+!=partial('../../ts/latest/_fragments/glossary-n-s-1')
+
+:marked
+  ## snake_case
+.l-sub-section
+  :marked
+    The practice of writing compound words or phrases such that each word is separated by an underscore (`_`). 
+    
+    Library and file names are often spelled in snake_case. Examples include: `angular2_tour_of_heroes` and `app_component.dart`.
+    
+    This form is also known as **underscore case**.
+
+!=partial('../../ts/latest/_fragments/glossary-n-s-2')
 !=partial('../../ts/latest/_fragments/glossary-t1')
 //!=partial('../../ts/latest/_fragments/glossary-t2') notneeded in dart
 !=partial('../../ts/latest/_fragments/glossary-u-z')

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

@@ -26,10 +26,9 @@ include ../_util-fns
     .children
       .file index.html
       .file main.dart
+      .file styles.css
     .file pubspec.yaml
 
-// Add       .file styles.css
-
 .p  
 
 .callout.is-helpful

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

@@ -29,6 +29,7 @@ p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
     .children
       .file index.html
       .file main.dart
+      .file styles.css
     .file pubspec.yaml
 :marked
   ### Keep the app compiling and running

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

@@ -21,12 +21,13 @@ p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
     .children
       .file index.html
       .file main.dart
+      .file styles.css
     .file pubspec.yaml
 :marked
   ### Keep the app compiling and running
   We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing
 
-code-example(format="." language="bash").
+code-example(language="bash").
   pub serve
 
 :marked
@@ -50,7 +51,7 @@ code-example(format="." language="bash").
   ### Separating the Hero Detail Component
   Add a new file named `hero_detail_component.dart` to the `lib` folder and create `HeroDetailComponent` as follows.
 
-+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'v1', 'hero_detail_component.dart (initial version)')(format=".")
++makeExample('toh-3/dart/lib/hero_detail_component.dart', 'v1', 'lib/hero_detail_component.dart (initial version)')(format=".")
 .l-sub-section
   :marked
     ### Naming conventions
@@ -61,7 +62,8 @@ code-example(format="." language="bash").
 
     All of our component names end in "Component".  All of our component file names end in "_component".
 
-    We spell our filenames in lower underscore case (AKA "snake_case") so we don't worry about
+    We spell our filenames in lower **underscore case** 
+    (AKA **[snake_case](../guide/glossary.html#!#snake_case)**) so we don't worry about
     case sensitivity on the server or in source control.
 
     <!-- TODO
@@ -89,26 +91,26 @@ code-example(format="." language="bash").
   So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
   The result looks like this:
 
-+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'template', 'hero_detail_component.dart (template)')(format=".")
++makeExample('toh-3/dart/lib/hero_detail_component.dart', 'template', 'lib/hero_detail_component.dart (template)')(format=".")
 
 :marked
   Now our hero detail layout exists only in the `HeroDetailComponent`.
 
   #### Add the *hero* property
   Let’s add that `hero` property we were talking about to the component class.
-+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero')(format=".")
++makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero')
 :marked
   Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app_component.dart` file.
   We have two components, each in their own file, that need to reference the `Hero` class.
 
   We solve the problem by relocating the `Hero` class from `app_component.dart` to its own `hero.dart` file.
 
-+makeExample('toh-3/dart/lib/hero.dart', null, 'hero.dart (Exported Hero class)')(format=".")
++makeExample('toh-3/dart/lib/hero.dart', '', 'lib/hero.dart')(format=".")
 
 :marked
-  Add the following import statement near the top of both `app_component.dart` and `hero_detail_component.dart`.
+  Add the following import statement near the top of **both `app_component.dart` and `hero_detail_component.dart`**.
 
-+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero-import', 'hero_detail_component.dart and app_component.dart (Import the Hero class)')(format=".")
++makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero-import')
 
 :marked
   #### The *hero* property is an ***input***
@@ -167,7 +169,7 @@ code-example(format=".")
 :marked
   The `AppComponent`’s template should now look like this
 
-+makeExample('toh-3/dart/lib/app_component.dart', 'hero-detail-template', 'app_component.dart (Template)')(format=".")
++makeExample('toh-3/dart/lib/app_component.dart', 'hero-detail-template', 'app_component.dart (template)')(format=".")
 :marked
   Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
   The detail should update every time the user picks a new hero.
@@ -213,6 +215,7 @@ code-example(format=".")
     .children
       .file index.html
       .file main.dart
+      .file styles.css
     .file pubspec.yaml
 :marked
   Here are the code files we discussed in this chapter.
@@ -237,6 +240,8 @@ code-example(format=".")
   * We learned to bind a parent component to a child component.
   * We learned to declare the application directives we need in a `directives` list.
 
+p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
+
 .l-main-section
 :marked
   ## The Road Ahead

public/docs/ts/latest/glossary.jade

@@ -150,9 +150,9 @@ include _util-fns
   ## dash-case
 .l-sub-section
   :marked
-    The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-). 
+    The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`). 
 
-    Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and the `hero-list.component.ts`.
+    Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and `hero-list.component.ts`.
 
     This form is also known as [kebab-case](#kebab-case).
 
@@ -408,9 +408,9 @@ include _util-fns
   ## kebab-case
 .l-sub-section
   :marked
-    The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-). 
+    The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`). 
 
-    Directive selectors and the root of filenames are often spelled in kebab-case. Examples include: `my-app` and the `hero-list.component.ts`.
+    Directive selectors and the root of filenames are often spelled in kebab-case. Examples include: `my-app` and `hero-list.component.ts`.
 
     This form is also known as [dash-case](#dash-case).
 
@@ -480,7 +480,7 @@ include _util-fns
 
 // #enddocregion m2
 
-// #docregion n-s
+// #docregion n-s-1
 - var lang = current.path[1]
 - var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>'
 - var atSym = lang === 'js' ? '' : '@'
@@ -570,6 +570,7 @@ include _util-fns
 
 <a id="S"></a>
 .l-main-section
+// #enddocregion n-s-1
 :marked
   ## Scoped Package
 .l-sub-section
@@ -582,9 +583,9 @@ include _util-fns
     We import a scoped package the same way we'd import a *normal* package. 
     The only difference, from a consumer perspective, 
     is that the package name begins with the Angular *scope name*, `@angular`.
-// #enddocregion n-s
-+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
-// #docregion n-s
+
+  +makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
+// #docregion n-s-2
 
 :marked
   ## Structural Directive
@@ -596,7 +597,7 @@ include _util-fns
 
     The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
     good examples in this category.
-// #enddocregion n-s
+// #enddocregion n-s-2
 
 // #docregion t1
 <a id="T"></a>