[WIP] docs(toh): copyedits to conform to Google doc standards (#3032)

public/docs/_examples/toh-1/ts/app/app.component.1.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/plnkr.json

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

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

@@ -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.module.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-2/e2e-spec.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/ts-snippets/app.component.snippets.pt2.ts → public/docs/_examples/toh-2/ts/app/app.component.1.html

@@ -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/plnkr.json

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

public/docs/_examples/toh-3/e2e-spec.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-3/ts/app/app.component.1.html

@@ -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 -->

public/docs/_examples/toh-3/ts/app/hero-detail.component.1.ts

@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion v1
+import { Component } from '@angular/core';
+
+// #enddocregion v1
+// #docregion hero-import
+import { Hero } from './hero';
+// #enddocregion hero-import
+
+// #docregion v1
+@Component({
+  selector: 'hero-detail',
+// #enddocregion v1
+  // #docregion template
+  template: `
+    <div *ngIf="hero">
+      <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
+})
+export class HeroDetailComponent {
+// #enddocregion v1
+// #docregion hero
+  hero: Hero;
+// #enddocregion hero
+// #docregion v1
+}
+// #enddocregion v1

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

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

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

@@ -31,7 +31,7 @@ const HEROES: Hero[] = [
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
     </ul>
-    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+    <hero-detail [hero]="selectedHero"></hero-detail>
   `,
 // #enddocregion hero-detail-template
   styles: [`

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

@@ -3,22 +3,22 @@ import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 
-import { AppComponent }  from './app.component';
+import { AppComponent }        from './app.component';
 // #docregion hero-detail-import
 import { HeroDetailComponent } from './hero-detail.component';
 // #enddocregion hero-detail-import
 
-// #docregion declarations
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule
   ],
+// #docregion declarations
   declarations: [
     AppComponent,
     HeroDetailComponent
   ],
+// #enddocregion declarations
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
-// #enddocregion declarations

public/docs/_examples/toh-3/ts/src/app/hero-detail.component.ts

@@ -1,18 +1,12 @@
-// #docplaster
 // #docregion
-// #docregion v1
+// #docregion import-input
 import { Component, Input } from '@angular/core';
+// #enddocregion import-input
 
-// #enddocregion v1
-// #docregion hero-import
 import { Hero } from './hero';
-// #enddocregion hero-import
-
-// #docregion v1
+// #docregion template
 @Component({
-  selector: 'my-hero-detail',
-// #enddocregion v1
-  // #docregion template
+  selector: 'hero-detail',
   template: `
     <div *ngIf="hero">
       <h2>{{hero.name}} details!</h2>
@@ -23,17 +17,13 @@ import { Hero } from './hero';
       </div>
     </div>
   `
-  // #enddocregion template
-// #docregion v1
 })
+// #enddocregion template
+// #docregion class
 export class HeroDetailComponent {
-// #enddocregion v1
-// #docregion hero-input
-  @Input()
 // #docregion hero
-  hero: Hero;
+  @Input() hero: Hero;
 // #enddocregion hero
-// #enddocregion hero-input
-// #docregion v1
 }
-// #enddocregion v1
+// #docregion class
+