docs(aio): rename http guide

aio/content/examples/http/src/app/app.component.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Component }         from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <hero-list></hero-list>
+    <hero-list-promise></hero-list-promise>
+    <my-wiki></my-wiki>
+    <my-wiki-smart></my-wiki-smart>
+  `
+})
+export class AppComponent { }

aio/content/examples/http/src/app/app.module.1.ts

@@ -0,0 +1,23 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+import { HttpModule, JsonpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    JsonpModule
+  ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule {
+}
+
+
+

aio/content/examples/http/src/app/app.module.ts

@@ -0,0 +1,46 @@
+// #docplaster
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+import { HttpModule, JsonpModule } from '@angular/http';
+
+
+import { InMemoryWebApiModule }     from 'angular-in-memory-web-api';
+import { HeroData }                 from './hero-data';
+import { requestOptionsProvider }   from './default-request-options.service';
+
+import { AppComponent }             from './app.component';
+
+import { HeroListComponent }        from './toh/hero-list.component';
+import { HeroListPromiseComponent } from './toh/hero-list.component.promise';
+
+import { WikiComponent }      from './wiki/wiki.component';
+import { WikiSmartComponent } from './wiki/wiki-smart.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    JsonpModule,
+    // #docregion in-mem-web-api
+    InMemoryWebApiModule.forRoot(HeroData)
+    // #enddocregion in-mem-web-api
+  ],
+  declarations: [
+    AppComponent,
+    HeroListComponent,
+    HeroListPromiseComponent,
+    WikiComponent,
+    WikiSmartComponent
+  ],
+// #docregion provide-default-request-options
+  providers: [ requestOptionsProvider ],
+// #enddocregion provide-default-request-options
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+
+
+

aio/content/examples/http/src/app/default-request-options.service.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { BaseRequestOptions, RequestOptions } from '@angular/http';
+
+@Injectable()
+export class DefaultRequestOptions extends BaseRequestOptions {
+
+  constructor() {
+    super();
+
+    // Set the default 'Content-Type' header
+    this.headers.set('Content-Type', 'application/json');
+  }
+}
+
+export const requestOptionsProvider = { provide: RequestOptions, useClass: DefaultRequestOptions };

aio/content/examples/http/src/app/hero-data.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+export class HeroData implements InMemoryDbService {
+  createDb() {
+    let heroes = [
+      { id: 1, name: 'Windstorm' },
+      { id: 2, name: 'Bombasto' },
+      { id: 3, name: 'Magneta' },
+      { id: 4, name: 'Tornado' }
+    ];
+    return {heroes};
+  }
+}

aio/content/examples/http/src/app/heroes.json

@@ -0,0 +1,8 @@
+{
+  "data": [
+    { "id": 1, "name": "Windstorm" },
+    { "id": 2, "name": "Bombasto" },
+    { "id": 3, "name": "Magneta" },
+    { "id": 4, "name": "Tornado" }
+  ]
+}

aio/content/examples/http/src/app/toh/hero-list.component.html

@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h1>Tour of Heroes ({{mode}})</h1>
+<h3>Heroes:</h3>
+<ul>
+  <li *ngFor="let hero of heroes">{{hero.name}}</li>
+</ul>
+
+<label>New hero name: <input #newHeroName /></label>
+<button (click)="addHero(newHeroName.value); newHeroName.value=''">Add Hero</button>
+
+<p class="error" *ngIf="errorMessage">{{errorMessage}}</p>

aio/content/examples/http/src/app/toh/hero-list.component.promise.ts

@@ -0,0 +1,40 @@
+// #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 = <any>error);
+  }
+
+  addHero (name: string) {
+    if (!name) { return; }
+    this.heroService.addHero(name)
+                     .then(
+                       hero  => this.heroes.push(hero),
+                       error =>  this.errorMessage = <any>error);
+  }
+  // #enddocregion methods
+}
+// #enddocregion component

aio/content/examples/http/src/app/toh/hero-list.component.ts

@@ -0,0 +1,44 @@
+// #docregion
+// Observable Version
+import { Component, OnInit } from '@angular/core';
+import { Hero }              from './hero';
+import { HeroService }       from './hero.service';
+
+@Component({
+  selector: 'hero-list',
+  templateUrl: './hero-list.component.html',
+  providers: [ HeroService ],
+  styles: ['.error {color:red;}']
+})
+// #docregion component
+export class HeroListComponent implements OnInit {
+  errorMessage: string;
+  heroes: Hero[];
+  mode = 'Observable';
+
+  constructor (private heroService: HeroService) {}
+
+  ngOnInit() { this.getHeroes(); }
+
+  // #docregion methods
+  // #docregion getHeroes
+  getHeroes() {
+    this.heroService.getHeroes()
+                     .subscribe(
+                       heroes => this.heroes = heroes,
+                       error =>  this.errorMessage = <any>error);
+  }
+  // #enddocregion getHeroes
+
+  // #docregion addHero
+  addHero(name: string) {
+    if (!name) { return; }
+    this.heroService.create(name)
+                     .subscribe(
+                       hero  => this.heroes.push(hero),
+                       error =>  this.errorMessage = <any>error);
+  }
+  // #enddocregion addHero
+  // #enddocregion methods
+}
+// #enddocregion component

aio/content/examples/http/src/app/toh/hero.service.promise.ts

@@ -0,0 +1,60 @@
+// #docplaster
+// #docregion
+// Promise Version
+import { Injectable }              from '@angular/core';
+import { Http, Response }          from '@angular/http';
+import { Headers, RequestOptions } from '@angular/http';
+
+// #docregion rxjs-imports
+import 'rxjs/add/operator/toPromise';
+// #enddocregion rxjs-imports
+
+import { Hero } from './hero';
+
+@Injectable()
+export class HeroService {
+  // URL to web api
+  private heroesUrl = 'app/heroes';
+
+  constructor (private http: Http) {}
+
+  // #docregion methods
+  getHeroes (): Promise<Hero[]> {
+    return this.http.get(this.heroesUrl)
+                    .toPromise()
+                    .then(this.extractData)
+                    .catch(this.handleError);
+  }
+
+  addHero (name: string): Promise<Hero> {
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.post(this.heroesUrl, { name }, options)
+               .toPromise()
+               .then(this.extractData)
+               .catch(this.handleError);
+  }
+
+  private extractData(res: Response) {
+    let body = res.json();
+    return body.data || { };
+  }
+
+  private handleError (error: Response | any) {
+    // In a real world app, we might use a remote logging infrastructure
+    let errMsg: string;
+    if (error instanceof Response) {
+      const body = error.json() || '';
+      const err = body.error || JSON.stringify(body);
+      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+    }
+    console.error(errMsg);
+    return Promise.reject(errMsg);
+  }
+
+// #enddocregion methods
+}
+// #enddocregion

aio/content/examples/http/src/app/toh/hero.service.ts

@@ -0,0 +1,80 @@
+// #docplaster
+// #docregion
+// Observable Version
+// #docregion v1
+import { Injectable }              from '@angular/core';
+import { Http, Response }          from '@angular/http';
+// #enddocregion v1
+// #docregion import-request-options
+import { Headers, RequestOptions } from '@angular/http';
+// #enddocregion import-request-options
+// #docregion v1
+
+// #docregion rxjs-imports
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+// #enddocregion rxjs-imports
+
+import { Hero } from './hero';
+
+@Injectable()
+export class HeroService {
+  // #docregion endpoint
+  private heroesUrl = 'api/heroes';  // URL to web API
+  // #enddocregion endpoint
+
+  // #docregion ctor
+  constructor (private http: Http) {}
+  // #enddocregion ctor
+
+  // #docregion methods, error-handling, http-get
+  getHeroes(): Observable<Hero[]> {
+    return this.http.get(this.heroesUrl)
+                    .map(this.extractData)
+                    .catch(this.handleError);
+  }
+  // #enddocregion error-handling, http-get, v1
+
+  // #docregion create, create-sig
+  create(name: string): Observable<Hero> {
+  // #enddocregion create-sig
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.post(this.heroesUrl, { name }, options)
+                    .map(this.extractData)
+                    .catch(this.handleError);
+  }
+  // #enddocregion create
+
+  // #docregion v1, extract-data
+  private extractData(res: Response) {
+    let body = res.json();
+    return body.data || { };
+  }
+  // #enddocregion extract-data
+  // #docregion error-handling
+
+  private handleError (error: Response | any) {
+    // In a real world app, you might use a remote logging infrastructure
+    let errMsg: string;
+    if (error instanceof Response) {
+      const body = error.json() || '';
+      const err = body.error || JSON.stringify(body);
+      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+    }
+    console.error(errMsg);
+    return Observable.throw(errMsg);
+  }
+  // #enddocregion error-handling, methods
+}
+// #enddocregion
+
+/*
+  // #docregion endpoint-json
+  private heroesUrl = 'app/heroes.json'; // URL to JSON file
+  // #enddocregion endpoint-json
+*/

aio/content/examples/http/src/app/toh/hero.ts

@@ -0,0 +1,6 @@
+// #docregion
+export class Hero {
+  constructor(
+    public id: number,
+    public name: string) { }
+}

aio/content/examples/http/src/app/wiki/wiki-smart.component.ts

@@ -0,0 +1,47 @@
+/* tslint:disable: member-ordering forin */
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+// #docregion rxjs-imports
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/switchMap';
+
+// #docregion import-subject
+import { Subject } from 'rxjs/Subject';
+// #enddocregion import-subject
+
+import { WikipediaService } from './wikipedia.service';
+
+@Component({
+  selector: 'my-wiki-smart',
+  template: `
+    <h1>Smarter Wikipedia Demo</h1>
+    <p>Search when typing stops</p>
+    <input #term (keyup)="search(term.value)"/>
+    <ul>
+      <li *ngFor="let item of items | async">{{item}}</li>
+    </ul>`,
+  providers: [ WikipediaService ]
+})
+export class WikiSmartComponent implements OnInit {
+  items: Observable<string[]>;
+
+  constructor (private wikipediaService: WikipediaService) {}
+
+  // #docregion subject
+  private searchTermStream = new Subject<string>();
+  search(term: string) { this.searchTermStream.next(term); }
+  // #enddocregion subject
+
+  ngOnInit() {
+    // #docregion observable-operators
+    this.items = this.searchTermStream
+      .debounceTime(300)
+      .distinctUntilChanged()
+      .switchMap((term: string) => this.wikipediaService.search(term));
+    // #enddocregion observable-operators
+  }
+}

aio/content/examples/http/src/app/wiki/wiki.component.ts

@@ -0,0 +1,26 @@
+// #docregion
+import { Component }        from '@angular/core';
+import { Observable }       from 'rxjs/Observable';
+
+import { WikipediaService } from './wikipedia.service';
+
+@Component({
+  selector: 'my-wiki',
+  template: `
+    <h1>Wikipedia Demo</h1>
+    <p>Search after each keystroke</p>
+    <input #term (keyup)="search(term.value)"/>
+    <ul>
+      <li *ngFor="let item of items | async">{{item}}</li>
+    </ul>`,
+  providers: [ WikipediaService ]
+})
+export class WikiComponent {
+  items: Observable<string[]>;
+
+  constructor (private wikipediaService: WikipediaService) { }
+
+  search (term: string) {
+    this.items = this.wikipediaService.search(term);
+  }
+}

aio/content/examples/http/src/app/wiki/wikipedia.service.1.ts

@@ -0,0 +1,26 @@
+// Create the query string by hand
+// #docregion
+import { Injectable } from '@angular/core';
+import { Jsonp }      from '@angular/http';
+
+import 'rxjs/add/operator/map';
+
+@Injectable()
+export class WikipediaService {
+  constructor(private jsonp: Jsonp) { }
+
+  // TODO: Add error handling
+  search(term: string) {
+
+    let wikiUrl = 'http://en.wikipedia.org/w/api.php';
+
+    // #docregion query-string
+    let queryString =
+      `?search=${term}&action=opensearch&format=json&callback=JSONP_CALLBACK`;
+
+    return this.jsonp
+               .get(wikiUrl + queryString)
+               .map(response => <string[]> response.json()[1]);
+    // #enddocregion query-string
+  }
+}

aio/content/examples/http/src/app/wiki/wikipedia.service.ts

@@ -0,0 +1,30 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Jsonp, URLSearchParams } from '@angular/http';
+
+import 'rxjs/add/operator/map';
+
+@Injectable()
+export class WikipediaService {
+  constructor(private jsonp: Jsonp) {}
+
+  search (term: string) {
+
+    let wikiUrl = 'http://en.wikipedia.org/w/api.php';
+
+    // #docregion search-parameters
+    let params = new URLSearchParams();
+    params.set('search', term); // the user's search value
+    params.set('action', 'opensearch');
+    params.set('format', 'json');
+    params.set('callback', 'JSONP_CALLBACK');
+    // #enddocregion search-parameters
+
+    // #docregion call-jsonp
+    // TODO: Add error handling
+    return this.jsonp
+               .get(wikiUrl, { search: params })
+               .map(response => <string[]> response.json()[1]);
+    // #enddocregion call-jsonp
+  }
+}

aio/content/examples/http/src/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html>
+  <head>
+    <title>Angular Http Demo</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+      <my-app>Loading...</my-app>
+  </body>
+
+</html>

aio/content/examples/http/src/main.ts

@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);