diff --git a/public/docs/ts/_cache/tutorial/toh-pt6.jade b/public/docs/ts/_cache/tutorial/toh-pt6.jade index 4a484b20e5..8f17d79380 100644 --- a/public/docs/ts/_cache/tutorial/toh-pt6.jade +++ b/public/docs/ts/_cache/tutorial/toh-pt6.jade @@ -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 hero-search.component.ts and add it to the `!{_declarations}` !{_array}: