Erstellung eines Http-Service in Angular 2

Wenn man sich mit Angular 2 beschäftigt, kommt man um die Erstellung eines Http-Service kaum herum. Dazu verfasste ich einen Blogartikel. Auch diesmal habe ich diesen ursprünglich für meinen Arbeitgeber Cocomore AG geschrieben, die Quelle dazu gibt es hier: Erstellung und Nutzung eines Angular 2 Services.

Damit in einem Angular-2-Projekt Code nicht doppelt und dreifach geschrieben werden muss, gibt es Services. Diese unterstützten gleichzeitig die Modularität des Angular-2-Projekts. Wie man einen Service aufbaut und anschließend inkludiert, zeigen wir im Folgenden anhand eines Http-Services. Dieser Service soll die Schnittstelle zwischen den Daten (im .json-Format) und der Datenverarbeitung (also dem Component) sein.

Der Ausgangspunkt ist eine laufende Angular-2-Instanz, die entweder über den Angular 2 Webpack Starter oder über Angular CLI erstellt wurde.

Der Service

Für den Http-Service erstellen wir zunächst einen Ordner „services“ unter app/. Darin speichert man eine Datei namens „http.service.ts“. Folgender Code muss zunächst in die Datei eingefügt werden:

// http.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class HttpService {
     // ...
}

Angular 2 nutzt das Entwurfsmuster Dependency Injection, um zu prüfen, ob alle erforderlichen Abhängigkeiten gegeben sind. Damit das System also prüft, ob der Service genutzt werden kann, müssen wir hier die Dependency Injection einbauen: Dies geschieht durch die Einbindung des Injectable-Moduls aus dem Angular Core und die Anweisung @Injectable(). Diese Anweisung steht direkt in der Zeile über der Klassen-Definition, auf die sie sich bezieht.

Zusätzlich benötigen wir für einen Http-Service das Http-Modul aus dem Angular Core. Dieses Modul deckt die gängigen Http-Methoden ab und stellt vereinfachte Funktionen zur Verfügung.

In diesem Beispiel sollen aus einer beliebigen JSON-Datei Inhalte per GET-Methode geladen werden. Dafür werden die folgenden Funktionen im Http-Service benötigt:

export class HttpService {
     http;
     constructor( http: Http ){
          this.http = http;
     }
     getContents(path) {
          return this.http.get(path)
                 .map(response => response.json());
     }
}
Im Konstruktor des Services wird das Http-Modul aus dem Angular Core in der Service-Klasse zu Verfügung gestellt. Anhand dieser Zeilen ist es möglich, per this.http immer wieder auf die Funktionen des Moduls zurückzugreifen. Genau das wird in der getContents-Funktion auch getan: Es wird ein Pfad per Parameter Path übergeben, welcher mithilfe der GET-Methode des Http-Moduls gelesen wird. Das Ergebnis wird per response.json in ein JSON umgewandelt. Dieses JSON ist nun der Wert von getContents.

Einbindung des Http-Service in die App

Der Service existiert momentan nur als Datei, er kann noch nicht in anderen Komponenten verwendet werden. Dazu muss der Service in der App definiert werden:

// app.module.ts
import { HttpService } from './services/http.service';

Außerdem muss der Service als Provider unserer App übergeben werden. Dazu erweitern wir @NgModule um folgenden Eintrag:

providers: [
     HttpService
],
...

Nun können wir den Http-Service in der App via Abhängigkeiten nutzen.

Im Component, in dem wir den Http-Service nutzen wollen, muss dieser ebenfalls eingebunden werden. In diesem Fall heißt unser Component Locations. In unserer App unter app/locations/ befindet sich die Datei locations.component.ts. Diese sieht wie folgt aus:

import { Component } from '@angular/core';
import { HttpService } from '../services/http.service';
@Component({
     selector: 'locations',
     template: `<h1>Locations</h1>`
})
export class Locations {
     // Code goes here
}

Zuerst wird immer das Component-Modul aus dem Angular Core eingebunden. Anschließend wird der Service mit einem relativen Pfad und ohne die Angabe des Dateityps (.ts) importiert. Nun können die Methoden des Http-Services im Locations Component genutzt werden:

export class Locations {
     private locationsList;
     constructor( http: HttpService ) {
          this.locationsList= http.getContents('/assets/locations.json');
     }
}

An dieser Stelle wird die Datei /assets/locations.json geladen. Diese ist ein ganz normales JSON mit verschiedenen Einträgen:

{
     "locations": [
          {
             "id": 1,
             "name": "Frankfurt",
             "lat": 50.1066202,
             "long": 8.6693253
          },
          {
             "id": 2,
             "name": "Seville",
             "lat": 37.3361456,
             "long": -5.9697819
          },
          {
             "id": 3,
             "name": "Geneve",
             "lat": 46.191196,
             "long": 6.1569351
          }
    ]
}

Die Werte können nun im Komponenten-Template oder in der Locations-Klasse über locationList.locations angezeigt und weiterverarbeitet werden.

Und wofür braucht man so einen Service jetzt genau? Ganz einfach: Die Nutzung von REST-APIs hat in den letzten Monaten und Jahren immer mehr zugenommen. Wenn die Angular-App ebenfalls mit einer REST-Schnittstelle verknüpft werden soll, so kommt man um einen Http-Service gar nicht herum. Also, viel Spaß damit!

Babette

Babette arbeitet täglich als Frontend-Entwicklerin im Bahnhofsviertel in Frankfurt. Dort begegnet sie nicht nur Systemen wie WordPress und Drupal, auch Angular JS und andere JavaScript-Frameworks umfassen ihr Aufgabengebiet. Ganz nebenbei bietet sie die Umsetzung von Websites an. Zu ihren Hobbies gehört Lesen, Fotografieren und Mainz 05.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.