Skapa en tjänst

Angular tillhandahåller ett smidigt CLI-kommando för att snabbt generera en tjänst, vilket skapar de nödvändiga filerna och importerna:

Efter att ha kört detta kommando skapar Angular två filer:

• task.service.ts — själva tjänstfilen;

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

Här är det initiala innehållet i task.service.ts:

@Injectable-dekoren informerar Angular om att denna tjänst kan injiceras i andra klasser.

Delen providedIn: 'root' innebär att Angular automatiskt registrerar tjänsten i rotmodulen och skapar en enda instans av den för hela applikationen.

Komponent A, Komponent B eller någon annan komponent — alla får samma instans av tjänsten. Detta är mycket praktiskt eftersom du kan lagra delad data (som en uppgiftslista) och undvika att duplicera logik.

Det är därför en tjänst blir den enda sanningskällan för en specifik del av din applikations logik eller data. Om du är nyfiken kan du läsa mer om singleton-mönstret i denna artikel.

Lägga till logik i tjänsten

Låt oss gå vidare till att faktiskt bygga logiken för din tjänst. Här är vad du vill att den ska göra:

• Lagra en lista med uppgifter;

• Returnera uppgiftslistan;

• Ta bort uppgifter;

• Växla slutförandestatus för uppgifter.

Först definierar vi hur en uppgift ser ut genom att skapa ett TypeScript-interface:

Detta interface hjälper till att tydligt definiera strukturen för en uppgift — det inkluderar ett id, en titel och en slutförd-status. Du har inte använt interface tidigare, men att lägga till ett här gör koden enklare att förstå och arbeta med.

Nu bygger vi tjänsten som hanterar din uppgiftslista:

I det här exemplet lagras uppgiftsdata direkt i koden i en privat tasks-array.

För att andra delar av applikationen ska kunna komma åt uppgiftslistan används metoden getTasks(). Den returnerar en kopia av arrayen med hjälp av spread-syntaxen ([...]), vilket skyddar originaldatan från oavsiktliga ändringar.

Metoden deleteTask(id: number) tar bort en uppgift genom att filtrera bort den med matchande ID och uppdaterar listan.

En annan viktig metod är toggleTaskStatus(id: number). Den hittar uppgiften via dess ID och växlar dess slutförandestatus — om uppgiften var markerad som slutförd (true) blir den ofullständig (false), och vice versa.

Denna tjänst är nu grunden som gör det möjligt för dina komponenter att interagera med uppgiftslistan — utan att duplicera logik.