Hoe werkt Angular?

Angular werkt op basis van een MVC/MVVM-architectuur. Het gebruikt componenten, data binding en dependency injection om interactieve webapplicaties te bouwen.

Belangrijke concepten:

• Componenten: Bouwstenen van de applicatie, bestaande uit een sjabloon, een klasse en stijlen.
• Modules (NgModules): Groeperen gerelateerde componenten, services en andere elementen.
• Data binding: Synchroniseert gegevens tussen het model en de weergave.
  • Eenzijdige binding: Gegevens stromen in één richting (bijvoorbeeld van model naar weergave).
  • Tweedirectionele binding [()]: Wijzigingen in het model beïnvloeden de weergave en vice versa.
• Services: Bieden functionaliteit die door verschillende componenten kan worden gebruikt (bijvoorbeeld werken met HTTP-verzoeken).
• Dependency injection (DI): Mechanisme om afhankelijkheden (zoals services) aan componenten te leveren.
• Templates: HTML met Angular-syntaxisuitbreidingen voor het weergeven van gegevens en het afhandelen van gebeurtenissen.
• Directives: Veranderen het gedrag of uiterlijk van DOM-elementen.
  • Structureel: Voeg toe, verwijder of manipuleer DOM-elementen (bijvoorbeeld *ngIf, *ngFor).
  • Attribuut: Verandert het uiterlijk of gedrag van een bestaand element (bijvoorbeeld [ngClass], [ngStyle]).
• Levenscyclus van componenten: Set hooks die het uitvoeren van code op verschillende fasen van de levensduur van een component mogelijk maken (bijvoorbeeld OnInit, OnDestroy).
• NgZone: Zorgt voor automatische detectie van wijzigingen en het bijwerken van de weergave bij asynchrone operaties.

Werkproces:

1. Laden: De applicatie wordt geladen, de Bootstrap-module start de hoofcomponent.
2. Rendering: Angular compileert de sjablonen en maakt de DOM-structuur.
3. Data binding: Er wordt een verbinding tussen gegevens en weergave tot stand gebracht.
4. Gebeurtenisafhandeling: Gebeurtenislisteners reageren op gebruikersacties.
5. Wijzigingsdetectie: De zone bewaakt asynchrone operaties.
6. Bijwerken van de weergave: Wanneer wijzigingen worden gedetecteerd, werkt Angular de relevante delen van de DOM bij.

Voorbeeld van tweerichtingsgegevensbinding:

<!-- In de sjabloon -->
<input [(ngModel)]="userName">
<p>Hallo, {{ userName }}!</p>

// In de componentklasse
export class MyComponent {
  userName: string = '';
}