docs(toh-6/dart): quickfix to "BAD FILENAME" errors (#1929)

Exclude the new Observables section entirely for now.
This commit is contained in:
Patrice Chalin 2016-07-19 15:30:42 -07:00 committed by Kathy Walrath
parent 753452650c
commit b4c92d9c9c
2 changed files with 138 additions and 134 deletions

View File

@ -89,6 +89,9 @@ block heroes-comp-add
block review block review
//- Not showing animated gif due to differences between TS and Dart implementations. //- Not showing animated gif due to differences between TS and Dart implementations.
block observables-section
//- TBC
block filetree block filetree
.filetree .filetree
.file angular2_tour_of_heroes .file angular2_tour_of_heroes

View File

@ -359,7 +359,8 @@ block review
figure.image-display figure.image-display
img(src='/resources/images/devguide/toh/toh-http.anim.gif' alt="Heroes List Editting w/ HTTP") img(src='/resources/images/devguide/toh/toh-http.anim.gif' alt="Heroes List Editting w/ HTTP")
:marked block observables-section
:marked
## Observables ## Observables
Each `Http` method returns an `Observable` of HTTP `Response` objects. Each `Http` method returns an `Observable` of HTTP `Response` objects.
@ -394,9 +395,9 @@ block review
We start by creating `HeroSearchService` that sends search queries to our server's web api. We start by creating `HeroSearchService` that sends search queries to our server's web api.
+makeExample('toh-6/ts/app/hero-search.service.ts', null, 'app/hero-search.service.ts')(format=".") +makeExample('toh-6/ts/app/hero-search.service.ts', null, 'app/hero-search.service.ts')(format=".")
:marked :marked
The `http.get` call in `HeroSearchService` is similar to the `http.get` call in the `HeroService`. The `http.get` call in `HeroSearchService` is similar to the `http.get` call in the `HeroService`.
The notable difference: we no longer call `toPromise`. The notable difference: we no longer call `toPromise`.
We simply return the *observable* instead. We simply return the *observable* instead.
@ -405,8 +406,8 @@ block review
Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`. Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`.
The component template is simple - just a textbox and a list of matching search results. The component template is simple - just a textbox and a list of matching search results.
+makeExample('toh-6/ts/app/hero-search.component.html', null,'hero-search.component.html') +makeExample('toh-6/ts/app/hero-search.component.html', null,'hero-search.component.html')
:marked :marked
As the user types in the search box, a *keyup* event binding calls the component's `search` with the new search box value. As the user types in the search box, a *keyup* event binding calls the component's `search` with the new search box value.
The `*ngFor` repeats *hero* objects from the component's `heroes` property. No surprise there. The `*ngFor` repeats *hero* objects from the component's `heroes` property. No surprise there.
@ -416,11 +417,11 @@ block review
The `AsyncPipe` subscribes to the observable and produces the array of heroes to `*ngFor`. The `AsyncPipe` subscribes to the observable and produces the array of heroes to `*ngFor`.
Time to create the `HeroSearchComponent` class and metadata. Time to create the `HeroSearchComponent` class and metadata.
+makeExample('toh-6/ts/app/hero-search.component.ts', null,'hero-search.component.ts') +makeExample('toh-6/ts/app/hero-search.component.ts', null,'hero-search.component.ts')
:marked :marked
Focus on the `searchSubject`. Focus on the `searchSubject`.
+makeExample('toh-6/ts/app/hero-search.component.ts', 'searchSubject')(format=".") +makeExample('toh-6/ts/app/hero-search.component.ts', 'searchSubject')(format=".")
:marked :marked
A `Subject` is a producer of an _observable_ event stream. A `Subject` is a producer of an _observable_ event stream.
This `searchSubject` produces an `Observable` of strings, the filter criteria for the name search. This `searchSubject` produces an `Observable` of strings, the filter criteria for the name search.
@ -430,8 +431,8 @@ block review
We're going to access that `Observable` and turn the stream We're going to access that `Observable` and turn the stream
of strings into a stream of `Hero[]` arrays, the `heroes` property. of strings into a stream of `Hero[]` arrays, the `heroes` property.
+makeExample('toh-6/ts/app/hero-search.component.ts', 'search')(format=".") +makeExample('toh-6/ts/app/hero-search.component.ts', 'search')(format=".")
:marked :marked
If we passed every user keystroke directly to the `HeroSearchService`, we'd unleash a storm of http requests. If we passed every user keystroke directly to the `HeroSearchService`, we'd unleash a storm of http requests.
Bad idea. We don't want to tax our server resources and burn through our cellular network data plan. Bad idea. We don't want to tax our server resources and burn through our cellular network data plan.
@ -449,7 +450,7 @@ block review
* `switchMap` calls our search service for each search term that makes it through the `debounce` and `distinctUntilChanged` gauntlet. * `switchMap` calls our search service for each search term that makes it through the `debounce` and `distinctUntilChanged` gauntlet.
It cancels and discards previous search observables, returning only the latest search service observable. It cancels and discards previous search observables, returning only the latest search service observable.
.l-sub-section .l-sub-section
:marked :marked
The [switchMap operator](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md) The [switchMap operator](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md)
(formerly known as "flatMapLatest") is very clever. (formerly known as "flatMapLatest") is very clever.
@ -468,7 +469,7 @@ block review
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. until the service supports that feature, a topic for another day.
We are content for now to discard unwanted results. We are content for now to discard unwanted results.
:marked :marked
* `catch` intercepts a failed observable. * `catch` intercepts a failed observable.
Our simple example prints the error to the console; a real life application should do better. Our simple example prints the error to the console; a real life application should do better.
Then it re-throws the failed observable so that downstream processes know it failed. Then it re-throws the failed observable so that downstream processes know it failed.
@ -481,24 +482,24 @@ block review
We could extend `Observable` with just the operators we need here by We could extend `Observable` with just the operators we need here by
including the pertinent `import` statements at the top of this file. including the pertinent `import` statements at the top of this file.
.l-sub-section .l-sub-section
:marked :marked
Many authorities say we should do just that. Many authorities say we should do just that.
:marked :marked
We take a different approach in this example. We take a different approach in this example.
We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file. We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file.
+makeExample('toh-6/ts/app/rxjs-extensions.ts', null, 'app/rxjs-extensions.ts')(format=".") +makeExample('toh-6/ts/app/rxjs-extensions.ts', null, 'app/rxjs-extensions.ts')(format=".")
:marked :marked
We load them all at once by importing `rxjs-extensions` in `AppComponent`. We load them all at once by importing `rxjs-extensions` in `AppComponent`.
+makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app/app.component.ts')(format=".") +makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app/app.component.ts')(format=".")
:marked :marked
Finally, we add the `HeroSearchComponent` to the bottom of the `DashboardComponent`. Finally, we add the `HeroSearchComponent` to the bottom of the `DashboardComponent`.
Run the app again, go to the *Dashboard*, and enter some text in the search box below the hero tiles. Run the app again, go to the *Dashboard*, and enter some text in the search box below the hero tiles.
At some point it might look like this. At some point it might look like this.
figure.image-display figure.image-display
img(src='/resources/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component") img(src='/resources/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component")
.l-main-section .l-main-section
@ -554,7 +555,7 @@ block filetree
- We extended HeroService to support post, put and delete calls. - We extended HeroService to support post, put and delete calls.
- We updated our components to allow adding, editing and deleting of heroes. - We updated our components to allow adding, editing and deleting of heroes.
- We configured an in-memory web API. - We configured an in-memory web API.
- We learned how to use Observables. <li if-docs="ts"> We learned how to use Observables.</li>
Below is a summary of the files we changed and added. Below is a summary of the files we changed and added.