Service – Wiederverwendbarkeit über Komponenten hinaus (Folge 8)

Ein Service in Angular ist eine TypeScript Klasse mit einer bestimmten Aufgabe. Der Gegenstand eines Service kann die Bereitstellung von Daten, die Kommunikation zwischen Komponenten und anderen Objekten sowie die Wiederverwendbarkeit von Funktionen sein.

Wann nutze ich einen Angular Service?

Die Daten oder Logik einer Komponente bzw. Direktive sind nicht auf sich selbst und dessen Kind beschränkt. Die Daten oder Logik werden über mehrere Komponenten oder Direktive genutzt. Außerdem kann es eine Architekturvorgabe sein, dass keine Daten und Logik in Komponenten und Direktiven vorhanden sein soll. Ich selbst bin kein Freund der „Alles oder Nichts“-Philosophie. Jede Hilfsvariable oder interner UI-State sollte auch in den Komponenten bleiben können und nicht einen Service ausgelagert werden. Architekturentscheidungen sollten immer in Abhängigkeit vom Projekt und von der Größe der Komponente/Direktive getroffen werden.

Ein Service unter technischen Aspekten

Eine TypeScript Klasse ist ein Angular Service. Das war’s. Okay, nicht ganz. Es sollte der optionale Dekorator @Injectable verwendet werden. Dieser erlaubt es, dass Abhängigkeiten zwischen den neuen Service zu anderen mit Hilfe von Dependency Injektion aufgelöst werden können. Dazu später mehr.

Einen Service können wir auch mit Hilfe der Angular CLI erstellen. Dazu verwenden wir den Befehl ng generate service Hello für die Kommandozeile und erstellen den HelloService. Ein typischer Einstiegsfalle ist, dass für die Erstellung eines HelloService ng generate service HelloService eingegeben wird. Dabei erhalten wir den HelloServiceService. Das schöne ist, du merkst diesen Fehler schnell und er lässt sich leicht korrigieren.

Bereitstellung des Service

Um einen Service in einer Komponente zu verwenden, gebe diesen im Constructor der Komponente an. Dabei muss davor festlegen, wie du diesen Bereitstellen willst. Du hast folgende Optionen:

• in einem Module

• in einer Komponente

Für die Bereitstellung in einem Modul, kannst du den Service im Provider Array des Moduls aufnehmen oder im Service @Injectable({providedIn: ‚root‘}) verwenden. Da durch hast du selbe Instanz des Service im gesamten Modul. Eine Ausnahme dieser Regel gibt es, die besprechen wir gleich.

Bereitstellung im Modul über Injectable

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HelloService {

  constructor() { }

}

Bereitstellung im Modul über Providers Array

import { Injectable } from '@angular/core';

@Injectable()
export class HelloService {

  constructor() { }

}

Zusätzlich im Modul:

import { NgModule } from '@angular/core';

import { HelloService } from './hello.service';

@NgModule({
providers: [HelloService],
})
export class AppModule {
}

Für Bereitstellung in einer Komponente, kannst du den Service im Procter Array der Komponente aufnehmen. Alternativ ist auch im Service @Injectable({providedIn: BeispielKomponente}) verwenden. Dies führt zu einer zirkulären Abhängigkeit. Deshalb ist dieses Vorgehen nicht empfehlenswert. Du bekommst bei der Bereitstellung in einer Komponente eine Service Instanz für die Komponente und deren Kinder.

Eine Mischung der beiden Möglichkeiten – Bereitstellung im Modul und in einer Komponente lassen sich kombinieren. Dabei sind mehr Service Instanz innerhalb eines Moduls vorhaben. Dies zu Verwirrung bei Entwicklern verursachen.

Wenn dir diese Folge gefallen hat, freue ich mich auf eine Bewertung auf iTunes. Hast du ein Thema, was dich brennend interessiert, dann schreibe es mir. Du erreichst mich auf XING und Facebook. Leite den Artikel an Entwickler weiter, der diesen Artikel lesen sollte. Ich freue mich auf die nächste Folge.