Om veilig te experimenteren met modules, dient een kopie van het bestaande project te worden gemaakt. Deze wijzigingen zijn uitsluitend bedoeld voor oefening en hebben geen invloed op het originele project. In latere hoofdstukken wordt de focus weer gelegd op het bouwen van applicaties met behulp van standalone componenten.

Een module aanmaken voor de TaskComponent

Deze stap omvat het aanmaken van een module voor de TaskComponent. De module zal de component, een gerelateerde directive en een pipe declareren.

Voor het genereren van een module in Angular is er een speciale CLI-opdracht:

Nu het bestand task.module.ts is aangemaakt in de map task, kunnen we het implementeren

Deze module declareert de TaskComponent, de bijbehorende directive en een aangepaste pipe. Het importeert CommonModule om structurele directives zoals *ngIf en *ngFor mogelijk te maken. De TaskComponent wordt geëxporteerd zodat deze in andere modules hergebruikt kan worden.

Een module maken voor de TaskListComponent

In deze stap wordt een module aangemaakt voor de TaskListComponent. Maak een nieuwe module aan in de map task-list:

Nu het bestand task-list.module.ts is aangemaakt in de map task-list, kunnen we het implementeren

Deze module declareert TaskListComponent, verantwoordelijk voor het weergeven van een lijst met taken. Het importeert TaskModule om toegang te krijgen tot de taakcomponent en FormsModule voor functionaliteiten zoals taakaanmaakformulieren. De component wordt geëxporteerd zodat deze in andere modules gebruikt kan worden.

Het rootmodule aanmaken

In deze stap definiëren we de hoofdmodule die fungeert als het startpunt van de gehele applicatie.

Elke Angular-applicatie heeft een rootmodule nodig die Angular vertelt hoe de app gestart moet worden. Deze module brengt alle benodigde onderdelen samen: ingebouwde Angular-functionaliteiten, onze eigen modules en de rootcomponent.

Maak een nieuwe module aan in de map app:

De --flat vlag geeft aan de Angular CLI de instructie om het modulebestand te maken zonder een aparte map te genereren.

Deze module fungeert als het toegangspunt van de app. Het importeert BrowserModule, wat noodzakelijk is om Angular in de browser uit te voeren, en het TaskListModule, dat de hoofdfunctionaliteit voor het beheren van taken bevat. De AppComponent wordt ingesteld als de rootcomponent om de applicatie te starten.

Het configureren van het entrypoint

Deze stap wijzigt het entrypoint van de app zodat deze wordt gestart met de rootmodule in plaats van een standalone component.

Open main.ts en vervang de inhoud door het volgende:

Deze code start de app met behulp van AppModule. Deze opzet illustreert de modulaire architectuur: de applicatie is opgedeeld in modules, die elk hun eigen componenten, directives, pipes, services en meer bevatten.

Modulaire architectuur in Angular helpt bij het organiseren van de applicatie in logische blokken, waardoor de code schaalbaar, goed gestructureerd en herbruikbaar wordt.