diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.html b/public/docs/_examples/toh-6/ts/app/dashboard.component.html index e22a2a5ebb..fe1ee585f6 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.html +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.html @@ -1,13 +1,10 @@

Top Heroes

-
-

{{hero.name}}

- diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts index 9ef06ca47c..81bb8eb773 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts @@ -17,23 +17,22 @@ export class HeroSearchComponent implements OnInit { // #docregion search heroes: Observable; // #enddocregion search - // #docregion searchSubject - searchSubject = new Subject(); - // #enddocregion searchSubject + // #docregion searchTerms + searchTerms = new Subject(); + // #enddocregion searchTerms constructor( private heroSearchService: HeroSearchService, private router: Router) {} - // #docregion searchSubject + // #docregion searchTerms // Push a search term into the observable stream. - search(term: string) { this.searchSubject.next(term); } - // #enddocregion searchSubject + search(term: string) { this.searchTerms.next(term); } + // #enddocregion searchTerms // #docregion search ngOnInit() { - this.heroes = this.searchSubject - .asObservable() // cast as Observable + this.heroes = this.searchTerms .debounceTime(300) // wait for 300ms pause in events .distinctUntilChanged() // ignore if next search term is same as previous .switchMap(term => term // switch to new observable each time @@ -41,9 +40,8 @@ export class HeroSearchComponent implements OnInit { ? this.heroSearchService.search(term) // or the observable of empty heroes if no search term : Observable.of([])) - .catch(error => { - // Todo: real error handling + // TODO: real error handling console.log(error); return Observable.of([]); }); diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts index 42018e3526..95a31707eb 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts @@ -9,11 +9,9 @@ export class HeroSearchService { constructor(private http: Http) {} - // #docregion observable-search search(term: string) { return this.http - .get(`app/heroes/?name=${term}+`) + .get(`app/heroes/?name=${term}`) .map((r: Response) => r.json().data as Hero[]); } - // #enddocregion observable-search } diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade index 104c8575fe..c7edf449fc 100644 --- a/public/docs/ts/latest/tutorial/toh-pt6.jade +++ b/public/docs/ts/latest/tutorial/toh-pt6.jade @@ -419,11 +419,11 @@ block observables-section Time to create the `HeroSearchComponent` class and metadata. +makeExample('toh-6/ts/app/hero-search.component.ts', null,'hero-search.component.ts') :marked - Focus on the `searchSubject`. - +makeExample('toh-6/ts/app/hero-search.component.ts', 'searchSubject')(format=".") + Focus on the `searchTerms`. + +makeExample('toh-6/ts/app/hero-search.component.ts', 'searchTerms')(format=".") :marked 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 `searchTerms` produces an `Observable` of strings, the filter criteria for the name search. Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`. @@ -439,8 +439,6 @@ block observables-section Fortunately we can chain `Observable` operators to the string `Observable` that reduce the request flow. We'll make fewer calls to the `HeroSearchService` and still get timely results. Here's how: - * The `asObservable` operator casts the `Subject` as an `Observable` of filter strings. - * `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds before passing along the latest string. We'll never make requests more frequently than 300ms. @@ -495,11 +493,11 @@ block observables-section +makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app.component.ts')(format=".") :marked - ### Adding the search component to the dashboard + ### Add the search component to the dashboard - We add the `HeroSearchComponent` to the bottom of the `DashboardComponent` template. + We add the hero search HTML element to the bottom of the `DashboardComponent` template. - +makeExample('toh-6/ts/app/dashboard.component.html', null, 'dashboard.component.html') + +makeExample('app/dashboard.component.html') :marked And finally, we import the `HeroSearchComponent` and add it to the `directives` array.