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 forteller Angular 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å duplisering av logikk.

Derfor blir en tjeneste den eneste sannhetskilden for en bestemt del av appens logikk eller data. 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 skal tjenesten gjøre:

• Lagrer en liste med oppgaver;

• Returnerer oppgavelisten;

• Sletter oppgaver;

• Veksler mellom fullført-status 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 ved hjelp av ID og bytter status for om oppgaven er fullført — hvis oppgaven var merket 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.