Stel je voor dat je een app bouwt. In het begin is het slechts één bestand — zoals main.ts. Maar na verloop van tijd voeg je meer toe: componenten, services, stijlen, logica, gegevensverwerking, authenticatie, enzovoort.

Vroeg of laat wordt het rommelig — het is lastig te achterhalen wat waar wordt gebruikt of hoe alles met elkaar verbonden is.

Op dat moment wordt modulariteit je beste vriend.

Wat is een module in Angular?

Beschouw een module als een doos waarin je alles bewaart dat betrekking heeft op een specifieke functionaliteit. Bijvoorbeeld, alle gebruikersgerelateerde zaken kunnen in een UserModule worden geplaatst.

In Angular is een module simpelweg een klasse gemarkeerd met de @NgModule decorator, zoals hieronder:

Dit doet elk onderdeel:

• declarations – somt de componenten, directives en pipes op die tot deze module behoren;

• imports – importeert andere modules waarvan deze module afhankelijk is (zoals BrowserModule voor DOM-toegang);

• providers – declareert services (voor dependency injection) die in deze module beschikbaar zijn;

• bootstrap – definieert de hoofdcomponent die wordt geladen bij het starten van de applicatie (meestal AppComponent).

Kortom, een module bepaalt welke afhankelijkheden het binnenhaalt, wat het beschikbaar stelt aan andere modules, enzovoort.

Alle componenten die met deze module interageren, kunnen gebruikmaken van de services en andere middelen die het biedt.

Waarom We Op Dit Moment Geen Modules Gebruiken

Vanaf Angular 14 is er een nieuw alternatief — standalone componenten.

Hiermee kun je een component maken en gebruiken zonder deze in een module te plaatsen. We hebben ze eigenlijk al in ons project gebruikt, en ze zien er zo uit:

Dit is een standalone component — wat betekent dat deze niet hoeft te worden opgenomen in een NgModule onder declarations. In plaats daarvan voeg je alles wat nodig is (zoals directives, pipes of andere modules) direct toe via de imports-eigenschap binnen het component zelf.

Dit maakt de structuur van je project lichter en flexibeler — vooral handig voor kleine apps of geïsoleerde feature-blokken.

Hoewel nieuwere Angular-projecten geen modules meer vereisen, kom je ze nog vaak tegen:

• Oudere bedrijfsapplicaties zijn volledig opgebouwd met modules;

• Veel tutorials, documentatie en voorbeelden zijn nog steeds geschreven met NgModule;

• Sommige externe bibliotheken en UI-frameworks gebruiken nog steeds de module-gebaseerde aanpak.