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

Author: wardbell

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-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/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/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/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/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
 @Component({
-  selector: 'my-hero-detail',
-// #enddocregion v1
-  // #docregion template
+  selector: 'hero-detail',
   template: `
     <div *ngIf="hero">
       <h2>{{hero.name}} details!</h2>
@@ -23,17 +17,12 @@ import { Hero } from './hero';
       </div>
     </div>
   `
-  // #enddocregion template
-// #docregion v1
 })
+// #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
+

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

@@ -2,7 +2,8 @@
   "description": "Tour of Heroes: Part 3",
   "files":[
     "!**/*.d.ts",
-    "!**/*.js"
+    "!**/*.js",
+    "!**/*.[1].*"
   ],
   "tags": ["tutorial", "tour", "heroes"]
 }

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

@@ -17,7 +17,7 @@ import { HeroService } from './hero.service.2';
   <div *ngFor="let hero of heroes" (click)="onSelect(hero)">
     {{hero.name}}
   </div>
-  <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+  <hero-detail [hero]="selectedHero"></hero-detail>
   `,
   // #docregion providers
   providers: [HeroService]

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

@@ -20,7 +20,7 @@ import { HeroService } from './hero.service';
         <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 template
   styles: [`

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

@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'my-hero-detail',
+  selector: 'hero-detail',
   template: `
     <div *ngIf="hero">
       <h2>{{hero.name}} details!</h2>

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

@@ -57,7 +57,7 @@ describe('Tutorial part 5', () => {
       selectedHero: element(by.css('my-app li.selected')),
       selectedHeroSubview: element(by.css('my-app my-heroes > div')),
 
-      heroDetail: element(by.css('my-app my-hero-detail > div'))
+      heroDetail: element(by.css('my-app hero-detail > div'))
     };
   }
 

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

@@ -11,7 +11,7 @@ import { HeroService }  from './hero.service';
 // #docregion metadata
 @Component({
   moduleId: module.id,
-  selector: 'my-hero-detail',
+  selector: 'hero-detail',
   templateUrl: './hero-detail.component.html',
   // #enddocregion metadata, v2
   styleUrls: [ './hero-detail.component.css' ]

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

@@ -63,7 +63,7 @@ describe('Tutorial part 6', () => {
       selectedHero: element(by.css('my-app li.selected')),
       selectedHeroSubview: element(by.css('my-app my-heroes > div:last-child')),
 
-      heroDetail: element(by.css('my-app my-hero-detail > div')),
+      heroDetail: element(by.css('my-app hero-detail > div')),
 
       searchBox: element(by.css('#search-box')),
       searchResults: element.all(by.css('.search-result'))

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

@@ -9,7 +9,7 @@ import { HeroService } from './hero.service';
 
 @Component({
   moduleId: module.id,
-  selector: 'my-hero-detail',
+  selector: 'hero-detail',
   templateUrl: './hero-detail.component.html',
   styleUrls: [ './hero-detail.component.css' ]
 })

public/docs/ts/latest/guide/router.jade

@@ -802,7 +802,7 @@ figure.image-display
     - Delete the `selector` (routed component don't need them).
     - Delete the `<h1>`.
     - Relabel the `<h2>` to `<h2>HEROES</h2>`.
-    - Delete the `<my-hero-detail>` at the bottom of the template.
+    - Delete the `<hero-detail>` at the bottom of the template.
     - Rename the `AppComponent` class to `HeroListComponent`.
   - Copy the `hero-detail.component.ts` and the `hero.service.ts` files into the `heroes` subfolder.
   - Create a (pre-routing) `heroes.module.ts` in the heroes folder that looks like this:

public/docs/ts/latest/guide/style-guide.jade

@@ -68,6 +68,8 @@ a(id='toc')
   to all components, services, and other symbols. 
   This helps make the app cleaner, easier to read and maintain, and more testable.
 
+a#rule-of-one
+:marked
   ### <a id="01-01"></a>_Rule of One_
   #### <a href="#01-01">Style 01-01</a>
 .s-rule.do

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

@@ -27,6 +27,8 @@ include ../_util-fns
 :marked
   When you're done with this page, the app should look like this <live-example></live-example>.
 
+a#keep-transpiling
+:marked
   ## Keep the app transpiling and running
   Enter the following command in the terminal window: