diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts index 054bb2d921..ad5220917f 100644 --- a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts +++ b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts @@ -18,11 +18,14 @@ export class HeroService { // #docregion methods // #docregion error-handling getHeroes () { - // #docregion http-get + // #docregion http-get, http-get-v1 return this.http.get(this._heroesUrl) .map(res => res.json().data) + // #enddocregion v1, http-get-v1, error-handling + .do(data => console.log(data)) // eyeball results in the console + // #docregion v1, http-get-v1, error-handling .catch(this.handleError); - // #enddocregion http-get + // #enddocregion http-get, http-get-v1 } // #enddocregion error-handling // #enddocregion v1 diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade index 22eaa34fae..0c3c4b663f 100644 --- a/public/docs/ts/latest/guide/server-communication.jade +++ b/public/docs/ts/latest/guide/server-communication.jade @@ -92,7 +92,7 @@ figure.image-display With our basic intuitions about the component squared away, we can turn to development of the backend data source and the client-side `HeroService` that talks to it. - ### Fetching data + ### Fetch data In many of our previous samples we faked the interaction with the server by returning mock heroes in a service like this one: @@ -112,7 +112,7 @@ figure.image-display +makeExample('server-communication/ts/index.html', 'http', 'index.html')(format=".") :marked Look closely at how we call `http.get` -+makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts (http.get)')(format=".") ++makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get-v1', 'app/toh/hero.service.ts (http.get)')(format=".") :marked We pass the resource URL to `get` and it calls the server which returns data from the `heroes.json` file. @@ -159,7 +159,7 @@ figure.image-display :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', 'app/toh/hero.service.ts (http.get)')(format=".") ++makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get-v1', 'app/toh/hero.service.ts (http.get)')(format=".") :marked The `response` object does not hold our data in a form we can use directly. It takes an additional step — calling `response.json()` — to transform the bytes from the server into a JSON object. @@ -211,15 +211,31 @@ figure.image-display It sets an `errorMessage` variable which we've bound conditionally in the template. +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'getHeroes', 'app/toh/hero-list.component.ts (getHeroes)')(format=".") - + .l-sub-section :marked Try messing with the value of the api endpoint in the `HeroService` and watch it fail +makeExample('server-communication/ts/app/toh/hero.service.ts', 'endpoint', 'app/toh/hero.service.ts (endpoint)') - - + + + :marked - ### Sending data to the server + ### Peek at results in the console + During development we're often curious about the data returned by the server. + Logging to console without disrupting the flow would be nice. + + The Observable `do` operator is perfect for the job. + It passes the input through to the output while we do something with a useful side-effect such as writing to console. + Slip it into the pipeline between `map` and `catch` like this. ++makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts')(format=".") +:marked + Remember to comment it out before going to production! + + + +.l-main-section +:marked + ## Send data to the server So far we've seen how to retrieve data from a remote location using Angular's built-in `Http` service. Let's add the ability to create new heroes and save them in the backend. @@ -258,7 +274,7 @@ code-example(format="." language="javascript"). +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".") :marked - ## Falling back to Promises + ## Fall back to Promises Although the Angular `http` client API returns an `Observable` we can turn it into a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) if we prefer. @@ -303,10 +319,10 @@ code-example(format="." language="javascript"). Learn more about observables to understand the implications and consequences of subscriptions. :marked - ## Communication with `JSONP` + ## Get data with `JSONP` We just learned how to make `XMLHttpRequests` using Angulars built-in `Http` service. This is the most common approach for - server Communication. It doesn't work in all scenarios though. + server communication. It doesn't work in all scenarios though. For security reasons web browser do not permit to make `XHR` calls if the origin of the remote server is different from the one the web page runs in. The origin is defined as the combination of URI scheme, hostname and port number. The policy that prevents such `XHR` requests is called [Same-origin Policy](https://en.wikipedia.org/wiki/Same-origin_policy) accordingly. @@ -320,7 +336,7 @@ code-example(format="." language="javascript"). But let's not go too deep into the rabbit hole of `JSONP`. If you like to learn how this technique works under the cover, you may like to read up on this [answer](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about/2067584#2067584) on StackOverflow. For now, let's focus on how we can use `JSONP` in Angular. - ### Let's fetch some data from wikipedia + ### Search wikipedia Wikipedia offers a `JSONP` search api. Let's build a simple search that shows suggestions from wikipedia as we type in a text box. figure.image-display @@ -368,7 +384,7 @@ 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. - ## Taking advantage of 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.