Opprette en tjeneste

Angular tilbyr en praktisk CLI-kommando for raskt å generere en tjeneste, som oppretter nødvendige filer og importerer det som trengs:

Etter å ha kjørt denne kommandoen, oppretter Angular to filer:

• task.service.ts — selve tjenestefilen;

• task.service.spec.ts — en testfil (kan slettes).

Her er startinnholdet i task.service.ts:

Dekoratoren @Injectable informerer Angular om at denne tjenesten kan injiseres i andre klasser.

Delen providedIn: 'root' betyr at Angular automatisk registrerer tjenesten i rotmodulen og oppretter én enkelt instans av den for hele applikasjonen.

Komponent A, komponent B eller hvilken som helst annen komponent — alle vil få samme instans av tjenesten. Dette er svært praktisk fordi du kan lagre delte data (som en oppgaveliste) og unngå å duplisere logikk.

Derfor blir en tjeneste den eneste sannhetskilden for en bestemt del av logikken eller dataene i appen din. Hvis du er nysgjerrig, kan du lære mer om singleton-mønsteret i denne artikkelen.

Legge til logikk i tjenesten

La oss gå videre til å bygge logikken for tjenesten din. Dette er hva du ønsker at den skal gjøre:

• Lagre en liste over oppgaver;

• Returnere oppgavelisten;

• Slette oppgaver;

• Veksle fullføringsstatus for oppgaver.

Først definerer vi hvordan en oppgave ser ut ved å opprette et TypeScript-grensesnitt:

Dette grensesnittet hjelper til med å tydelig definere strukturen til en oppgave — det inkluderer en id, en tittel og en fullført-status. Du har ikke brukt grensesnitt tidligere, men å legge til et her gjør koden enklere å forstå og arbeide med.

Nå skal vi bygge tjenesten som håndterer oppgavelisten din:

I dette eksemplet lagres oppgavedataene direkte i koden i et privat tasks-array.

For å gjøre oppgavelisten tilgjengelig for andre deler av applikasjonen, brukes metoden getTasks(). Den returnerer en kopi av arrayet ved hjelp av spread-syntaksen ([...]), noe som bidrar til å beskytte de opprinnelige dataene mot utilsiktede endringer.

Metoden deleteTask(id: number) fjerner en oppgave ved å filtrere ut den som har samsvarende ID, og oppdaterer listen.

En annen viktig metode er toggleTaskStatus(id: number). Den finner oppgaven basert på ID og bytter status for om oppgaven er fullført — hvis oppgaven var markert som fullført (true), blir den ufullført (false), og omvendt.

Denne tjenesten er nå grunnlaget som gjør at komponentene dine kan samhandle med oppgavelisten — uten å duplisere logikk.