docs(toh-6/ts): minor edits and enhancements (#1686)

* docs(toh-6/ts): minor edits and enhancements

Changes to prose:

- Complete TODO item of displaying `heroes.component` errors.
- Mainly copyedits.
- Add of blocks statements so that prose can be used on Dart side.
- Show excerpt and briefly explain of changes (previously missing):
  - `app/hero-detail.component.html`
  - `app/heroes.component.ts` error handling
- Add missing file to changed/added files listing and makeTabs
  - `toh-6/ts/app/in-memory-data.service.ts,
  - `toh-6/ts/sample.css`

Code changes:

- Mainly copyedits
- Renamed `heroes.component.ts` `delete` to `deleteHero` to match
naming of other methods

* remove unnecessary change relative to toh-5

Author: chalin

public/_includes/_util-fns.jade

@@ -96,14 +96,15 @@ mixin makeExcerpt(_filePath, _region, _title, stylePatterns)
   - var filePath = adjustments.filePath;
   - var title = adjustments.title;
   - var region = _region || parenText;
-  - var excerpt = !region || parenText === '' ? 'excerpt' : region;
+  - var excerpt = !region || parenText === '' ? 'excerpt' : parenText || region;
   - if (title) title = title + ' (' + excerpt + ')';
   +makeExample(filePath, region, title, stylePatterns)(format='.')
 
-//- Extract the doc example name from `current`.
+//- Get the doc example name either from `_example` if set, or
+//- extract the example name from `current`.
 - var getExampleName = function() {
 -   var dir = current.path[current.path.length - 1];
--   return dir == 'latest' ? current.source : dir;
+-   return _example ? _example : dir == 'latest' ? current.source : dir;
 - };
 
 mixin makeTabs(filePaths, regions, tabNames, stylePatterns)

public/docs/_examples/toh-6/ts/app/app.component.css

@@ -1,5 +1,4 @@
-/* #docplaster */
-/* #docregion css */
+/* #docregion */
 h1 {
   font-size: 1.2em;
   color: #999;
@@ -28,4 +27,3 @@ nav a:hover {
 nav a.router-link-active {
   color: #039be5;
 }
-/* #enddocregion css */

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

@@ -9,5 +9,7 @@ <h2>{{hero.name}} details!</h2>
     <input [(ngModel)]="hero.name" placeholder="name" />
    </div>
   <button (click)="goBack()">Back</button>
+  <!-- #docregion save -->
   <button (click)="save()">Save</button>
-</div>
+  <!-- #enddocregion save -->
+</div>

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

@@ -50,11 +50,11 @@ export class HeroDetailComponent implements OnInit {
         .catch(error => this.error = error); // TODO: Display error message
   }
   // #enddocregion save
-  // #docregion goback
+  // #docregion goBack
   goBack(savedHero: Hero = null) {
     this.close.emit(savedHero);
     if (this.navigated) { window.history.back(); }
   }
-  // #enddocregion goback
+  // #enddocregion goBack
 }
 

public/docs/_examples/toh-6/ts/app/hero.service.ts

@@ -12,11 +12,11 @@ import { Hero } from './hero';
 @Injectable()
 export class HeroService {
 
+  // #docregion getHeroes
   private heroesUrl = 'app/heroes';  // URL to web api
 
   constructor(private http: Http) { }
 
-  // #docregion get-heroes
   getHeroes(): Promise<Hero[]> {
     return this.http.get(this.heroesUrl)
     // #docregion to-promise
@@ -29,7 +29,7 @@ export class HeroService {
                .catch(this.handleError);
     // #enddocregion catch
   }
-  // #enddocregion get-heroes
+  // #enddocregion getHeroes
 
   getHero(id: number) {
     return this.getHeroes()
@@ -45,7 +45,7 @@ export class HeroService {
   }
   // #enddocregion save
 
-  // #docregion delete-hero
+  // #docregion delete
   delete(hero: Hero) {
     let headers = new Headers();
     headers.append('Content-Type', 'application/json');
@@ -57,9 +57,9 @@ export class HeroService {
                .toPromise()
                .catch(this.handleError);
   }
-  // #enddocregion delete-hero
+  // #enddocregion delete
 
-  // #docregion post-hero
+  // #docregion post
   // Add new Hero
   private post(hero: Hero): Promise<Hero> {
     let headers = new Headers({
@@ -71,9 +71,9 @@ export class HeroService {
                .then(res => res.json().data)
                .catch(this.handleError);
   }
-  // #enddocregion post-hero
+  // #enddocregion post
 
-  // #docregion put-hero
+  // #docregion put
   // Update existing Hero
   private put(hero: Hero) {
     let headers = new Headers();
@@ -87,13 +87,13 @@ export class HeroService {
                .then(() => hero)
                .catch(this.handleError);
   }
-  // #enddocregion put-hero
+  // #enddocregion put
 
-  // #docregion error-handler
+  // #docregion handleError
   private handleError(error: any) {
     console.error('An error occurred', error);
     return Promise.reject(error.message || error);
   }
-  // #enddocregion error-handler
+  // #enddocregion handleError
 }
-// #enddocregion
+

public/docs/_examples/toh-6/ts/app/heroes.component.html

@@ -5,18 +5,19 @@ <h2>My Heroes</h2>
     <span class="hero-element">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </span>
-<!-- #docregion delete-hero -->
-    <button class="delete-button" (click)="delete(hero, $event)">Delete</button>
-<!-- #enddocregion delete-hero -->
+<!-- #docregion delete -->
+    <button class="delete-button" (click)="deleteHero(hero, $event)">Delete</button>
+<!-- #enddocregion delete -->
   </li>
 </ul>
 
-<!-- #docregion add-hero -->
+<!-- #docregion add-and-error -->
+<div class="error" *ngIf="error">{{error}}</div>
 <button (click)="addHero()">Add New Hero</button>
 <div *ngIf="addingHero">
   <my-hero-detail (close)="close($event)"></my-hero-detail>
 </div>
-<!-- #enddocregion add-hero -->
+<!-- #enddocregion add-and-error -->
 
 <div *ngIf="selectedHero">
   <h2>

public/docs/_examples/toh-6/ts/app/heroes.component.ts

@@ -18,7 +18,9 @@ export class HeroesComponent implements OnInit {
   heroes: Hero[];
   selectedHero: Hero;
   addingHero = false;
+  // #docregion error
   error: any;
+  // #enddocregion error
 
   constructor(
     private router: Router,
@@ -28,10 +30,10 @@ export class HeroesComponent implements OnInit {
     this.heroService
         .getHeroes()
         .then(heroes => this.heroes = heroes)
-        .catch(error => this.error = error); // TODO: Display error message
+        .catch(error => this.error = error);
   }
 
-  // #docregion add
+  // #docregion addHero
   addHero() {
     this.addingHero = true;
     this.selectedHero = null;
@@ -41,20 +43,20 @@ export class HeroesComponent implements OnInit {
     this.addingHero = false;
     if (savedHero) { this.getHeroes(); }
   }
-  // #enddocregion add
+  // #enddocregion addHero
 
-  // #docregion delete
-  delete(hero: Hero, event: any) {
+  // #docregion deleteHero
+  deleteHero(hero: Hero, event: any) {
     event.stopPropagation();
     this.heroService
         .delete(hero)
         .then(res => {
           this.heroes = this.heroes.filter(h => h !== hero);
           if (this.selectedHero === hero) { this.selectedHero = null; }
         })
-        .catch(error => this.error = error); // TODO: Display error message
+        .catch(error => this.error = error);
   }
-  // #enddocregion delete
+  // #enddocregion deleteHero
 
   ngOnInit() {
     this.getHeroes();

public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts

@@ -1,4 +1,4 @@
-// #docregion
+// #docregion , init
 export class InMemoryDataService {
   createDb() {
     let heroes = [

public/docs/_examples/toh-6/ts/sample.css

@@ -1,8 +1,7 @@
+/* #docregion */
+.error {color:red;}
 button.delete-button{
   float:right;
   background-color: gray !important;
   color:white;
 }
-
-
-