Op dit moment is onze taaktracker een eenvoudige Single Page Application (SPA). Deze wordt altijd geladen vanaf hetzelfde adres in de browser (localhost:4200) en toont steeds dezelfde inhoud, ongeacht wat er gebeurt.

Maar we willen een stap verder gaan — door gebruikers toe te staan naar verschillende secties van de app te navigeren via URL's zoals /task/1, /settings of /analytics. Bij het navigeren tussen deze URL's mag de pagina niet opnieuw laden — alleen de inhoud moet dynamisch bijwerken binnen hetzelfde browservenster.

Deze benadering definieert een SPA (Single Page Application) — de volledige applicatie wordt één keer geladen en alle verdere navigatie vindt plaats door inhoud direct te wisselen.

Het is snel en gebruiksvriendelijk, maar vereist een speciaal systeem dat begrijpt hoe verschillende URL's afgehandeld moeten worden. Dat is waar routing om de hoek komt kijken.

Wat is Routing?

In onze taaktracker kunnen we verschillende secties hebben, zoals een takenlijst en een pagina met taakdetails. Bijvoorbeeld:

• Wanneer de gebruiker navigeert naar /tasks, willen we een component tonen met een lijst van taken;

• Wanneer ze naar /tasks/42 gaan, willen we de details tonen van de taak met ID 42.

Angular leest de huidige URL en bepaalt welke component moet worden weergegeven — allemaal zonder de pagina te herladen. Op de achtergrond blijft het hetzelfde HTML-bestand, maar de inhoud wordt dynamisch vervangen. Voor de gebruiker voelt het alsof ze op een traditionele website navigeren, maar alles wordt afgehandeld binnen de SPA.

Kort gezegd laat routing ons aan de applicatie vertellen:

"Als de gebruiker naar /tasks gaat, toon de TaskListComponent. Als ze naar /tasks/42 gaan, toon de TaskDetailsComponent."

Hoe routing werkt in Angular

Angular biedt een ingebouwd hulpmiddel genaamd RouterModule dat het eenvoudig maakt om navigatie tussen weergaven te beheren.

Voor onze takenplanner biedt routing veel mogelijkheden:

• Routes definiëren — bijvoorbeeld, koppel het pad /tasks aan een component die alle taken toont;

• Navigeren zonder te herladen — ga naar /tasks/15 en zie direct de details van taak 15;

• Verschillende componenten tonen op basis van de URL — zoals een takenlijst, een formulier voor een nieuwe taak, of instellingen;

• Routeparameters gebruiken — zoals taak-ID's of filters (/tasks?status=done);

• Geneste routes maken — bijvoorbeeld gebruikersinstellingen binnen een profielsectie (/profile/settings);

• Routes beveiligen — zoals vereisen dat gebruikers ingelogd zijn om toegang te krijgen tot /settings.

In de praktijk definieer je gewoon een set regels: welk pad laadt welk component. Angular regelt de rest automatisch, inclusief navigatie en weergave.

Voor de gebruiker werkt het net als een gewone website — ze kunnen op links klikken, de terug- en vooruitknoppen van de browser gebruiken, en zelfs directe links naar specifieke weergaven in de app delen.