Skip to content

Commit 6fe2e4e

Browse files
committed
docs(toh-6): search query fixes
Changes: - Drop `asObservable()` since it is deprecated in RxJS 5 (see the [migration guide](https://github.com/ReactiveX/RxJS/blob/master/MIGRATION.md#operat ors-renamed-or-removed)). - Drop `+` from hero search query URL: `app/heroes/?name=${term}+`. At best it is interpreted as a regex op that serves no purpose, at worst, it gets interpreted as a space (cf. [HTML 4.01 section 17.13.4](https://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4) ). - Replace the generic term "term" by "pattern" since the serach string is actually a search pattern (regex). - Rename `searchSubject` to `searchPatterns` (or maybe it should be `searchPattern$`) since subjects are just observables that can have data injected into them. - Other minor tweak to prose. This work is in preparation for angular#1924. Note: toh-6 tests pass.
1 parent 68c9561 commit 6fe2e4e

File tree

4 files changed

+21
-30
lines changed

4 files changed

+21
-30
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
<!-- #docregion -->
22
<h3>Top Heroes</h3>
33
<div class="grid grid-pad">
4-
<!-- #docregion click -->
54
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
6-
<!-- #enddocregion click -->
75
<div class="module hero">
86
<h4>{{hero.name}}</h4>
97
</div>
108
</div>
119
</div>
1210
<hero-search></hero-search>
13-

public/docs/_examples/toh-6/ts/app/hero-search.component.ts

+13-15
Original file line numberDiff line numberDiff line change
@@ -17,33 +17,31 @@ export class HeroSearchComponent implements OnInit {
1717
// #docregion search
1818
heroes: Observable<Hero[]>;
1919
// #enddocregion search
20-
// #docregion searchSubject
21-
searchSubject = new Subject<string>();
22-
// #enddocregion searchSubject
20+
// #docregion searchPatterns
21+
searchPatterns = new Subject<string>();
22+
// #enddocregion searchPatterns
2323

2424
constructor(
2525
private heroSearchService: HeroSearchService,
2626
private router: Router) {}
27-
// #docregion searchSubject
27+
// #docregion searchPatterns
2828

29-
// Push a search term into the observable stream.
30-
search(term: string) { this.searchSubject.next(term); }
31-
// #enddocregion searchSubject
29+
// Push a search pattern into the observable stream.
30+
search(pattern: string) { this.searchPatterns.next(pattern); }
31+
// #enddocregion searchPatterns
3232
// #docregion search
3333

3434
ngOnInit() {
35-
this.heroes = this.searchSubject
36-
.asObservable() // cast as Observable
35+
this.heroes = this.searchPatterns
3736
.debounceTime(300) // wait for 300ms pause in events
38-
.distinctUntilChanged() // ignore if next search term is same as previous
39-
.switchMap(term => term // switch to new observable each time
37+
.distinctUntilChanged() // ignore if next search pattern is same as previous
38+
.switchMap(pattern => pattern // switch to new observable each time
4039
// return the http search observable
41-
? this.heroSearchService.search(term)
42-
// or the observable of empty heroes if no search term
40+
? this.heroSearchService.search(pattern)
41+
// or the observable of empty heroes if no search pattern
4342
: Observable.of<Hero[]>([]))
44-
4543
.catch(error => {
46-
// Todo: real error handling
44+
// TODO: real error handling
4745
console.log(error);
4846
return Observable.of<Hero[]>([]);
4947
});

public/docs/_examples/toh-6/ts/app/hero-search.service.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,9 @@ export class HeroSearchService {
99

1010
constructor(private http: Http) {}
1111

12-
// #docregion observable-search
13-
search(term: string) {
12+
search(pattern: string) {
1413
return this.http
15-
.get(`app/heroes/?name=${term}+`)
14+
.get(`app/heroes/?name=${pattern}`)
1615
.map((r: Response) => r.json().data as Hero[]);
1716
}
18-
// #enddocregion observable-search
1917
}

public/docs/ts/latest/tutorial/toh-pt6.jade

+6-8
Original file line numberDiff line numberDiff line change
@@ -419,11 +419,11 @@ block observables-section
419419
Time to create the `HeroSearchComponent` class and metadata.
420420
+makeExample('toh-6/ts/app/hero-search.component.ts', null,'hero-search.component.ts')
421421
:marked
422-
Focus on the `searchSubject`.
423-
+makeExample('toh-6/ts/app/hero-search.component.ts', 'searchSubject')(format=".")
422+
Focus on the `searchPatterns`.
423+
+makeExample('toh-6/ts/app/hero-search.component.ts', 'searchPatterns')(format=".")
424424
:marked
425425
A `Subject` is a producer of an _observable_ event stream.
426-
This `searchSubject` produces an `Observable` of strings, the filter criteria for the name search.
426+
This `searchPatterns` produces an `Observable` of strings, the filter criteria for the name search.
427427

428428
Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`.
429429

@@ -439,8 +439,6 @@ block observables-section
439439
Fortunately we can chain `Observable` operators to the string `Observable` that reduce the request flow.
440440
We'll make fewer calls to the `HeroSearchService` and still get timely results. Here's how:
441441

442-
* The `asObservable` operator casts the `Subject` as an `Observable` of filter strings.
443-
444442
* `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds
445443
before passing along the latest string. We'll never make requests more frequently than 300ms.
446444

@@ -495,11 +493,11 @@ block observables-section
495493
+makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app.component.ts')(format=".")
496494

497495
:marked
498-
### Adding the search component to the dashboard
496+
### Add the search component to the dashboard
499497

500-
We add the `HeroSearchComponent` to the bottom of the `DashboardComponent` template.
498+
We add the hero search HTML element to the bottom of the `DashboardComponent` template.
501499

502-
+makeExample('toh-6/ts/app/dashboard.component.html', null, 'dashboard.component.html')
500+
+makeExample('app/dashboard.component.html')
503501

504502
:marked
505503
And finally, we import the `HeroSearchComponent` and add it to the `directives` array.

0 commit comments

Comments
 (0)