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