docs(toh): resolve conflicts, edit copy

Author: kapunahelewong

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

@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
 // #enddocregion import-input
 
 import { Hero } from './hero';
-
+// #docregion template
 @Component({
   selector: 'hero-detail',
   template: `
@@ -18,6 +18,7 @@ import { Hero } from './hero';
     </div>
   `
 })
+// #enddocregion template
 // #docregion class
 export class HeroDetailComponent {
 // #docregion hero

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

@@ -10,12 +10,7 @@ import { Hero }         from './hero';
 import { HeroService }  from './hero.service';
 // #docregion metadata
 @Component({
-<<<<<<< HEAD:public/docs/_examples/toh-5/ts/src/app/hero-detail.component.ts
-  selector: 'my-hero-detail',
-=======
-  moduleId: module.id,
   selector: 'hero-detail',
->>>>>>> docs(toh-3): heavy copy edit; my-hero-detail -> hero-detail:public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
   templateUrl: './hero-detail.component.html',
   // #enddocregion metadata, v2
   styleUrls: [ './hero-detail.component.css' ]

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

@@ -8,12 +8,7 @@ import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
-<<<<<<< HEAD:public/docs/_examples/toh-6/ts/src/app/hero-detail.component.ts
-  selector: 'my-hero-detail',
-=======
-  moduleId: module.id,
   selector: 'hero-detail',
->>>>>>> docs(toh-3): heavy copy edit; my-hero-detail -> hero-detail:public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
   templateUrl: './hero-detail.component.html',
   styleUrls: [ './hero-detail.component.css' ]
 })

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

@@ -4,10 +4,7 @@ include ../_util-fns
   ## Setup to develop locally
   Follow the [setup](../guide/setup.html) instructions for creating a new project
   named <ngio-ex path="angular-tour-of-heroes"></ngio-ex>.
-  <!-- CF: TO DO: Ward commented: if you only followed the current setup instructions, there would be many more files.
-  I just added a section to the Setup guide for deleting non-essential files. We should refer to that too.
-  See #3079 which will merge soon. The link to it would be:
-  [_Deleting non-essential files_](../guide/setup.html#non-essential "Setup: Deleting non-essential files") -->
+
   The file structure should look like this:
 
 .filetree
@@ -24,7 +21,7 @@ include ../_util-fns
       .file styles.css
       .file systemjs.config.js
       .file tsconfig.json
-    .file node_modules ... 
+    .file node_modules ...
     .file package.json
 :marked
   When you're done with this page, the app should look like this <live-example></live-example>.
@@ -40,7 +37,7 @@ code-example(language="sh" class="code-shell").
 :marked
   This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
   The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
-  
+
   You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
 
 .l-main-section
@@ -52,7 +49,7 @@ code-example(language="sh" class="code-shell").
   +makeExample('toh-1/ts/app/app.component.1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".")
 
   :marked
-    Now update the template in the `@Component` decoration with data bindings to these new properties.
+    Now update the template in the `@Component` decorator with data bindings to these new properties.
 
   +makeExample('toh-1/ts/app/app.component.1.ts', 'show-hero',  'app.component.ts (@Component)')(format='.')
 
@@ -80,7 +77,7 @@ code-example(language="sh" class="code-shell").
 
 :marked
   In the `Hero` class, refactor the component's `hero` property to be of type `Hero`,
-  then initialize it with an id of `1` and the name `Windstorm`.
+  then initialize it with an `id` of `1` and the name `Windstorm`.
 
 +makeExample('toh-1/ts/src/app/app.component.ts', 'hero-property-1', 'src/app/app.component.ts (hero property)')(format=".")
 
@@ -98,8 +95,8 @@ code-example(language="sh" class="code-shell").
   add a `<div>` for the hero's `id` property and another `<div>` for the hero's `name`.
   To keep the template readable, place each `<div>` on its own line.
 
-  The backticks around the component template let you put the `<h1>`, `<h2>`, and `<div>` elements on their own lines, 
-  thanks to the <i>template literals</i> feature in ES2015 and TypeScript. For more information, see 
+  The backticks around the component template let you put the `<h1>`, `<h2>`, and `<div>` elements on their own lines,
+  thanks to the <i>template literals</i> feature in ES2015 and TypeScript. For more information, see
   <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" target="_blank" title="template literal">Template literals</a>.
 
 
@@ -122,13 +119,13 @@ code-example(language="sh" class="code-shell").
 
 :marked
   `[(ngModel)]` is the Angular syntax to bind the `hero.name` property
-  to the textbox. 
+  to the textbox.
   Data flow _in both directions_: from the property to the textbox;
   and from the textbox back to the property.
 
   Unfortunately, immediately after this change, the application breaks.
   If you looked in the browser console, you'd see Angular complaining that
-  " 'ngModel' ... isn't a known property of 'input'."
+  "`ngModel` ... isn't a known property of `input`."
 
   Although `NgModel` is a valid Angular directive, it isn't available by default.
   It belongs to the optional `FormsModule`.
@@ -137,18 +134,18 @@ code-example(language="sh" class="code-shell").
   ### Import the _FormsModule_
 
   Open the `app.module.ts` file and import the `FormsModule` symbol from the `@angular/forms` library.
-  Then add the `FormsModule` to the `NgModule` metadata's `imports` array, which contains the list
+  Then add the `FormsModule` to the `@NgModule` metadata's `imports` array, which contains the list
   of external modules that the app uses.
-  
+
   The updated `AppModule` looks like this:
-+makeExample('toh-1/ts/app/app.module.ts', '', 'app.module.ts (FormsModule import)')
++makeExample('toh-1/ts/src/app/app.module.ts', '', 'app.module.ts (FormsModule import)')
 
 .l-sub-section
   :marked
     Read more about `FormsModule` and `ngModel` in the
-    [_Two-way data binding with ngModel_](../guide/forms.html#ngModel) section of the
+    [Two-way data binding with ngModel](../guide/forms.html#ngModel) section of the
     [Forms](../guide/forms.html) guide and the
-    [_Two-way binding with NgModel_](../guide/template-syntax.html#ngModel) section of the
+    [Two-way binding with NgModel](../guide/template-syntax.html#ngModel) section of the
     [Template Syntax](../guide/template-syntax.html) guide.
 
 :marked
@@ -171,7 +168,7 @@ code-example(language="sh" class="code-shell").
 
   Here's the complete `app.component.ts` as it stands now:
 
-+makeExample('toh-1/ts/src/app/app.component.ts', 'pt1', 'src/app/app.component.ts')
++makeExample('toh-1/ts/src/app/app.component.ts', '', 'src/app/app.component.ts')
 
 
 .l-main-section

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

@@ -27,7 +27,7 @@ include ../_util-fns
       .file styles.css
       .file systemjs.config.js
       .file tsconfig.json
-    .file node_modules ...  
+    .file node_modules ...
     .file package.json
 :marked
   ## Keep the app transpiling and running
@@ -46,7 +46,7 @@ code-example(language="sh" class="code-shell").
 :marked
   ## Displaying heroes
   To display a list of heroes, you'll add heroes to the view's template.
-  
+
   ### Create heroes
   Create an array of ten heroes.
 
@@ -65,7 +65,7 @@ code-example(language="sh" class="code-shell").
 
 :marked
   The `heroes` type isn't defined because TypeScript infers it from the `HEROES` array.
-  
+
 .l-sub-section
   :marked
     The hero data is separated from the class implementation
@@ -98,7 +98,7 @@ code-example(language="sh" class="code-shell").
     It indicates that the `<li>` element and its children
     constitute a master template.
 
-    The `ngFor` directive iterates over the component's `heroes` array 
+    The `ngFor` directive iterates over the component's `heroes` array
     and renders an instance of this template for each hero in that array.
 
     The `let hero` part of the expression identifies `hero` as the  template input variable,
@@ -167,7 +167,7 @@ code-example(language="sh" class="code-shell").
     That's the same `hero` variable you defined previously in the `ngFor` directive.
   .l-sub-section
     :marked
-      Learn more about event binding at the 
+      Learn more about event binding at the
       [User Input](../guide/user-input.html) page and the
       [Event binding](../guide/template-syntax.html#event-binding) section of the
       [Template Syntax](../guide/template-syntax.html) page.
@@ -177,7 +177,7 @@ code-example(language="sh" class="code-shell").
     You no longer need the `hero` property because you're no longer displaying a single hero; you're displaying a list of heroes.
     But the user will be able to select one of the heroes by clicking on it.
     So replace the `hero` property with this simple `selectedHero` property:
-    
+
   +makeExample('toh-2/ts/src/app/app.component.ts', 'selected-hero', 'src/app/app.component.ts (selectedHero)')
   :marked
     The hero names should all be unselected before the user picks a hero, so
@@ -197,7 +197,7 @@ code-example(language="sh" class="code-shell").
     ### Hide the empty detail with ngIf
 
     When the app loads, the `selectedHero` is undefined and won't be defined until you click a hero's name.
-    Angular can't display properties of the undefined `selectedHero` and throws the following error, 
+    Angular can't display properties of the undefined `selectedHero` and throws the following error,
     visible in the browser's console:
 
   code-example(format="nocode").
@@ -218,7 +218,7 @@ code-example(language="sh" class="code-shell").
 
   :marked
     The app no longer fails and the list of names displays again in the browser.
-  
+
   :marked
     When there is no `selectedHero`, the `ngIf` directive removes the hero detail HTML from the DOM.
     There are no hero detail elements or bindings to worry about.
@@ -238,7 +238,7 @@ code-example(language="sh" class="code-shell").
     ### Style the selected hero
 
     While the selected hero details appear below the list, it's difficult to identify the selected hero within the list itself.
-    
+
     In the `styles` metadata that you added above, there is a custom CSS class named `selected`.
     To make the selected hero more visible, you'll apply this `selected` class to the `<li>` when the user clicks on a hero name.
     For example, when the user clicks "Magneta", it should render with a distinctive but subtle background color
@@ -247,18 +247,17 @@ code-example(language="sh" class="code-shell").
   figure.image-display
     img(src='/resources/images/devguide/toh/heroes-list-selected.png' alt="Selected hero")
   :marked
-
-    In the template, add the following `[class.selected]` binding to  the `<li>`
+    In the template, add the following `[class.selected]` binding to  the `<li>`:
   +makeExample('toh-2/ts/app/app.component.1.html', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
   :marked
     When the expression (`hero === selectedHero`) is `true`, Angular adds the `selected` CSS class.
     When the expression is `false`, Angular removes the `selected` class.
-  
+
 
   .l-sub-section
     :marked
       Read more about the `[class]` binding in the [Template Syntax](../guide/template-syntax.html#ngClass "Template syntax: NgClass") guide.
-      
+
   :marked
     The final version of the `<li>` looks like this:
   +makeExample('toh-2/ts/app/app.component.1.html', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")