06 Http

06 HTTP, JSON, AJAX in Angular2

ACHTUNG: Dieser Tutorial-Teil ist leider noch Stand RC-4 von AngularJS2. Verwenden Sie ggf. die englischsprachige Version.

Der Quellcode im Repository ist bereits 100% aktualisiert und lauffähig mit AngularJS v2.1.1 .

Inhalt:

• Angular2-HTTP
• Angular2-HTTP_PROVIDERS
• Angular2-HTTP-Requests
• Angular2-In-Memory-Web-Api
• Observables-Promises
• hilfreiche Links

Angular2-HTTP

Angular2 stellt eine eigene Klasse "http" zur Verfügung, die injiziert werden kann (@Injectable Annotation). Angular2-HTTP ist kein @angular/core Modul sondern befindet sich in @angular/http.

Angular2-HTTP_PROVIDERS

Für das Einbetten von Angular2-HTTP in eine Angular2-Applikation muss Angular2 [HTTP-PROVIDERS] eingebunden werden (Bootstrap-Method).

main.ts                                                       
 import {bootstrap} from '@angular/plattform-browser-dynamic';                                                  
 import {HTTP_PROVIDERS} from '@angular/http';            
 import {AppComponent} from './app.component';               
 bootstrap(AppComponent, [HTTP_PROVIDERS]);

Angular2-HTTP-Requests

constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions)

request(url: string | Request,options?: RequestOptionsArgs) : Observable<Response>

get(url : string, options?: RequestOptionsArgs): Observable<Response>

post(url : string, options?: RequestOptionsArgs): Observable<Response>

put(url : string, options?: RequestOptionsArgs): Observable<Response>

delete(url : string, options?: RequestOptionsArgs): Observable<Response>

patch(url : string, options?: RequestOptionsArgs): Observable<Response>

Angular2-In-Memory-Web-Api

Die Angular2 "In-Memory-Web-Api " simuliert einen Web-Api-Server um Anfragen (Bsp. Persistieren von Daten) zu testen. Wie bei Angular2-HTTP befindet sich die "In-Memory-Web-Api" nicht in "@angular/core" sondern besitzt eine eigene Libary "angular2-in-memory-web-api"

Das Einbinden der "In-Memory-Web-Api" findet in der main.ts statt.

// Imports for loading & configuring the in-memory web api
import { XHRBackend } from '@angular/http';

import { InMemoryBackendService,
         SEED_DATA }  from 'angular2-in-memory-web-api';
import { HeroData }   from './hero-data';

// The usual bootstrapping imports
import { bootstrap }      from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent }   from './app.component';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
    { provide: SEED_DATA,  useClass: HeroData }                // in-mem server data
]);

Der Bootstrap-Methode werden die Provider für das HTTP, XHRBackend[InMemoryBackendService] und für die In-Memory-Server-Daten [HeroData].

Um die Daten zu halten muss eine eigene Klasse erstellt werden die (Hier: HeroData) die eine Methode bereitstellt (createDB) die ein Array mit den in der Datenbank vorhandenen Daten zurückgibt.

export class HeroData {
  createDb() {
    let heroes = [
      { id: '1', name: 'Windstorm' },
      { id: '2', name: 'Bombasto' },
      { id: '3', name: 'Magneta' },
      { id: '4', name: 'Tornado' }
    ];
    return {heroes};
  }
}

In der Data-Service Klasse (Hier: HeroService) muss dann eine URL angegeben werden um die api-calls an die In-Memory-Db weiterzuleiten.

private heroesUrl = 'app/heroes';  // URL to web API

Observables & Promises

Angular2-HTTP-Requests liefern stets nach jedem erfolgreichen Request ein Objekt vom Typ Observable zurück. Observables können mit der RxJS-Operation (.toPromise) in ein Promise umgewandelt werden.

Promise get-Request

 getHeroes (): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
                  .toPromise()
                  .then(this.extractData)
                  .catch(this.handleError);
}

Observable get-Request

getHeroes (): Observable<Hero[]> {
    return this.http.get(this.heroesUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }  

hilfreiche Links

• https://angular.io/docs/ts/latest/tutorial/toh-pt6.html
• https://angular.io/docs/ts/latest/guide/server-communication.html#!#in-mem-web-api
• https://angular.io/docs/ts/latest/api/http/index/HTTP_PROVIDERS-let.html
• https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/
• https://medium.com/google-developer-experts/angular-2-introduction-to-new-http-module-1278499db2a0#.2e6wge3rq
• https://egghead.io/courses/angular-2-fundamentals