diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 0c3c4b663f..5af43790f7 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/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
- communicate with a backend. Most applications will come to a point where they either want to read from or write to
- a remote location. Angular 2 has excellent support for such scenarios so let's dive right into it.
+ Most applications read from or write to a remote server via HTTP or JSONP.
+ The Angular 2 http client supports both as we learn in this chapter covering:
+
+ [Http client sample overview](#http-client)
+ [Fetch data with http.get](#fetch-data)
+ [Enable RxJS Operators](#enable-rxjs-operators)
+ [Extract JSON data with RxJS map](#map)
+ [Error handling](#error-handling)
+ [Log results to console](#do)
+ [Send data to the server](#update)
+ [Promises instead of observables](#promises)
+ [JSONP](#jsonp)
+ [Debounce search term input](#more-observables)
+ [Appendix: the in-memory web api service](#in-mem-web-api)
+
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
+
### 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.
+
### 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=".")
+
: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.
+
: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
+
+ ### 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.
-
+
.l-main-section
:marked
## Appendix: Tour of Heroes in-memory server