parent
e4ed1ce5af
commit
101d2ef091
|
@ -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}:
|
||||
|
||||
|
|
Loading…
Reference in New Issue