docs(server): add `do` to peek at results in console
This commit is contained in:
parent
4c0a2a3b83
commit
b2b025aab7
|
@ -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 => <Hero[]> 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
|
||||
|
|
|
@ -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)')
|
||||
|
||||
|
||||
|
||||
<a id="do"></a>
|
||||
<a id="console-log"></a>
|
||||
: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!
|
||||
|
||||
<a id="update"></a>
|
||||
<a id="post"></a>
|
||||
.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.
|
||||
|
||||
|
|
Loading…
Reference in New Issue