Oprettelse af en service

Angular tilbyder en praktisk CLI-kommando til hurtigt at generere en service, som opsætter de nødvendige filer og imports:

Efter at have kørt denne kommando, opretter Angular to filer:

• task.service.ts — selve servicefilen;

• task.service.spec.ts — en testfil (du kan slette den).

Her er det indledende indhold af task.service.ts:

@Injectable-dekorationen fortæller Angular, at denne service kan injiceres i andre klasser.

providedIn: 'root' betyder, at Angular automatisk registrerer servicen i rodmodulet og opretter en enkelt instans af den til hele appen.

Komponent A, komponent B eller enhver anden komponent — alle får den samme instans af servicen. Dette er meget praktisk, fordi du kan gemme delte data (som en opgaveliste) og undgå at duplikere logik.

Derfor bliver en service den eneste sandhedskilde for en bestemt del af din apps logik eller data. Hvis du er nysgerrig, kan du lære mere om singleton-mønsteret i denne artikel.

Tilføjelse af logik til servicen

Lad os gå videre til at opbygge logikken for din service. Her er, hvad du ønsker, at den skal gøre:

• Gemme en liste over opgaver;

• Returnere opgavelisten;

• Slette opgaver;

• Skifte fuldførelsesstatus for opgaver.

Først definerer vi, hvordan en opgave ser ud, ved at oprette et TypeScript-interface:

Dette interface hjælper med tydeligt at definere strukturen af en opgave — det inkluderer et id, en titel og en fuldført-status. Du har ikke brugt interfaces før, men at tilføje et her gør koden lettere at forstå og arbejde med.

Nu bygger vi servicen, der håndterer din opgaveliste:

I dette eksempel gemmes opgavedataene direkte i koden i et privat tasks array.

For at give andre dele af applikationen adgang til opgavelisten, bruges metoden getTasks(). Den returnerer en kopi af arrayet ved hjælp af spread-syntaksen ([...]), hvilket beskytter de oprindelige data mod utilsigtede ændringer.

Metoden deleteTask(id: number) fjerner en opgave ved at filtrere den med det matchende ID fra, så listen opdateres.

En anden vigtig metode er toggleTaskStatus(id: number). Den finder opgaven ud fra dens ID og skifter dens fuldførelsesstatus — hvis opgaven var markeret som fuldført (true), bliver den ufuldført (false), og omvendt.

Denne service udgør nu fundamentet, der gør det muligt for dine komponenter at interagere med opgavelisten — uden at duplikere logik.