docs(HTTP Client): edits up to The HeroListComponent class

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

public/docs/ts/latest/guide/server-communication.jade

@@ -9,117 +9,118 @@ block includes
 .l-sub-section
   :marked
     The [`WebSocket`](https://tools.ietf.org/html/rfc6455) protocol is another important communication technology;
-    we won't cover it in this chapter.
+    it isn't covered in this page.
 :marked
   Modern browsers support two HTTP-based APIs: 
   [XMLHttpRequest (XHR)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) and 
   [JSONP](https://en.wikipedia.org/wiki/JSONP). A few browsers also support
   [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). 
 
-  The !{_Angular_http_library} simplifies application programming of the **XHR** and **JSONP** APIs
-  as we'll learn in this chapter covering:
+  The !{_Angular_http_library} simplifies application programming with the **XHR** and **JSONP** APIs.
+  This page covers:
 
-  - [HTTP client sample overview](#http-client)
+  - [The Tour of Heroes *HTTP* client demo](#http-client)
   - [Fetch data with http.get](#fetch-data)
-  <li if-docs="ts"> [RxJS Observable of HTTP Responses](#rxjs)</li>
-  <li if-docs="ts"> [Enabling RxJS Operators](#enable-rxjs-operators)</li>
-  - [Extract JSON data](#extract-data)
-  - [Error handling](#error-handling)
+  <li if-docs="ts"> [RxJS library](#rxjs)</li>
+  <li if-docs="ts"> [Enable RxJS operators](#enable-rxjs-operators)</li>
+  - [Process the response object](#extract-data)
+  - [Always handle errors](#error-handling)
   - [Send data to the server](#update)
-  <li if-docs="ts"> [Promises instead of observables](#promises)</li>
+  <li if-docs="ts"> [Fall back to promises](#promises)</li>
   - [Cross-origin requests: Wikipedia example](#cors)
     <ul if-docs="ts"> 
-      <li> [Set query string parameters](#search-parameters)</li>
-      <li> [Debounce search term input](#more-observables)</li>
+      <li> [Search parameters](#search-parameters)</li>
+      <li> [More fun with observables](#more-observables)</li>
     </ul>
-  - [Appendix: the in-memory web api service](#in-mem-web-api)
+  - [Appendix: Tour of Heroes in-memory server](#in-mem-web-api)
 
-  We illustrate these topics with code that you can <live-example>run live</live-example>.
+  These topics are illustrated with code that you can <live-example>run live</live-example>.
 
 .l-main-section
 :marked
   # Demos
 
-  This chapter describes server communication with the help of the following demos
+  This page describes server communication with the help of the following demos:
 
 block demos-list
   :marked
-    - [HTTP client: Tour of Heroes with Observables](#http-client)
-    - [HTTP client: Tour of Heroes with !{_Promise}s](#promises)
-    - [JSONP client: Wikipedia to fetch data from a service that does not support CORS](#cors)
-    - [JSONP client: Wikipedia using observable operators to reduce server calls](#more-observables)
+    - [The Tour of Heroes *HTTP* client demo](#http-client)
+    - [Fall back to !{_Promise}s](#promises)
+    - [Cross-origin requests: Wikipedia example](#cors)
+    - [More fun with observables](#more-observables)
 
 :marked
-  These demos are orchestrated by the root `AppComponent`
+  The root `AppComponent` orchestrates these demos.
 +makeExample('server-communication/ts/app/app.component.ts', null, 'app/app.component.ts')
 
 +ifDocsFor('ts')
   :marked
-    There is nothing remarkable here _except_ for the import of RxJS operators.
+    There is nothing remarkable here _except_ for the import of RxJS operators, which is 
+    described [later](#rxjs).
   +makeExample('server-communication/ts/app/app.component.ts', 'import-rxjs')(format='.')
-  :marked
-    We'll talk about that [below](#rxjs) when we're ready to explore observables.
 :marked
-  First, we have to configure our application to use server communication facilities.
+  First, configure the application to use server communication facilities.
 
 .l-main-section#http-providers
 :marked
-  # Providing HTTP Services
+  # Providing HTTP services
 
-  We use the !{_Angular_Http} client to communicate with a server using a familiar HTTP request/response protocol.
+  The !{_Angular_Http} client communicates with the server using a familiar HTTP request/response protocol.
   The `!{_Http}` client is one of a family of services in the !{_Angular_http_library}.
 
 +ifDocsFor('ts')
   .l-sub-section
     :marked
-      SystemJS knows how to load services from the !{_Angular_http_library} when we import from the `@angular/http` module
-      because we registered that module name in the `system.config` file.
+      When you import from the `@angular/http` module, SystemJS knows how to load services from 
+      the !{_Angular_http_library} 
+      because you registered that module name in the `system.config` file.
 
 :marked
-  Before we can use the `!{_Http}` client , we'll have to register it as a service provider with the Dependency Injection system.
+  Before you can use the `!{_Http}` client, you need to register it as a service provider with the dependency injection system.
 
 .l-sub-section
   :marked
-    Learn about providers in the [Dependency Injection](dependency-injection.html) chapter.
+    Read about providers in the [Dependency Injection](dependency-injection.html) page.
 
 :marked
-  In this demo, we register providers by importing other NgModules to our root NgModule.
+  Register providers by importing other NgModules to the root NgModule.
 
 +makeExample('server-communication/ts/app/app.module.1.ts', null, 'app/app.module.ts (v1)')(format='.')
 
 block http-providers
   :marked
-    We begin by importing the symbols we need, most of them familiar by now. 
+    Begin by importing the necessary symbols; most of them should be familiar by now. 
     The newcomers are the `HttpModule` and the `JsonpModule` from the !{_Angular_http_library}.
 
-    We add these modules to the application by passing them to the `imports` array in our root NgModule.
+    To add these modules to the application, pass them to the `imports` array in the root NgModule.
 .l-sub-section
   :marked
-    We need the HttpModule to make HTTP calls.
-    We don't need the JsonpModule for plain HTTP.
-    We will demonstrate JSONP support later in this chapter.
-    We're loading its module now to save time.
+    You need the HttpModule to make HTTP calls.
+    Though the JsonpModule isn't necessary for plain HTTP,
+    there is a JSONP demo later in this page.
+    Loading its module now saves time.
 .l-main-section#http-client
 :marked
-  # The Tour of Heroes _HTTP_ Client Demo
+  # The Tour of Heroes _HTTP_ client demo
 
-  Our first demo is a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application.
-  This version gets some heroes from the server, displays them in a list, lets us add new heroes, and saves them to the server.
-  We use the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`.
+  The first demo is a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application.
+  This version gets some heroes from the server, displays them in a list, lets you add new heroes, and saves them to the server.
+  You use the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`.
 
-  It works like this.
+  It works like this:
 figure.image-display
   img(src='/resources/images/devguide/server-communication/http-toh.gif' alt="ToH mini app" width="250")
 :marked
   This demo has a single component, the `HeroListComponent`.  Here's its template:
 +makeExample('server-communication/ts/app/toh/hero-list.component.html', null, 'app/toh/hero-list.component.html (template)')
 :marked
   It presents the list of heroes with an `ngFor`. 
-  Below the list is an input box and an *Add Hero* button where we can enter the names of new heroes
+  Below the list is an input box and an *Add Hero* button where you can enter the names of new heroes
   and add them to the database. 
-  We use a [template reference variable](template-syntax.html#ref-vars), `newHeroName`, to access the 
+  A [template reference variable](template-syntax.html#ref-vars), `newHeroName`, discussed in the 
+  [Template Syntax](template-syntax.html) page, accesses the 
   value of the input box in the `(click)` event binding.
-  When the user clicks the button, we pass that value to the component's `addHero` method and then
+  When the user clicks the button, you pass that value to the component's `addHero` method and then
   clear it to make it ready for a new hero name.
 
   Below the button is an area for an error message.
@@ -167,7 +168,7 @@ block getheroes-and-addhero
 a#HeroService
 .l-main-section#fetch-data
 :marked
-  ## Fetch data with the **HeroService**
+  ## Fetch data with http.get
 
   In many of our previous samples we faked the interaction with the server by
   returning mock heroes in a service like this one: