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

Author: wardbell

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

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

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

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

@@ -55,22 +55,22 @@ code-example(language="sh" class="code-shell").
   ### Expose heroes
   Create a public property in `AppComponent` that exposes the heroes for binding.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (hero array property)')
++makeExample('toh-2/ts/app/app.component.1.html', 'hero-array-1', 'app.component.ts (hero array property)')
 
 :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
-  because ultimately the hero names will come from a data service.
+  :marked
+    The hero data is separated from the class implementation
+    because ultimately the hero names will come from a data service.
 
 :marked
   ### Display hero names in a template
   The component has `heroes`. To display the hero names in an unordered list,
   insert the following chunk of HTML below the title and above the hero details.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (heroes template)')
++makeExample('toh-2/ts/app/app.component.1.html', 'heroes-template-1', 'app.component.ts (heroes template)')(format='.')
 
 :marked
   Now you can fill the template with hero names.
@@ -82,7 +82,7 @@ code-example(language="sh" class="code-shell").
 
   Modify the `<li>` tag by adding the built-in directive `*ngFor`.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
++makeExample('toh-2/ts/app/app.component.1.html', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
 
 .alert.is-critical
   :marked
@@ -116,7 +116,7 @@ code-example(language="sh" class="code-shell").
   In the `<li>` tags, add content
   that uses the `hero` template variable to display the hero's properties.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
++makeExample('toh-2/ts/app/app.component.1.html', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
 
 :marked
   When the browser refreshes, a list of heroes displays.
@@ -127,7 +127,7 @@ code-example(language="sh" class="code-shell").
   To add styles to your component, set the `styles` property on the `@Component` decorator
   to the following CSS classes:
 
-+makeExample('toh-2/ts/app/app.component.ts', 'styles', 'app.component.ts (styles)')(format=".")
++makeExample('toh-2/ts/app/app.component.ts', 'styles', 'app.component.ts (styles)')
 
 :marked
   Notice that again you used the backtick notation for multi-line strings.
@@ -139,7 +139,7 @@ code-example(language="sh" class="code-shell").
 
   The template for displaying heroes should look like this:
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)')
++makeExample('toh-2/ts/app/app.component.1.html', 'heroes-styled', 'app.component.ts (styled heroes)')(format='.')
 
 .l-main-section
   :marked
@@ -157,7 +157,7 @@ code-example(language="sh" class="code-shell").
     ### Add a click event
     Modify the `<li>` by inserting an Angular event binding to its click event.
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (template excerpt)')
+  +makeExample('toh-2/ts/app/app.component.1.html', 'selectedHero-click', 'app.component.ts (template excerpt)')(format='.')
 
   :marked
     Notice the event binding:
@@ -187,13 +187,13 @@ code-example(language="sh" class="code-shell").
     you won't initialize the `selectedHero` as you did with `hero`.
 
     Add an `onSelect` method that sets the `selectedHero` property to the `hero` that the user clicks.
-  +makeExample('toh-2/ts/app/app.component.ts', 'on-select', 'app.component.ts (onSelect)')
+  +makeExample('toh-2/ts/app/app.component.ts', 'on-select', 'app.component.ts (onSelect)')(format='.')
 
   :marked
     At the moment, the template still refers to the old `hero` property.
     To change the template to bind to the new `selectedHero` property, update the code as follows:
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)')
+  +makeExample('toh-2/ts/app/app.component.1.html', 'selectedHero-details', 'app.component.ts (template excerpt)')(format='.')
   :marked
     ### Hide the empty detail with ngIf
 
@@ -212,7 +212,7 @@ code-example(language="sh" class="code-shell").
     Wrap the HTML hero detail content of your template with a `<div>`.
     Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-if', 'app.component.ts (ngIf)')
+  +makeExample('toh-2/ts/app/app.component.1.html', 'ng-if', 'app.component.ts (ngIf)')(format='.')
 
   :marked
     The list of names displays again in the browser.
@@ -263,15 +263,15 @@ code-example(language="sh" class="code-shell").
     You can set the class to an expression that compares the current `selectedHero` to the `hero`.
 
     The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` if they don't.
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
+  +makeExample('toh-2/ts/app/app.component.1.html', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
   :marked
     Notice that `class.selected` is surrounded by square brackets (`[]`).
     This is the syntax for a *property binding*, in which data flows one way
     from the data source (the expression `hero === selectedHero`) to a property of `class`.
   //  CF: What is the preferred style for introduced terms? In this page I see two: quotes (used in
     "master-detail" on line 151 and "structural directives" on line 241) and italics (used in
     *property binding* on line 270).
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
+  +makeExample('toh-2/ts/app/app.component.1.html', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
 
   .l-sub-section
     :marked