docs(HTTP Client): edit copy to conform to G-doc guidelines. (#2630)

Author: wardbell

public/docs/_examples/server-communication/ts/app/app.component.ts

@@ -3,7 +3,7 @@
 import { Component }         from '@angular/core';
 
 // #docregion import-rxjs
-// Add the RxJS Observable operators we need in this app.
+// Add the RxJS Observable operators.
 import './rxjs-operators';
 // #enddocregion import-rxjs
 

public/docs/_examples/server-communication/ts/app/hero-data.ts

@@ -3,10 +3,10 @@ import { InMemoryDbService } from 'angular-in-memory-web-api';
 export class HeroData implements InMemoryDbService {
   createDb() {
     let heroes = [
-      { id: '1', name: 'Windstorm' },
-      { id: '2', name: 'Bombasto' },
-      { id: '3', name: 'Magneta' },
-      { id: '4', name: 'Tornado' }
+      { id: 1, name: 'Windstorm' },
+      { id: 2, name: 'Bombasto' },
+      { id: 3, name: 'Magneta' },
+      { id: 4, name: 'Tornado' }
     ];
     return {heroes};
   }

public/docs/_examples/server-communication/ts/app/heroes.json

@@ -1,8 +1,8 @@
 {
   "data": [
-    { "id": "1", "name": "Windstorm" },
-    { "id": "2", "name": "Bombasto" },
-    { "id": "3", "name": "Magneta" },
-    { "id": "4", "name": "Tornado" }
+    { "id": 1, "name": "Windstorm" },
+    { "id": 2, "name": "Bombasto" },
+    { "id": 3, "name": "Magneta" },
+    { "id": 4, "name": "Tornado" }
   ]
 }

public/docs/_examples/server-communication/ts/app/rxjs-operators.ts

@@ -2,7 +2,7 @@
 // import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable
 
 // See node_module/rxjs/Rxjs.js
-// Import just the rxjs statics and operators we need for THIS app.
+// Import just the rxjs statics and operators needed for THIS app.
 
 // Statics
 import 'rxjs/add/observable/throw';

public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html

@@ -2,13 +2,10 @@
 <h1>Tour of Heroes ({{mode}})</h1>
 <h3>Heroes:</h3>
 <ul>
-  <li *ngFor="let hero of heroes">
-    {{hero.name}}
-  </li>
+  <li *ngFor="let hero of heroes">{{hero.name}}</li>
 </ul>
-New hero name:
-<input #newHeroName />
-<button (click)="addHero(newHeroName.value); newHeroName.value=''">
-  Add Hero
-</button>
-<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
+
+<label>New hero name: <input #newHeroName /></label>
+<button (click)="addHero(newHeroName.value); newHeroName.value=''">Add Hero</button>
+
+<p class="error" *ngIf="errorMessage">{{errorMessage}}</p>

public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts

@@ -8,7 +8,8 @@ import { HeroService }       from './hero.service.promise';
   selector: 'hero-list-promise',
   moduleId: module.id,
   templateUrl: 'hero-list.component.html',
-  providers: [ HeroService ]
+  providers: [ HeroService ],
+  styles: ['.error {color:red;}']
 })
 // #docregion component
 export class HeroListPromiseComponent implements OnInit {

public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts

@@ -8,7 +8,8 @@ import { HeroService }       from './hero.service';
   moduleId: module.id,
   selector: 'hero-list',
   templateUrl: 'hero-list.component.html',
-  providers: [ HeroService ]
+  providers: [ HeroService ],
+  styles: ['.error {color:red;}']
 })
 // #docregion component
 export class HeroListComponent implements OnInit {

public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts

@@ -9,7 +9,7 @@ import { Hero }           from './hero';
 @Injectable()
 export class HeroService {
   // URL to web api
-  private heroesUrl = 'app/heroes.json';
+  private heroesUrl = 'app/heroes';
 
   constructor (private http: Http) {}
 
@@ -22,11 +22,10 @@ export class HeroService {
   }
 
   addHero (name: string): Promise<Hero> {
-    let body = JSON.stringify({ name });
     let headers = new Headers({ 'Content-Type': 'application/json' });
     let options = new RequestOptions({ headers: headers });
 
-    return this.http.post(this.heroesUrl, body, options)
+    return this.http.post(this.heroesUrl, { name }, options)
                .toPromise()
                .then(this.extractData)
                .catch(this.handleError);
@@ -37,12 +36,17 @@ export class HeroService {
     return body.data || { };
   }
 
-  private handleError (error: any) {
+  private handleError (error: Response | any) {
     // In a real world app, we might use a remote logging infrastructure
-    // We'd also dig deeper into the error to get a better message
-    let errMsg = (error.message) ? error.message :
-      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
-    console.error(errMsg); // log to console instead
+    let errMsg: string;
+    if (error instanceof Response) {
+      const body = error.json() || '';
+      const err = body.error || JSON.stringify(body);
+      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+    }
+    console.error(errMsg);
     return Promise.reject(errMsg);
   }
 

public/docs/_examples/server-communication/ts/app/toh/hero.service.ts

@@ -34,11 +34,10 @@ export class HeroService {
   // #docregion addhero, addhero-sig
   addHero (name: string): Observable<Hero> {
   // #enddocregion addhero-sig
-    let body = JSON.stringify({ name });
     let headers = new Headers({ 'Content-Type': 'application/json' });
     let options = new RequestOptions({ headers: headers });
 
-    return this.http.post(this.heroesUrl, body, options)
+    return this.http.post(this.heroesUrl, { name }, options)
                     .map(this.extractData)
                     .catch(this.handleError);
   }
@@ -50,14 +49,19 @@ export class HeroService {
     return body.data || { };
   }
   // #enddocregion extract-data
-
   // #docregion error-handling
-  private handleError (error: any) {
+
+  private handleError (error: Response | any) {
     // In a real world app, we might use a remote logging infrastructure
-    // We'd also dig deeper into the error to get a better message
-    let errMsg = (error.message) ? error.message :
-      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
-    console.error(errMsg); // log to console instead
+    let errMsg: string;
+    if (error instanceof Response) {
+      const body = error.json() || '';
+      const err = body.error || JSON.stringify(body);
+      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+    }
+    console.error(errMsg);
     return Observable.throw(errMsg);
   }
   // #enddocregion error-handling, methods

public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts

@@ -1,3 +1,5 @@
+/* tslint:disable: member-ordering forin */
+// #docplaster
 // #docregion
 import { Component }        from '@angular/core';
 import { Observable }       from 'rxjs/Observable';
@@ -8,33 +10,27 @@ import { Subject }          from 'rxjs/Subject';
 import { WikipediaService } from './wikipedia.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'my-wiki-smart',
-  template: `
-    <h1>Smarter Wikipedia Demo</h1>
-    <p><i>Fetches when typing stops</i></p>
-
-    <input #term (keyup)="search(term.value)"/>
-
-    <ul>
-      <li *ngFor="let item of items | async">{{item}}</li>
-    </ul>
-  `,
-  providers: [WikipediaService]
+  templateUrl: 'wiki.component.html',
+  providers: [ WikipediaService ]
 })
 export class WikiSmartComponent {
-
-  constructor (private wikipediaService: WikipediaService) { }
+  title   = 'Smarter Wikipedia Demo';
+  fetches = 'Fetches when typing stops';
+  items: Observable<string[]>;
 
   // #docregion subject
   private searchTermStream = new Subject<string>();
-
   search(term: string) { this.searchTermStream.next(term); }
   // #enddocregion subject
 
-  // #docregion observable-operators
-  items: Observable<string[]> = this.searchTermStream
-    .debounceTime(300)
-    .distinctUntilChanged()
-    .switchMap((term: string) => this.wikipediaService.search(term));
-// #enddocregion observable-operators
+  constructor (private wikipediaService: WikipediaService) {
+    // #docregion observable-operators
+    this.items = this.searchTermStream
+      .debounceTime(300)
+      .distinctUntilChanged()
+      .switchMap((term: string) => this.wikipediaService.search(term));
+    // #enddocregion observable-operators
+  }
 }

public/docs/_examples/server-communication/ts/app/wiki/wiki.component.html

@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h1>{{title}}</h1>
+<p><i>{{fetches}}</i></p>
+
+<!-- #docregion keyup -->
+<input #term (keyup)="search(term.value)"/>
+<!-- #enddocregion keyup -->
+
+<ul>
+  <li *ngFor="let item of items | async">{{item}}</li>
+</ul>

public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts

@@ -5,25 +5,19 @@ import { Observable }       from 'rxjs/Observable';
 import { WikipediaService } from './wikipedia.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'my-wiki',
-  template: `
-    <h1>Wikipedia Demo</h1>
-    <p><i>Fetches after each keystroke</i></p>
-
-    <input #term (keyup)="search(term.value)"/>
-
-    <ul>
-      <li *ngFor="let item of items | async">{{item}}</li>
-    </ul>
-  `,
-  providers: [WikipediaService]
+  templateUrl: 'wiki.component.html',
+  providers: [ WikipediaService ]
 })
 export class WikiComponent {
+  title   = 'Wikipedia Demo';
+  fetches = 'Fetches after each keystroke';
   items: Observable<string[]>;
 
-  constructor (private wikipediaService: WikipediaService) {}
-
   search (term: string) {
     this.items = this.wikipediaService.search(term);
   }
+
+  constructor (private wikipediaService: WikipediaService) { }
 }

public/docs/_examples/server-communication/ts/index.html

@@ -6,8 +6,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.css">
-
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>

public/docs/_examples/server-communication/ts/sample.css

@@ -108,7 +108,7 @@
 
   "server-communication": {
     "title": "HTTP Client",
-    "intro": "Talk to a remote server with an HTTP Client."
+    "intro": "Use an HTTP Client to talk to a remote server."
   },
 
   "lifecycle-hooks": {