Voordat u een service genereert, moet u er een map voor aanmaken. Voer het volgende commando uit:

Hiermee wordt een services-map aangemaakt binnen src/app en direct naar deze map genavigeerd, zodat u meteen kunt beginnen met het werken aan uw services.

Een service aanmaken

Angular biedt een handig CLI-commando om snel een service te genereren, waarmee de benodigde bestanden en imports worden ingesteld:

Na het uitvoeren van dit commando maakt Angular twee bestanden aan:

• task.service.ts — het daadwerkelijke servicebestand;

• task.service.spec.ts — een testbestand (dit mag verwijderd worden).

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

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

Het gedeelte providedIn: 'root' betekent dat Angular de service automatisch registreert in de rootmodule en er één enkele instantie van aanmaakt 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 gegevens (zoals een takenlijst) kunt opslaan en dubbele logica voorkomt.

Daarom wordt een service de enige bron van waarheid voor een specifiek deel van de logica of data van je app. 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 het doet:

• Een lijst met taken opslaan;

• De takenlijst retourneren;

• Taken verwijderen;

• De voltooiingsstatus van taken wisselen.

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 te onderhouden.

Nu gaan we de service opzetten die de 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.