Services und Injectable
Erstellen Sie Injectable Services für gemeinsam genutzte Logik.
Services und Injectable ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Services und Injectable
Ein Service ist eine Klasse, die wiederverwendbare Logik oder Zustände enthält, zum Beispiel zum Abrufen von Daten oder für einen gemeinsam genutzten Store. Angular erstellt und teilt Services mithilfe von Dependency Injection.
Warum Services
Komponenten sollten sich auf die Darstellung konzentrieren. Verschieben Sie Geschäftslogik, API-Aufrufe und gemeinsam genutzte Zustände in Services, damit sie wiederverwendet und unabhängig getestet werden können.
Der Injectable-Decorator
Kennzeichnen Sie eine Service-Klasse mit @Injectable, damit Angular sie erstellen und bei Bedarf injizieren kann.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root' registriert den Service beim Root-Injektor der Anwendung. Angular erstellt eine einzige gemeinsam genutzte Instanz (ein Singleton) für die gesamte App.
Tree-Shakable Provider
Da der Provider mit providedIn in der Klasse deklariert wird, können nicht verwendete Services automatisch per Tree Shaking aus dem Bundle entfernt werden.
Ein Service mit Zustand
Services enthalten häufig Zustände. Mit Signals stellen Sie reaktive Zustände aus dem Service bereit.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}Ein Service mit Methoden
Fügen Sie Methoden hinzu, die Komponenten aufrufen können, um Aktionen auszuführen oder Daten abzurufen.
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}Einen Service generieren
Die CLI erstellt ein Grundgerüst für einen Service und fügt den Injectable-Decorator bereits hinzu.
ng g service dataSingletons teilen Zustände
Da ein Root-Service ein Singleton ist, sehen alle Komponenten, die ihn injizieren, dieselbe Instanz und denselben Zustand. So teilen Komponenten Daten.
Services können Services injizieren
Ein Service kann von anderen Services abhängen. Ein Daten-Service kann beispielsweise den HttpClient-Service verwenden, um Anfragen zu senden.
Services fokussiert halten
Geben Sie jedem Service eine einzige, klar definierte Verantwortung. Kleine, fokussierte Services lassen sich leichter testen und wiederverwenden als große Services, die viele verschiedene Aufgaben übernehmen.
Schnelltest: Injectable
Einen Singleton-Service registrieren.
Zusammenfassung: Services
Sie haben gelernt, dass Services wiederverwendbare Logik und Zustände enthalten, mit @Injectable gekennzeichnet werden und mit providedIn: root als anwendungsweiter Singleton registriert werden. Services teilen Zustände zwischen Komponenten und können von anderen Services abhängen. Als Nächstes folgt die inject-Funktion.
Häufig gestellte Fragen
Ist die Lektion „Services und Injectable“ kostenlos?
Ja — der vollständige Text von „Services und Injectable“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Services und Injectable“?
Erstellen Sie Injectable Services für gemeinsam genutzte Logik. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Services und Injectable“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Services und Injectable
- Die inject-Funktion
- Provider und Gültigkeitsbereiche
- Injection Tokens