Oprettelse af en service

Angular tilbyder en praktisk CLI-kommando til hurtigt at generere en service, som opretter 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 (kan slettes).

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

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

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

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 applikations 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 status for fuldførelse af 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 indeholder 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 tilsvarende ID fra, hvilket opdaterer listen.

En anden vigtig metode er toggleTaskStatus(id: number). Den finder opgaven via 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.