Erstellen eines Service

Angular stellt einen praktischen CLI-Befehl zur Verfügung, um schnell einen Service zu generieren, der die notwendigen Dateien und Importe einrichtet:

Nach Ausführung dieses Befehls erstellt Angular zwei Dateien:

• task.service.ts — die eigentliche Service-Datei;

• task.service.spec.ts — eine Testdatei (diese kann gelöscht werden).

Hier ist der anfängliche Inhalt von task.service.ts:

Der @Injectable-Dekorator teilt Angular mit, dass dieser Service in andere Klassen injiziert werden kann.

Der Teil providedIn: 'root' bedeutet, dass Angular den Service automatisch im Root-Modul registriert und eine einzige Instanz davon für die gesamte Anwendung erstellt.

Komponente A, Komponente B oder jede andere Komponente – alle erhalten dieselbe Instanz des Service. Das ist äußerst praktisch, da gemeinsam genutzte Daten (wie eine Aufgabenliste) gespeichert und doppelte Logik vermieden werden kann.

Deshalb wird ein Service zur einzigen Quelle der Wahrheit für einen bestimmten Teil der Logik oder Daten Ihrer Anwendung. Wenn Sie neugierig sind, können Sie mehr über das Singleton-Muster in diesem Artikel nachlesen.

Hinzufügen von Logik zum Service

Kommen wir nun dazu, die eigentliche Logik für Ihren Service zu erstellen. Folgendes soll Ihr Service leisten:

• Speichern einer Liste von Aufgaben;

• Rückgabe der Aufgabenliste;

• Löschen von Aufgaben;

• Umschalten des Erledigt-Status von Aufgaben.

Zuerst definieren wir, wie eine Aufgabe aussieht, indem wir ein TypeScript-Interface erstellen:

Dieses Interface definiert klar die Struktur einer Aufgabe — es enthält eine id, einen Titel und einen Status für die Erledigung. Sie haben bisher noch keine Interfaces verwendet, aber das Hinzufügen eines solchen macht den Code verständlicher und leichter wartbar.

Nun erstellen wir den Service, der Ihre Aufgabenliste verwaltet:

In diesem Beispiel werden die Aufgabendaten direkt im Code in einem privaten tasks-Array gespeichert.

Um anderen Teilen der Anwendung den Zugriff auf die Aufgabenliste zu ermöglichen, wird die Methode getTasks() verwendet. Sie gibt eine Kopie des Arrays mit der Spread-Syntax ([...]) zurück, was dazu beiträgt, die Originaldaten vor unbeabsichtigten Änderungen zu schützen.

Die Methode deleteTask(id: number) entfernt eine Aufgabe, indem sie diejenige mit der passenden ID herausfiltert und die Liste aktualisiert.

Eine weitere wichtige Methode ist toggleTaskStatus(id: number). Sie findet die Aufgabe anhand ihrer ID und wechselt deren Abschlussstatus — war die Aufgabe als abgeschlossen (true) markiert, wird sie auf nicht abgeschlossen (false) gesetzt und umgekehrt.

Dieser Service bildet nun die Grundlage, die es Ihren Komponenten ermöglicht, mit der Aufgabenliste zu interagieren – ohne Logik zu duplizieren.