Heroes API URL is "{{config.heroesUrl}}"
+Textfile URL is "{{config.textfile}}"
+{{error | json}}
diff --git a/aio/content/examples/http/src/app/config/config.component.ts b/aio/content/examples/http/src/app/config/config.component.ts new file mode 100644 index 0000000000000..f372c81b79448 --- /dev/null +++ b/aio/content/examples/http/src/app/config/config.component.ts @@ -0,0 +1,78 @@ +// #docplaster +// #docregion +import { Component } from '@angular/core'; +import { Config, ConfigService } from './config.service'; +import { MessageService } from '../message.service'; + +@Component({ + selector: 'app-config', + templateUrl: './config.component.html', + providers: [ ConfigService ], + styles: ['.error {color: red;}'] +}) +export class ConfigComponent { + error: any; + headers: string[]; + // #docregion v2 + config: Config; + + // #enddocregion v2 + constructor(private configService: ConfigService) {} + + clear() { + this.config = undefined; + this.error = undefined; + this.headers = undefined; + } + + // #docregion v1, v2, v3 + showConfig() { + this.configService.getConfig() + // #enddocregion v1, v2 + .subscribe( + data => this.config = { ...data }, // success path + error => this.error = error // error path + ); + } + // #enddocregion v3 + + showConfig_v1() { + this.configService.getConfig_1() + // #docregion v1, v1_callback + .subscribe(data => this.config = { + heroesUrl: data['heroesUrl'], + textfile: data['textfile'] + }); + // #enddocregion v1_callback + } + // #enddocregion v1 + + showConfig_v2() { + this.configService.getConfig() + // #docregion v2, v2_callback + // clone the data object, using its known Config shape + .subscribe(data => this.config = { ...data }); + // #enddocregion v2_callback + } + // #enddocregion v2 + +// #docregion showConfigResponse + showConfigResponse() { + this.configService.getConfigResponse() + // resp is of type `HttpResponseContents: "{{contents}}"
diff --git a/aio/content/examples/http/src/app/downloader/downloader.component.ts b/aio/content/examples/http/src/app/downloader/downloader.component.ts new file mode 100644 index 0000000000000..21216d1c6305e --- /dev/null +++ b/aio/content/examples/http/src/app/downloader/downloader.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { DownloaderService } from './downloader.service'; + +@Component({ + selector: 'app-downloader', + templateUrl: './downloader.component.html', + providers: [ DownloaderService ] +}) +export class DownloaderComponent { + contents: string; + constructor(private downloaderService: DownloaderService) {} + + clear() { + this.contents = undefined; + } + + // #docregion download + download() { + this.downloaderService.getTextFile('assets/textfile.txt') + .subscribe(results => this.contents = results); + } + // #enddocregion download +} diff --git a/aio/content/examples/http/src/app/downloader/downloader.service.ts b/aio/content/examples/http/src/app/downloader/downloader.service.ts new file mode 100644 index 0000000000000..e10a4f2b35410 --- /dev/null +++ b/aio/content/examples/http/src/app/downloader/downloader.service.ts @@ -0,0 +1,39 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +import { tap } from 'rxjs/operators'; + +import { MessageService } from '../message.service'; + +@Injectable() +export class DownloaderService { + constructor( + private http: HttpClient, + private messageService: MessageService) { } + + // #docregion getTextFile + getTextFile(filename: string) { + // The Observable returned by get() is of type ObservableSearches when typing stops. Caches for 30 seconds.
+ + + + + + + +{{errorMessage}}
diff --git a/aio/content/examples/http/src/app/toh/hero-list.component.promise.ts b/aio/content/examples/http/src/app/toh/hero-list.component.promise.ts deleted file mode 100644 index 4bbe7eade2226..0000000000000 --- a/aio/content/examples/http/src/app/toh/hero-list.component.promise.ts +++ /dev/null @@ -1,40 +0,0 @@ -// #docregion -// Promise Version -import { Component, OnInit } from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service.promise'; - -@Component({ - selector: 'hero-list-promise', - templateUrl: './hero-list.component.html', - providers: [ HeroService ], - styles: ['.error {color:red;}'] -}) -// #docregion component -export class HeroListPromiseComponent implements OnInit { - errorMessage: string; - heroes: Hero[]; - mode = 'Promise'; - - constructor (private heroService: HeroService) {} - - ngOnInit() { this.getHeroes(); } - - // #docregion methods - getHeroes() { - this.heroService.getHeroes() - .then( - heroes => this.heroes = heroes, - error => this.errorMessage =Search when typing stops
- -Search after each keystroke
- -