docs(HTTP Client): edit copy

Author: kapunahelewong

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.service.promise.ts

@@ -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);
@@ -38,8 +37,8 @@ export class HeroService {
   }
 
   private handleError (error: 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
+    // In a real world app, you might use a remote logging infrastructure
+    // You'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

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);
   }
@@ -53,8 +52,8 @@ export class HeroService {
 
   // #docregion error-handling
   private handleError (error: 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
+    // In a real world app, you might use a remote logging infrastructure
+    // You'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

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/ts/latest/guide/_data.json

@@ -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": {