chore(toh-6): refresh cache file (#2207)

No other changes.
This commit is contained in:
Patrice Chalin 2016-08-26 15:47:34 -07:00 committed by Kathy Walrath
parent e4ed1ce5af
commit 101d2ef091
1 changed files with 24 additions and 23 deletions

View File

@ -12,7 +12,7 @@ block includes
- var _promise = _Promise.toLowerCase()
:marked
# Getting and Saving Data using HTTP
# Getting and Saving Data
Our stakeholders appreciate our progress.
Now they want to get the hero data from a server, let users add, edit, and delete heroes,
@ -46,22 +46,22 @@ block start-server-and-watch
h1 Providing HTTP Services
block http-library
:marked
`Http` is ***not*** a core Angular module.
The `HttpModule` is ***not*** a core Angular module.
It's Angular's optional approach to web access and it exists as a separate add-on module called `@angular/http`,
shipped in a separate script file as part of the Angular npm package.
Fortunately we're ready to import from `@angular/http` because `systemjs.config` configured *SystemJS* to load that library when we need it.
:marked
### Register (provide) HTTP services
### Register for HTTP services
block http-providers
:marked
Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
The `HttpModule` from `@angular/http` library holds providers for the complete set of `http` services.
The `HttpModule` from `@angular/http` library holds providers for a complete set of HTTP services.
We should be able to access `http` services from anywhere in the application.
So we register them in the `imports` array of `app.module.ts` where we
We should be able to access these services from anywhere in the application.
So we register them all by adding `HttpModule` to the `imports` list of the `AppModule` where we
bootstrap the application and its root `AppComponent`.
+makeExample('app/app.module.ts', 'v1','app/app.module.ts (v1)')
@ -174,7 +174,7 @@ block get-heroes-details
:marked
### Extracting the data in the *then* callback
In the *promise*'s `then` callback we call the `json` method of the http `Response` to extract the
In the *promise*'s `then` callback we call the `json` method of the HTTP `Response` to extract the
data within the response.
+makeExcerpt('app/hero.service.ts', 'to-data', '')
@ -219,17 +219,18 @@ block get-heroes-details
Although we made significant *internal* changes to `getHeroes()`, the public signature did not change.
We still return a !{_Promise}. We won't have to update any of the components that call `getHeroes()`.
Our stakeholders are incredibly pleased with the added flexibility from the API integration, but it doesn't stop there. Next, we want the ability to create new heroes and delete heroes.
Our stakeholders are thrilled with the added flexibility from the API integration.
Now they want the ability to create and delete heroes.
But first, let's see what happens now when we try to update a hero's details.
Let's see first what happens when we try to update a hero's details.
.l-main-section
:marked
## Update hero details
The hero detail view already allows us to edit a hero's name. Go ahead, try
it now. As we type, the hero name is updated in the view heading, but
notice what happens when we hit the `Back` button: the changes are lost!
We can edit a hero's name already in the hero detail view. Go ahead and try
it. As we type, the hero name is updated in the view heading.
But when we hit the `Back` button, the changes are lost!
.l-sub-section
:marked
@ -348,7 +349,7 @@ block get-heroes-details
block observables-section-intro
:marked
Each `Http` method returns an `Observable` of HTTP `Response` objects.
Each `Http` service method returns an `Observable` of HTTP `Response` objects.
Our `HeroService` converts that `Observable` into a `Promise` and returns the promise to the caller.
In this section we learn to return the `Observable` directly and discuss when and why that might be
@ -364,7 +365,7 @@ block observables-section-intro
Recall that our `HeroService` quickly chained the `toPromise` operator to the `Observable` result of `http.get`.
That operator converted the `Observable` into a `Promise` and we passed that promise back to the caller.
Converting to a promise is often a good choice. We typically ask `http` to fetch a single chunk of data.
Converting to a promise is often a good choice. We typically ask `http.get` to fetch a single chunk of data.
When we receive the data, we're done.
A single result in the form of a promise is easy for the calling component to consume
and it helps that promises are widely understood by JavaScript programmers.
@ -456,21 +457,21 @@ block observable-transformers
.l-sub-section
:marked
The [switchMap operator](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md)
The [switchMap operator](http://www.learnrxjs.io/operators/transformation/switchmap.html)
(formerly known as "flatMapLatest") is very clever.
Every qualifying key event can trigger an http call.
Even with a 300ms pause between requests, we could have multiple http requests in flight
Every qualifying key event can trigger an `http` method call.
Even with a 300ms pause between requests, we could have multiple HTTP requests in flight
and they may not return in the order sent.
`switchMap` preserves the original request order while returning
only the observable from the most recent http call.
only the observable from the most recent `http` method call.
Results from prior calls are canceled and discarded.
We also short-circuit the http call and return an observable containing an empty array
We also short-circuit the `http` method call and return an observable containing an empty array
if the search text is empty.
Note that _canceling_ the `HeroSearchService` observable won't actually abort a pending http request
Note that _canceling_ the `HeroSearchService` observable won't actually abort a pending HTTP request
until the service supports that feature, a topic for another day.
We are content for now to discard unwanted results.
:marked
@ -495,9 +496,9 @@ block observable-transformers
+makeExample('app/rxjs-extensions.ts')(format='.')
:marked
We load them all at once by importing `rxjs-extensions` in `AppComponent`.
We load them all at once by importing `rxjs-extensions` at the top of `AppModule`.
+makeExcerpt('app/app.component.ts', 'rxjs-extensions')(format='.')
+makeExcerpt('app/app.module.ts', 'rxjs-extensions')(format='.')
:marked
### Add the search component to the dashboard
@ -509,7 +510,7 @@ block observable-transformers
- var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations'
- var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts'
:marked
And finally, we import `HeroSearchComponent` from
Finally, we import `HeroSearchComponent` from
<span ngio-ex>hero-search.component.ts</span>
and add it to the `!{_declarations}` !{_array}: