Angular 2 Cookbook by Frisbie Matt

Author:Frisbie, Matt
Language: eng
Format: epub, azw3, mobi
Publisher: Packt Publishing
Published: 2017-01-20T05:00:00+00:00

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/8629/.

Getting ready

Begin with the following application:

[app/app.module.ts] import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {SearchComponent} from './search.component'; import {APIService} from './api.service'; import {HttpModule} from '@angular/http'; @NgModule({ imports: [ BrowserModule, HttpModule ], declarations: [ SearchComponent ], providers: [ APIService ], bootstrap: [ SearchComponent ] }) export class AppModule {} [app/search.component.ts] import {Component} from '@angular/core'; import {APIService} from './api.service'; @Component({ selector: 'search', template: ` <input #queryField (keyup)="search(queryField.value)"> <p *ngFor="let result of results">{{result}}</p> ` }) export class SearchComponent { results:Array<string> = []; constructor(private apiService_:APIService) {} search(query:string):void { this.apiService_ .search(query) .subscribe(result => this.results.push(result)); } } [app/api.service.ts] import {Injectable} from '@angular/core'; import {Http} from '@angular/http'; import {Observable} from 'rxjs/Rx'; @Injectable() export class APIService { constructor(private http_:Http) {} search(query:string):Observable<string> { return this.http_ .get('static/response.json') .map(r => r.json()['prefix'] + query) // Below is just a clever way of randomly // delaying the response between 0 to 1000ms .concatMap( x => Observable.of(x).delay(Math.random()*1000)); } }

Your objective is to dramatically enhance this using RxJS.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.