Erstellung und Nutzung eines Angular-2-Services

Babette Landmesser

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. 

angular.jpg

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 Services 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. 

Fazit

Ein Http-Service ist in vielen Projekten sehr nützlich, da heute immer öfter REST APIs Anwendung finden und die Daten, die im Frontend angezeigt werden, häufig als JSON geliefert werden. Innerhalb eines Projekts wird vermutlich häufig eine HTTP-Anfrage ausgeführt. Daher ist es hilfreich, wiederverwendbaren Code an einer Stelle zu sammeln und modular zu gestalten. Mit Services fällt das in einer Angular-2-App sehr leicht. Lediglich die Einbindung in jeden Komponenten muss beachtet werden.

Our expert

Babette Landmesser

Any questions or input? Reach out to our experts!

Send e-mail

Babette Landmesser ist seit April 2015 als Frontend-Entwicklerin bei Cocomore. Zuvor war sie freiberufliche Frontend- und Wordpress-Entwicklerin. Durch ihre Arbeit unteren anderem mit WordPress, Drupal und JavaScript schätzt Babette vor allem die Vielseitigkeit bei Cocomore.
Babettes Motto: „A day without laughter is a day wasted."

Related Content