Wir werden lernen, was ein Angular Service ist und dann werden wir ein Beispiel mit der neuesten Angular 9 Version erstellen.

Ein Angular-Service ist ein Singleton, das über Dependency Injection mit Komponenten oder anderen Services verdrahtet werden kann.

> ✋✋ Tritt unserer Facebook-Gruppe 👈 bei, um alles zu diskutieren, was mit Angular-Entwicklung zu tun hat.

Laut Wikipedia:

In der Softwareentwicklung ist Dependency Injection eine Technik, bei der ein Objekt die Abhängigkeiten eines anderen Objekts bereitstellt.

Lassen Sie sich von diesem Begriff nicht einschüchtern, es bedeutet einfach, dass Angular (oder ein Teil von Angular, der Injector) sich um die Instanzierung der Dienste kümmert und die Instanz der anfordernden Komponente bereitstellt.

> ✋✋ Siehe auch Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈

Nach den Angular Docs:

DI ist in das Angular-Framework verdrahtet und wird überall verwendet, um neue Komponenten mit den Diensten oder anderen Dingen zu versorgen, die sie benötigen. Komponenten konsumieren Dienste; das heißt, man kann einen Dienst in eine Komponente injizieren, wodurch die Komponente Zugriff auf diese Dienstklasse erhält.

Sie können Dienste verwenden, um Code in Ihrer App zu organisieren und zu teilen

Wie definiert man einen Angular-Dienst?

Um eine Klasse als Dienst in Angular zu definieren, verwenden Sie den @Injectable()-Dekorator, um die Metadaten bereitzustellen, die es Angular ermöglichen, sie in eine Komponente als Abhängigkeit zu injizieren.

Sie müssen einen Dienst bereitstellen, bevor er verfügbar ist. Dies kann auf drei Arten geschehen:

• Über die Metadaten des Dienstes, die an den @Injectable()-Dekorator übergeben werden (Der Dienst wird überall verfügbar sein),
• Über das Array der Anbieter in einem bestimmten Modul (Der Dienst ist nur für die Komponenten und Dienste des Moduls verfügbar),
• Über das Array der Anbieter in einer bestimmten Komponente (Der Dienst ist nur für die Komponente verfügbar).

Angular 9 Service by Example

Lassen Sie uns nun einen Service by Example erstellen.

Stellen Sie sicher, dass Sie ein Angular-Projekt erstellt und Angular CLI v9 installiert haben.

Gehen Sie zu Ihrer Befehlszeilenschnittstelle und navigieren Sie zu Ihrem Projektordner:

$ cd your-angular-project

Nächstens erzeugen Sie einen neuen Dienst, indem Sie den folgenden Befehl ausführen:

$ ng generate service my-example

Öffnen Sie die Datei src/app/my-example.service.ts:

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

Dank der providedIn-Eigenschaft müssen Sie nichts weiter tun, um diesen Dienst zu verwenden, außer die Funktionalität zu implementieren, die zur Verfügung gestellt werden muss. der root-Wert bezieht sich auf das Root-App-Modul.

Sie können auch andere Dienste in Ihren neuen Dienst injizieren – zum Beispiel den eingebauten HttpClient-Dienst – über seinen Konstruktor:

import { HttpClient } from '@angular/common/http';@Injectable({
providedIn: 'root'
})
export class MyExampleService { constructor(private httpClient: HttpClient) { }
}

Nach der Implementierung Ihrer Dienstmethoden können Sie ihn in andere Komponenten importieren und injizieren und die öffentlichen Methoden Ihres Dienstes in Ihrer Komponente aufrufen.

Nach den Angular-Dokumenten:

Typischerweise besteht die Aufgabe einer Komponente darin, die Benutzererfahrung zu ermöglichen und nichts weiter. Eine Komponente sollte Eigenschaften und Methoden für die Datenbindung bereitstellen, um zwischen der (vom Template gerenderten) Ansicht und der Anwendungslogik zu vermitteln.

Eine Komponente kann bestimmte Aufgaben an Dienste delegieren, z. B. das Abrufen von Daten vom Server, die Validierung von Benutzereingaben oder die direkte Protokollierung auf der Konsole.

Indem man solche Verarbeitungsaufgaben in einer injizierbaren Dienstklasse definiert, macht man diese Aufgaben für jede Komponente verfügbar.