Erstellung Eines Benutzerdefinierten Dienstes in Angular
Bevor Sie einen Service generieren, müssen Sie einen Ordner dafür erstellen. Führen Sie den folgenden Befehl aus:
Dadurch wird ein services-Ordner innerhalb von src/app erstellt und Sie werden direkt in diesen Ordner navigiert, sodass Sie sofort mit der Arbeit an Ihren Services beginnen können.
Erstellen eines Service
Angular stellt einen praktischen CLI-Befehl zur Verfügung, um schnell einen Service zu generieren. Dieser richtet die notwendigen Dateien und Importe ein:
Nach Ausführung dieses Befehls erstellt Angular zwei Dateien:
-
task.service.ts— die eigentliche Servicedatei; -
task.service.spec.ts— eine Testdatei (kann gelöscht werden).
Hier ist der anfängliche Inhalt von task.service.ts:
task-service.ts
Der @Injectable-Dekorator weist Angular an, 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.
Singleton ist ein Entwurfsmuster, das sicherstellt, dass eine Klasse nur eine Instanz besitzt und einen globalen Zugriffspunkt darauf bereitstellt.
Komponente A, Komponente B oder jede andere Komponente – alle erhalten dieselbe Instanz des Service. Dies 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 erfahren.
Logik zum Service hinzufügen
Im Folgenden wird die eigentliche Logik für den Service erstellt. Die gewünschten Funktionen sind:
-
Speichern einer Aufgabenliste;
-
Rückgabe der Aufgabenliste;
-
Löschen von Aufgaben;
-
Umschalten des Erledigt-Status von Aufgaben.
Zunächst wird definiert, wie eine Aufgabe aussieht, indem ein TypeScript-Interface erstellt wird:
task-interface.ts
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 handhabbar.
Nun erstellen wir den Service, der Ihre Aufgabenliste verwaltet:
task-service.ts
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 mithilfe 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.
Ein Großteil dieser Logik dürfte Ihnen aus Ihrer TaskListComponent bekannt vorkommen. Nun wurde sie vollständig in den TaskService verschoben, was Ihre Komponenten übersichtlicher macht und die Logik zentralisiert.
Dieser Service bildet nun die Grundlage, damit Ihre Komponenten mit der Aufgabenliste interagieren können — ohne dass Logik dupliziert werden muss.
1. Warum erstellt man einen Service in Angular?
2. Was bedeutet providedIn: 'root' im @Injectable-Dekorator?
3. Warum gibt man in [...this.tasks] this.tasks zurück und nicht einfach getTasks()?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
What does the initial content of the generated service file look like?
Can you explain how to use the service in a component?
Why should I return a copy of the task list instead of the original array?
Awesome!
Completion rate improved to 3.13Erstellung Eines Benutzerdefinierten Dienstes in Angular
Swipe um das Menü anzuzeigen
Bevor Sie einen Service generieren, müssen Sie einen Ordner dafür erstellen. Führen Sie den folgenden Befehl aus:
Dadurch wird ein services-Ordner innerhalb von src/app erstellt und Sie werden direkt in diesen Ordner navigiert, sodass Sie sofort mit der Arbeit an Ihren Services beginnen können.
Erstellen eines Service
Angular stellt einen praktischen CLI-Befehl zur Verfügung, um schnell einen Service zu generieren. Dieser richtet die notwendigen Dateien und Importe ein:
Nach Ausführung dieses Befehls erstellt Angular zwei Dateien:
-
task.service.ts— die eigentliche Servicedatei; -
task.service.spec.ts— eine Testdatei (kann gelöscht werden).
Hier ist der anfängliche Inhalt von task.service.ts:
task-service.ts
Der @Injectable-Dekorator weist Angular an, 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.
Singleton ist ein Entwurfsmuster, das sicherstellt, dass eine Klasse nur eine Instanz besitzt und einen globalen Zugriffspunkt darauf bereitstellt.
Komponente A, Komponente B oder jede andere Komponente – alle erhalten dieselbe Instanz des Service. Dies 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 erfahren.
Logik zum Service hinzufügen
Im Folgenden wird die eigentliche Logik für den Service erstellt. Die gewünschten Funktionen sind:
-
Speichern einer Aufgabenliste;
-
Rückgabe der Aufgabenliste;
-
Löschen von Aufgaben;
-
Umschalten des Erledigt-Status von Aufgaben.
Zunächst wird definiert, wie eine Aufgabe aussieht, indem ein TypeScript-Interface erstellt wird:
task-interface.ts
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 handhabbar.
Nun erstellen wir den Service, der Ihre Aufgabenliste verwaltet:
task-service.ts
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 mithilfe 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.
Ein Großteil dieser Logik dürfte Ihnen aus Ihrer TaskListComponent bekannt vorkommen. Nun wurde sie vollständig in den TaskService verschoben, was Ihre Komponenten übersichtlicher macht und die Logik zentralisiert.
Dieser Service bildet nun die Grundlage, damit Ihre Komponenten mit der Aufgabenliste interagieren können — ohne dass Logik dupliziert werden muss.
1. Warum erstellt man einen Service in Angular?
2. Was bedeutet providedIn: 'root' im @Injectable-Dekorator?
3. Warum gibt man in [...this.tasks] this.tasks zurück und nicht einfach getTasks()?
Danke für Ihr Feedback!
