docs(http): TOC at top of chapter

closes #796

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

@@ -1,9 +1,21 @@
 
 include ../../../../_includes/_util-fns
 :marked
-  Whew! We already learned quite a lot about how Angular 2 works. One thing that we haven't looked into yet is how to
+  Most applications read from or write to a remote server via HTTP or JSONP. 
-  communicate with a backend. Most applications will come to a point where they either want to read from or write to
+  The Angular 2 http client supports both as we learn in this chapter covering:
-  a remote location. Angular 2 has excellent support for such scenarios so let's dive right into it.
+  
+  [Http client sample overview](#http-client)<br>
+  [Fetch data with http.get](#fetch-data)<br>
+  [Enable RxJS Operators](#enable-rxjs-operators)<br>
+  [Extract JSON data with RxJS map](#map)<br>
+  [Error handling](#error-handling)<br>
+  [Log results to console](#do)<br>
+  [Send data to the server](#update)<br>
+  [Promises instead of observables](#promises)<br>
+  [JSONP](#jsonp)<br>
+  [Debounce search term input](#more-observables)<br>
+  [Appendix: the in-memory web api service](#in-mem-web-api)<br>
+  
   
   Try the [live example](/resources/live-examples/server-communication/ts/plnkr.html).
 .l-main-section
@@ -157,6 +169,7 @@ figure.image-display
   :
 +makeExample('server-communication/ts/app/main.ts', 'import-rxjs', 'app/main.ts (import rxjs)')(format=".")
 :marked
+  <a id="map"></a>
   ### Map the response object
   Let's come back to the `HeroService` and look at the `http.get` call again to see why we needed `map()`
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get-v1', 'app/toh/hero.service.ts (http.get)')(format=".")
@@ -186,6 +199,7 @@ figure.image-display
   It doesn't care where they come from.
   And it certainly doesn't want to deal with a response object.
 
+  <a id="error-handling"></a>
   ### Always handle errors
 
   The eagle-eyed reader may have spotted our use of the `catch` operator in conjunction with a `handleError` method.
@@ -273,6 +287,7 @@ code-example(format="." language="javascript").
   When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user.
 +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
 
+<a id="promises"></a>
 :marked
   ## Fall back to Promises
   
@@ -318,6 +333,7 @@ code-example(format="." language="javascript").
     The `Subscription` object has a different purpose, signified by its primary method, `unsubscribe`.
     
     Learn more about observables to understand the implications and consequences of subscriptions.
+<a id="jsonp"></a>
 :marked
   ## Get data with `JSONP`
 
@@ -384,7 +400,8 @@ code-example.
   There are a bunch of things in our wikipedia demo that we could do better. This is a perfect opportunity to show off some nifty
   `Observable` tricks that can make server communication much simpler and more fun.
   
-  ## More fun with Observables
+  <a id="more-observables"></a>
+  ### More fun with Observables
 
   If you ever wrote a search-as-you-type control yourself before, you are probably aware of some typical corner cases that arise with this task.
   
@@ -440,7 +457,7 @@ figure.image-display
   
   This may sound a lot like black magic for people unfamiliar with Observables but as soon as the coin sinks in it's starting to make a whole world of difficult programming tasks appear much simpler.
 
-<a id="server"></a>
+<a id="in-mem-web-api"></a>
 .l-main-section
 :marked
   ## Appendix: Tour of Heroes in-memory server