Vi lærer hvad en Angular service er, og derefter laver vi et eksempel med den nyeste Angular 9 version.

En Angular-tjeneste er en singleton, der kan kobles sammen med komponenter eller andre tjenester via Dependency Injection.

> ✋✋ Tilmeld dig vores Facebook-gruppe 👈 for at diskutere alt, hvad der har med Angular-udvikling at gøre.

I henhold til Wikipedia:

I software engineering er dependency injection en teknik, hvor et objekt leverer afhængigheder til et andet objekt.

Du skal ikke lade dig skræmme af dette udtryk, det betyder blot, at Angular (eller en del af Angular, injektoren) tager sig af instantieringen af tjenesterne og leverer instansen til den anmodende komponent.

> ✋✋ Tjek også Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈

Ifølge Angular-dokumentationen:

DI er kablet ind i Angular-rammen og bruges overalt til at forsyne nye komponenter med de tjenester eller andre ting, de har brug for. Komponenter forbruger tjenester; det vil sige, at du kan injicere en tjeneste i en komponent, hvilket giver komponenten adgang til den pågældende tjenesteklasse.

Du kan bruge tjenester til at organisere og dele kode på tværs af din app

Hvordan definerer du en Angular-tjeneste?

For at definere en klasse som en tjeneste i Angular skal du bruge @Injectable() decorator til at levere de metadata, der gør det muligt for Angular at injicere den i en komponent som en afhængighed.

Du skal levere en tjeneste, før den kan være tilgængelig. Dette kan gøres på tre måder:

• Via tjenestens metadata, der er overgivet til @Injectable() decorator (Tjenesten vil være tilgængelig overalt),
• Via arrayet af udbydere, i et bestemt modul (Tjenesten er kun tilgængelig for modulets komponenter og tjenester),
• Via arrayet af udbydere i en bestemt komponent (Tjenesten er kun tilgængelig for komponenten).

Angular 9 Service by Example

Lad os nu oprette en service ved hjælp af et eksempel.

Sørg for, at du har oprettet et Angular-projekt og installeret Angular CLI v9.

Gå til din kommandolinjeinterface, og naviger til projektets mappe:

$ cd your-angular-project

Dernæst skal du generere en ny tjeneste ved at køre følgende kommando:

$ ng generate service my-example

Åbn src/app/my-example.service.ts-filen:

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

Takket være providedIn-egenskaben behøver du ikke at gøre andet for at begynde at bruge denne tjeneste, bortset fra at implementere den funktionalitet, der skal tilvejebringes. root-værdien henviser til rodmodulet i appen.

Du kan også injicere andre tjenester i din nye tjeneste – f.eks. den indbyggede HttpClient-tjeneste – via dens konstruktør:

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

Når du har implementeret dine tjenestemetoder, kan du importere og injicere den i andre komponenter og kalde de offentlige metoder for din tjeneste i din komponent.

I henhold til Angular-dokumentationen:

Typisk set er det en komponents opgave at muliggøre brugeroplevelsen og ikke andet. En komponent bør præsentere egenskaber og metoder til databinding for at formidle mellem visningen (gengivet af skabelonen) og applikationslogikken.

En komponent kan uddelegere visse opgaver til tjenester, f.eks. hente data fra serveren, validere brugerinput eller logge direkte til konsollen.

Gennem at definere sådanne behandlingsopgaver i en injicerbar tjenesteklasse gør du disse opgaver tilgængelige for enhver komponent.