Før du genererer en service, skal du oprette en mappe til den. Kør følgende kommando:

Dette opretter en services-mappe inde i src/app og navigerer straks ind i den, så du kan begynde at arbejde med dine services med det samme.

Oprettelse af en service

Angular stiller en praktisk CLI-kommando til rådighed, som hurtigt genererer en service og opsætter de nødvendige filer og imports:

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

• task.service.ts — selve service-filen;

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

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

Dekoratoren @Injectable angiver for Angular, at denne service kan injiceres i andre klasser.

Delen providedIn: 'root' betyder, at Angular automatisk registrerer servicen i root-modulet 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 faktisk at opbygge logikken for din service. Her er, hvad du ønsker, den skal gøre:

• Gemme en liste over opgaver;

• Returnere opgavelisten;

• Slette opgaver;

• Skifte status for fuldførelse af opgaver.

Først skal vi definere, 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 status for fuldførelse. Du har ikke brugt interfaces før, men ved at tilføje et her bliver koden lettere at forstå og arbejde med.

Nu skal vi oprette tjenesten, 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 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 grundlaget, der gør det muligt for dine komponenter at interagere med opgavelisten — uden at duplikere logik.