Vi kommer att lära oss vad en Angular-tjänst är och sedan skapa ett exempel med den senaste versionen av Angular 9.

En Angular-tjänst är en singleton som kan kopplas ihop med komponenter eller andra tjänster via Dependency Injection.

> ✋✋ Gå med i vår Facebookgrupp 👈 för att diskutera allt som rör Angular-utveckling.

Enligt Wikipedia:

In software engineering, dependency injection is a technique whereby one object supplies the dependencies of another object.

Låt dig inte skrämmas av den här termen, det betyder helt enkelt att Angular (eller en del av Angular, injektorn) tar hand om att instansiera tjänsterna och tillhandahåller instansen till den begärande komponenten.

> ✋✋ Kolla också in Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈

Enligt Angular-dokumentationen:

DI är inbyggd i Angular-ramverket och används överallt för att förse nya komponenter med de tjänster eller andra saker de behöver. Komponenter konsumerar tjänster, det vill säga du kan injicera en tjänst i en komponent och ge komponenten tillgång till den tjänsteklassen.

Du kan använda tjänster för att organisera och dela kod i din app

Hur definierar du en Angular-tjänst?

För att definiera en klass som en tjänst i Angular använder du dekoratorn @Injectable() för att tillhandahålla metadata som gör det möjligt för Angular att injicera den i en komponent som ett beroende.

Du måste tillhandahålla en tjänst innan den kan bli tillgänglig. Detta kan göras på tre sätt:

• Via tjänstens metadata som skickas till dekoratorn @Injectable() (Tjänsten kommer att vara tillgänglig överallt),
• Via matrisen för leverantörer, i en specifik modul (Tjänsten är endast tillgänglig för modulens komponenter och tjänster),
• Via matrisen för leverantörer i en specifik komponent (Tjänsten är endast tillgänglig för komponenten).

Angular 9 Service by Example

Nu ska vi skapa en tjänst med hjälp av ett exempel.

Säkerställ att du har ett Angular-projekt skapat och Angular CLI v9 installerat.

Gå till ditt kommandoradsgränssnitt och navigera till projektmappen:

$ cd your-angular-project

Generera sedan en ny tjänst genom att köra följande kommando:

$ ng generate service my-example

Öppna src/app/my-example.service.ts-filen:

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

Tack vare egenskapen providedIn behöver du inte göra något annat för att börja använda den här tjänsten förutom att implementera den funktionalitet som behöver tillhandahållas. root-värdet hänvisar till appens rotmodul.

Du kan också injicera andra tjänster i din nya tjänst – till exempel den inbyggda tjänsten HttpClient – via dess konstruktör:

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

När du har implementerat dina tjänstens metoder kan du importera och injicera den i andra komponenter och anropa de offentliga metoderna för din tjänst i din komponent.

Enligt Angular-dokumentationen:

Typiskt sett är en komponents uppgift att möjliggöra användarupplevelsen och inget annat. En komponent bör presentera egenskaper och metoder för databindning för att förmedla mellan vyn (som återges av mallen) och programlogiken.

En komponent kan delegera vissa uppgifter till tjänster, t.ex. hämta data från servern, validera användarinmatning eller logga direkt till konsolen.

Om att definiera sådana bearbetningsuppgifter i en injicerbar tjänsteklass gör du dessa uppgifter tillgängliga för vilken komponent som helst.