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 methods
|
||||||
// #docregion error-handling
|
// #docregion error-handling
|
||||||
getHeroes () {
|
getHeroes () {
|
||||||
// #docregion http-get
|
// #docregion http-get, http-get-v1
|
||||||
return this.http.get(this._heroesUrl)
|
return this.http.get(this._heroesUrl)
|
||||||
.map(res => <Hero[]> res.json().data)
|
.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);
|
.catch(this.handleError);
|
||||||
// #enddocregion http-get
|
// #enddocregion http-get, http-get-v1
|
||||||
}
|
}
|
||||||
// #enddocregion error-handling
|
// #enddocregion error-handling
|
||||||
// #enddocregion v1
|
// #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
|
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.
|
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
|
In many of our previous samples we faked the interaction with the server by
|
||||||
returning mock heroes in a service like this one:
|
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=".")
|
+makeExample('server-communication/ts/index.html', 'http', 'index.html')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Look closely at how we call `http.get`
|
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
|
:marked
|
||||||
We pass the resource URL to `get` and it calls the server which returns
|
We pass the resource URL to `get` and it calls the server which returns
|
||||||
data from the `heroes.json` file.
|
data from the `heroes.json` file.
|
||||||
|
@ -159,7 +159,7 @@ figure.image-display
|
||||||
:marked
|
:marked
|
||||||
### Map the response object
|
### 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()`
|
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
|
:marked
|
||||||
The `response` object does not hold our data in a form we can use directly.
|
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.
|
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.
|
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=".")
|
+makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'getHeroes', 'app/toh/hero-list.component.ts (getHeroes)')(format=".")
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Try messing with the value of the api endpoint in the `HeroService` and watch it fail
|
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)')
|
+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
|
: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.
|
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.
|
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=".")
|
+makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Falling back to Promises
|
## Fall back to Promises
|
||||||
|
|
||||||
Although the Angular `http` client API returns an `Observable` we can turn it into a
|
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.
|
[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.
|
Learn more about observables to understand the implications and consequences of subscriptions.
|
||||||
:marked
|
: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
|
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.
|
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.
|
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.
|
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.
|
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.
|
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
|
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
|
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.
|
`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.
|
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