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

Author: wardbell

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

@@ -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/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/app/app.module.ts

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

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

@@ -42,12 +42,12 @@ code-example(language="sh" class="code-shell").
     add two properties to the `AppComponent`: a `title` property for the app name and a `hero` property
     for a hero named "Windstorm."
 
-  +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".")
+  +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.
 
-  +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero')
+  +makeExample('toh-1/ts/app/app.component.1.ts', 'show-hero',  'app.component.ts (@Component)')(format='.')
 
   :marked
     The browser refreshes and displays the title and hero name.
@@ -79,7 +79,7 @@ code-example(language="sh" class="code-shell").
   Because you changed the hero from a string to an object,
   update the binding in the template to refer to the hero's `name` property.
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-2')
++makeExample('toh-1/ts/app/app.component.1.ts', 'show-hero-2')
 :marked
   The browser refreshes and continues to display the hero's name.
 
@@ -92,56 +92,56 @@ code-example(language="sh" class="code-shell").
   change the quotes around the template to backticks
   and put the `<h1>`, `<h2>`, and `<div>` elements on their own lines.
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)')
++makeExample('toh-1/ts/app/app.component.1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)')(format='.')
 
 .l-main-section
 :marked
   ## Editing the hero name
 
-  Users should be able to edit the hero name in a textbox.
+  Users should be able to edit the hero name in an `<input>` textbox.
+  The textbox should both _display_ the hero's `name` property
+  and _update_ that property as the user types.
 
-  Refactor the hero name `<label>` with `<label>` and `<input>` elements.
+  You need a two-way binding between the `<input>` form element and the `hero.name` property.
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'editing-Hero', 'app.component.ts (input element)')
+  ### Two-way binding
+
+  Refactor the hero name in the template so it looks like this:
++makeExample('toh-1/ts/app/app.component.1.ts', 'name-input')(format='.')
 :marked
-  The hero's name now appears in the `<input>` textbox,
-  but if you change the name, the change
-  isn't reflected in the `<h2>`. To get the desired behavior,
-  you can implement two-way binding.
+  `[(ngModel)]` is the Angular syntax to bind the `hero.name` property
+  to the textbox. 
+  Data flow _in both directions_: from the property to the textbox;
+  and from the textbox back to the property.
 
-  ### Two-way binding
+  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'."
 
-  When users change the name of the hero in the `<input>`,
-  the changes should appear in any place where the hero's name is bound.
-  This is known as two-way data binding.
+  Although `NgModel` is a valid Angular directive, it isn't available by default.
+  It belongs to the optional `FormsModule`.
+  You must opt-in to using that module.
 
-  Before using two-way data binding for *form inputs*, import the `FormsModule`
-  package in the Angular module. Add the `FormsModule` to the `NgModule` decorator's `imports` array, which contains the list
-  of external modules that the app uses.
-  Now you have included the forms package that includes `ngModel`.
+  ### 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
+  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)')
 
 .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
-    [Forms](../guide/forms.html) page and the
-    [Two-way binding with NgModel](../guide/template-syntax.html#ngModel) section of the
-    [Template Syntax](../guide/template-syntax.html)
-    page.
-
-
-:marked
-  Update the template to use the  `ngModel` built-in directive for two-way binding.
-  In app.component.ts, replace the `<input>` with the following HTML:
-
-code-example(language="html").
-  &lt;input [(ngModel)]="hero.name" placeholder="name">
+    [_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
+    [Template Syntax](../guide/template-syntax.html) guide.
 
 :marked
-  When the browser refreshes, you can edit the hero's name and
-  see the changes reflected immediately in the `<h2>`.
+  When the browser refreshes, the app should work again.
+  You can edit the hero's name and see the changes reflected immediately in the `<h2>` above the textbox.
 
 .l-main-section
 :marked
@@ -150,7 +150,7 @@ code-example(language="html").
 
   * The Tour of Heroes app uses the double curly braces of interpolation (a type of one-way data binding)
   to display the app title and properties of a `Hero` object.
-  * You wrote a multi-line template using ES2015's template strings to make the template readable.
+  * You wrote a multi-line template using ES2015's template literals to make the template readable.
   * You added a two-way data binding to the `<input>` element
   using the built-in `ngModel` directive. This binding both displays the hero's name and allows users to change it.
   * The `ngModel` directive propagates changes to every other binding of the `hero.name`.
@@ -159,7 +159,7 @@ code-example(language="html").
 
   Here's the complete `app.component.ts` as it stands now:
 
-+makeExample('toh-1/ts/app/app.component.ts', 'pt1', 'app.component.ts')
++makeExample('toh-1/ts/app/app.component.ts', '', 'app.component.ts')
 
 .l-main-section
 :marked