Een service aanmaken

Angular biedt een handige CLI-opdracht om snel een service te genereren, waarmee de benodigde bestanden en imports worden aangemaakt:

Na het uitvoeren van deze opdracht maakt Angular twee bestanden aan:

• task.service.ts — het daadwerkelijke servicebestand;

• task.service.spec.ts — een testbestand (dit kun je verwijderen).

Hier is de initiële inhoud van task.service.ts:

De @Injectable decorator geeft aan Angular aan dat deze service kan worden geïnjecteerd in andere klassen.

Het gedeelte providedIn: 'root' betekent dat Angular de service automatisch registreert in de rootmodule en er één enkele instantie van maakt voor de gehele applicatie.

Component A, Component B, of een andere component — allemaal krijgen ze dezelfde instantie van de service. Dit is zeer handig omdat je gedeelde data (zoals een takenlijst) kunt opslaan en het dupliceren van logica voorkomt.

Daarom wordt een service de enige bron van waarheid voor een specifiek deel van de logica of data van je applicatie. Als je nieuwsgierig bent, kun je meer leren over het singleton-patroon in dit artikel.

Logica toevoegen aan de service

Laten we verdergaan met het daadwerkelijk opbouwen van de logica voor je service. Dit is wat je wilt dat de service doet:

• Een lijst met taken opslaan;

• De takenlijst retourneren;

• Taken verwijderen;

• De voltooiingsstatus van taken omzetten.

Laten we eerst definiëren hoe een taak eruitziet door een TypeScript-interface te maken:

Deze interface helpt om de structuur van een taak duidelijk te definiëren — het bevat een id, een titel en een voltooid-status. Je hebt nog niet eerder interfaces gebruikt, maar het toevoegen van een interface maakt de code eenvoudiger te begrijpen en mee te werken.

Laten we nu de service bouwen die je takenlijst beheert:

In dit voorbeeld worden de taakgegevens direct in de code opgeslagen in een privé tasks array.

Om andere delen van de applicatie toegang te geven tot de takenlijst, wordt de methode getTasks() gebruikt. Deze retourneert een kopie van de array met behulp van de spread-syntax ([...]), wat helpt om de originele gegevens te beschermen tegen onbedoelde wijzigingen.

De methode deleteTask(id: number) verwijdert een taak door degene met het overeenkomende ID eruit te filteren en de lijst bij te werken.

Een andere belangrijke methode is toggleTaskStatus(id: number). Deze zoekt de taak op basis van het ID en schakelt de voltooiingsstatus om — als de taak als voltooid (true) was gemarkeerd, wordt deze onvoltooid (false), en omgekeerd.

Deze service vormt nu de basis waarmee je componenten kunnen communiceren met de takenlijst — zonder logica te dupliceren.