docs(toh-6/dart): quickfix to "BAD FILENAME" errors (#1929)
Exclude the new Observables section entirely for now.
This commit is contained in:
parent
753452650c
commit
b4c92d9c9c
|
@ -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
|
||||||
|
|
|
@ -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.
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue