Modulaire Architectuur in Angular
Om veilig te experimenteren met modules, dient er 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 maken 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.
Om een module in Angular te genereren, is er een speciale CLI-opdracht:
Nu het bestand task.module.ts is aangemaakt in de map task, kunnen we het implementeren
task-module.ts
De exports array in @NgModule specificeert welke componenten, directives of pipes beschikbaar moeten zijn voor andere modules die deze module importeren. In dit geval kan TaskComponent buiten de TaskModule worden gebruikt.
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 kan worden hergebruikt.
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
task-list-module.ts
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 kan worden gebruikt.
Het rootmodule aanmaken
In deze stap wordt de hoofdmodule gedefinieerd die fungeert als het startpunt van de gehele applicatie.
Elke Angular-applicatie heeft een rootmodule nodig die Angular instrueert hoe de app moet worden gestart. Deze module brengt alle noodzakelijke 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 opdracht om het modulebestand te maken zonder een aparte map te genereren.
app-module.ts
Deze module fungeert als het toegangspunt van de applicatie. Het importeert BrowserModule, dat noodzakelijk is om Angular in de browser uit te voeren, en het TaskListModule, dat de hoofdfunctionaliteit voor het beheren van taken bevat. De AppComponent is 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:
main.ts
Deze code start de app op met behulp van AppModule. Deze configuratie illustreert de modulaire architectuur: de applicatie is opgedeeld in modules, waarbij elke module zijn eigen componenten, directives, pipes, services en meer bevat.
Modulaire architectuur in Angular helpt bij het organiseren van de applicatie in logische blokken, waardoor de code schaalbaar, goed gestructureerd en herbruikbaar wordt.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain the difference between standalone components and modules in Angular?
What are the benefits of using a modular architecture in Angular?
How do I know when to use separate modules versus a shared module?
Awesome!
Completion rate improved to 3.13Modulaire Architectuur in Angular
Veeg om het menu te tonen
Om veilig te experimenteren met modules, dient er 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 maken 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.
Om een module in Angular te genereren, is er een speciale CLI-opdracht:
Nu het bestand task.module.ts is aangemaakt in de map task, kunnen we het implementeren
task-module.ts
De exports array in @NgModule specificeert welke componenten, directives of pipes beschikbaar moeten zijn voor andere modules die deze module importeren. In dit geval kan TaskComponent buiten de TaskModule worden gebruikt.
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 kan worden hergebruikt.
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
task-list-module.ts
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 kan worden gebruikt.
Het rootmodule aanmaken
In deze stap wordt de hoofdmodule gedefinieerd die fungeert als het startpunt van de gehele applicatie.
Elke Angular-applicatie heeft een rootmodule nodig die Angular instrueert hoe de app moet worden gestart. Deze module brengt alle noodzakelijke 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 opdracht om het modulebestand te maken zonder een aparte map te genereren.
app-module.ts
Deze module fungeert als het toegangspunt van de applicatie. Het importeert BrowserModule, dat noodzakelijk is om Angular in de browser uit te voeren, en het TaskListModule, dat de hoofdfunctionaliteit voor het beheren van taken bevat. De AppComponent is 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:
main.ts
Deze code start de app op met behulp van AppModule. Deze configuratie illustreert de modulaire architectuur: de applicatie is opgedeeld in modules, waarbij elke module zijn eigen componenten, directives, pipes, services en meer bevat.
Modulaire architectuur in Angular helpt bij het organiseren van de applicatie in logische blokken, waardoor de code schaalbaar, goed gestructureerd en herbruikbaar wordt.
Bedankt voor je feedback!
