anchor.diff:  :marked
     The application runs and updates automatically as we continue to build the Tour of Heroes.
   
  -.l-main-section  
  +.l-main-section
   :marked
    ## Prepare for Http
  -  
  -  `Http` is ***not*** a core Angular module. 
  +
  +  `Http` is ***not*** a core Angular module.
     It's Angular's optional approach to web access and it exists as a separate add-on module called `@angular/http`,
  -  shipped in a separate script file as part of the Angular npm package. 
  -  
  +  shipped in a separate script file as part of the Angular npm package.
  +
     Fortunately we're ready to import from `@angular/http` because `systemjs.config` configured *SystemJS* to load that library when we need it.
   
   :marked
     ### Register (provide) *http* services
     Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
     The `HTTP_PROVIDERS` array from `@angular/http` library holds providers for the complete set of http services.
  -  
  +
     We should be able to access these services from anywhere in the application.
     So we register them in the `bootstrap` method of `main.ts` where we
     launch the application and its root `AppComponent`.
  -  
  +
   +makeExample('toh-6/ts/app/main.ts','v1','app/main.ts (v1)')(format='.')
   :marked
     Notice that we supply the `HTTP_PROVIDERS` in an array as the second parameter to the `bootstrap` method.
  
positive.code: .alert.is-helpful
    :marked
      This chaper is an introduction to the Angular http client.
      Please don't be distracted by the details of this backend substitution. Just follow along with the example. 
      
      Learn more later about the *in-memory web api* in the [Http chapter](../guide/server-communication.html#!#in-mem-web-api).
      Remember, the *in-memory web api* is only useful in the early stages of development and for demonstrations such as this Tour of Heroes. 
      Skip it when you have a real web api server.
  
  
  .l-main-section
  :marked
    ## Heroes and Http
    
    Look at our current `HeroService` implementation
  +makeExample('toh-4/ts/app/hero.service.ts', 'get-heroes', 'app/hero.service.ts (getHeroes - old)')(format=".")
  :marked
    We returned a promise resolved with mock heroes. 
    It may have seemed like overkill at the time, but we were anticipating the
    day when we fetched heroes with an http client and we knew that would have to be an asynchronous operation.
    
    That day has arrived! Let's convert `getHeroes()` to use Angular's `Http` client:
    
  +makeExample('toh-6/ts/app/hero.service.ts', 'get-heroes', 'app/hero.service.ts (getHeroes using Http)')(format=".")
    
  :marked
    ### Http Promise
  
    We're still returning a promise but we're creating it differently.
    
    The Angular `http.get` returns an RxJS `Observable`.
    *Observables* are a powerful way to manage asynchronous data flows.
    We'll learn about `Observables` *later*.
    
    For *now* we get back on familiar ground by immediately converting that `Observable` to a `Promise` using the `toPromise` operator.
  +makeExample('toh-6/ts/app/hero.service.ts', 'to-promise')(format=".")
  :marked
    Unfortunately, the Angular `Observable` doesn't have a `toPromise` operator ... not out of the box.
    The Angular `Observable` is a bare-bones implementation. 
    
    There are scores of operators like `toPromise` that extend `Observable` with useful capabilities.
    If we want those capabilities, we have to add the operators ourselves.
    That's as easy as importing them from the RxJS library like this:
  +makeExample('toh-6/ts/app/hero.service.ts', 'rxjs')(format=".")
  
  :marked
    ### Extracting the data in the *then* callback 
    In the *promise*'s `then` callback we call the `json` method of the http `Response` to extract the
    data within the response.
  +makeExample('toh-6/ts/app/hero.service.ts', 'to-data')(format=".")
  :marked
    That object returned by `json` has a single `data` property. 
    The `data` property holds the array of *heroes* that the caller really wants.
    So we grab that array and return it as the resolved promise value.
  
  
negative.code:   .file systemjs.config.json
    .file tsconfig.json
    .file typings.json
  
  .l-main-section
  :marked
      ## Home Stretch
  
      We are at the end of our journey for now, but we have accomplished a lot.
      - We added the necessary dependencies to use Http in our application.
      - We refactored HeroService to load heroes from an api.
      - We extended HeroService to support post, put and delete calls.
      - We updated our components to allow adding, editing and deleting of heroes.
      - We configured an in-memory web api.
  
      Below is a summary of the files we changed.
  
  +makeTabs(
    `toh-6/ts/app/app.component.ts,
     toh-6/ts/app/heroes.component.ts,
  