docs(toh-3): heavy copy edit; my-hero-detail -> hero-detail

Additional updates based on Ward's feedback, and more comments after I went through the last two pages of the tutorial.

docs(toh-2): replace snippets file; indent subsection; add (format='.').

docs(toh-1): code sample changes by Ward

docs(toh): copyedits to conform to Google doc standards
continues and closes PR #3032

Author: kapunahelewong

public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+let t = {
+// #docregion show-hero
+template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`
+// #enddocregion show-hero
+};
+
+t = {
+// #docregion show-hero-2
+template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`
+// #enddocregion show-hero-2
+};
+
+t = {
+// #docregion multi-line-strings
+template: `
+  <h1>{{title}}</h1>
+  <h2>{{hero.name}} details!</h2>
+  <div><label>id: </label>{{hero.id}}</div>
+  <div><label>name: </label>{{hero.name}}</div>
+  `
+// #enddocregion multi-line-strings
+};
+
+
+/*
+// #docregion name-input
+<div>
+  <label>name: </label>
+  <input [(ngModel)]="hero.name" placeholder="name">
+</div>
+// #enddocregion name-input
+*/
+
+/////////////////
+
+@Component(t)
+// #docregion app-component-1
+export class AppComponent {
+  title = 'Tour of Heroes';
+  hero = 'Windstorm';
+}
+// #enddocregion app-component-1

public/docs/_examples/toh-1/ts/app/app.component.1.ts

@@ -3,7 +3,8 @@
   "basePath": "src/",
   "files":[
     "!**/*.d.ts",
-    "!**/*.js"
+    "!**/*.js",
+    "!**/*.[1].*"
   ],
   "tags": ["tutorial", "tour", "heroes"]
 }

public/docs/_examples/toh-1/ts/plnkr.json

@@ -1,4 +1,4 @@
-// #docregion pt1
+// #docregion
 import { Component } from '@angular/core';
 
 // #docregion hero-class-1
@@ -10,6 +10,7 @@ export class Hero {
 
 @Component({
   selector: 'my-app',
+  // #docregion editing-Hero
   template: `
     <h1>{{title}}</h1>
     <h2>{{hero.name}} details!</h2>
@@ -19,6 +20,7 @@ export class Hero {
       <input [(ngModel)]="hero.name" placeholder="name">
     </div>
     `
+  // #enddocregion editing-Hero
 })
 export class AppComponent {
   title = 'Tour of Heroes';
@@ -29,4 +31,3 @@ export class AppComponent {
   };
   // #enddocregion hero-property-1
 }
-// #enddocregion pt1

public/docs/_examples/toh-1/ts/src/app/app.component.ts

@@ -1,14 +1,14 @@
 // #docregion
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
 
 import { AppComponent }  from './app.component';
 
 @NgModule({
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
   ],
   declarations: [
     AppComponent

public/docs/_examples/toh-1/ts/src/app/app.module.ts

@@ -128,6 +128,6 @@ function getPageElts() {
   return {
     heroes: element.all(by.css('my-app li')),
     selected: element(by.css('my-app li.selected')),
-    heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div'))
+    heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
   };
 }

public/docs/_examples/toh-2/e2e-spec.ts

@@ -1,34 +1,34 @@
-// #docregion ng-for
+<!-- #docregion ng-for -->
 <li *ngFor="let hero of heroes">
   <span class="badge">{{hero.id}}</span> {{hero.name}}
 </li>
-// #enddocregion ng-for
+<!-- #enddocregion ng-for -->
 
-// #docregion heroes-styled
+<!-- #docregion heroes-styled -->
 <h2>My Heroes</h2>
 <ul class="heroes">
   <li *ngFor="let hero of heroes">
     <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
 </ul>
-// #enddocregion heroes-styled
+<!-- #enddocregion heroes-styled -->
 
-// #docregion selectedHero-click
+<!-- #docregion selectedHero-click -->
 <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
-  <span class="badge">{{hero.id}}</span> {{hero.name}}
+  ...
 </li>
-// #enddocregion selectedHero-click
+<!-- #enddocregion selectedHero-click -->
 
-// #docregion selectedHero-details
+<!-- #docregion selectedHero-details -->
 <h2>{{selectedHero.name}} details!</h2>
 <div><label>id: </label>{{selectedHero.id}}</div>
 <div>
     <label>name: </label>
     <input [(ngModel)]="selectedHero.name" placeholder="name"/>
 </div>
-// #enddocregion selectedHero-details
+<!-- #enddocregion selectedHero-details -->
 
-// #docregion ng-if
+<!-- #docregion ng-if -->
 <div *ngIf="selectedHero">
   <h2>{{selectedHero.name}} details!</h2>
   <div><label>id: </label>{{selectedHero.id}}</div>
@@ -37,33 +37,33 @@ <h2>{{selectedHero.name}} details!</h2>
     <input [(ngModel)]="selectedHero.name" placeholder="name"/>
   </div>
 </div>
-// #enddocregion ng-if
+<!-- #enddocregion ng-if -->
 
-// #docregion hero-array-1
+<!-- #docregion hero-array-1 -->
 heroes = HEROES;
-// #enddocregion hero-array-1
+<!-- #enddocregion hero-array-1 -->
 
-// #docregion heroes-template-1
+<!-- #docregion heroes-template-1 -->
 <h2>My Heroes</h2>
 <ul class="heroes">
   <li>
     <!-- each hero goes here -->
   </li>
 </ul>
-// #enddocregion heroes-template-1
+<!-- #enddocregion heroes-template-1 -->
 
-// #docregion heroes-ngfor-1
+<!-- #docregion heroes-ngfor-1 -->
 <li *ngFor="let hero of heroes">
-// #enddocregion heroes-ngfor-1
+<!-- #enddocregion heroes-ngfor-1 -->
 
-// #docregion class-selected-1
+<!-- #docregion class-selected-1 -->
 [class.selected]="hero === selectedHero"
-// #enddocregion class-selected-1
+<!-- #enddocregion class-selected-1 -->
 
-// #docregion class-selected-2
+<!-- #docregion class-selected-2 -->
 <li *ngFor="let hero of heroes"
   [class.selected]="hero === selectedHero"
   (click)="onSelect(hero)">
   <span class="badge">{{hero.id}}</span> {{hero.name}}
 </li>
-// #enddocregion class-selected-2
+<!-- #enddocregion class-selected-2 -->

public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts renamed to public/docs/_examples/toh-2/ts/app/app.component.1.html

@@ -3,7 +3,8 @@
   "basePath": "src/",
   "files":[
     "!**/*.d.ts",
-    "!**/*.js"
+    "!**/*.js",
+    "!**/*.[1].*"
   ],
   "tags": ["tutorial", "tour", "heroes"]
 }

public/docs/_examples/toh-2/ts/plnkr.json

@@ -128,6 +128,6 @@ function getPageElts() {
   return {
     heroes: element.all(by.css('my-app li')),
     selected: element(by.css('my-app li.selected')),
-    heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div'))
+    heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
   };
 }

public/docs/_examples/toh-3/e2e-spec.ts

@@ -0,0 +1,12 @@
+<h1>{{title}}</h1>
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes"
+    [class.selected]="hero === selectedHero"
+    (click)="onSelect(hero)">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+<!-- #docregion hero-detail-binding -->
+<hero-detail [hero]="selectedHero"></hero-detail>
+<!-- #enddocregion hero-detail-binding -->