Hoe werkt Angular?

Angular werkt als een framework voor het maken van single-page applicaties (SPA). De belangrijkste componenten en principes:

• Modulariteit: Applicaties worden opgebouwd uit modules. @NgModule bepaalt welke componenten, services en andere elementen bij de module horen.
• Componenten: De bouwstenen van Angular-applicaties. Elke component bestaat uit een sjabloon (HTML), een TypeScript-klasse (logica) en stijlen (CSS). Component decorateur verbindt ze.
• Data Binding: Angular zorgt voor de koppeling tussen gegevens in de componentklasse en de weergave in het sjabloon. Er zijn unidirectionele (property binding, interpolatie) en bidirectionele (ngModel) bindingen.
• Directives: Veranderen het gedrag of uiterlijk van DOM-elementen. Ze kunnen structureel (*ngIf, *ngFor) of attribuutgericht (ngClass, ngStyle) zijn.
• Services: Klassen die logica bevatten die door meerdere componenten gebruikt kan worden. Ze worden gebruikt voor het verkrijgen van gegevens, bedrijfslogica, etc.
• Dependency Injection: Mechanisme waarmee Angular services aan componenten of andere services levert. Maakt de code flexibeler en testbaarder.
• Routing: Maakt navigatie tussen verschillende weergaven (componenten) van de applicatie mogelijk zonder pagina-herlaad. Wordt gedefinieerd via RouterModule en routeconfiguratie.
• Component Lifecycle: Een reeks gebeurtenissen die plaatsvinden vanaf het moment van creatie tot vernietiging van de component. Angular biedt hooks (ngOnInit, ngOnDestroy) die geïmplementeerd kunnen worden voor acties op specifieke fasen.
• Change Detection: Mechanisme dat bepaalt wanneer de weergave (DOM) moet worden bijgewerkt op basis van wijzigingen in de gegevens. Angular gebruikt zones (NgZone) om asynchrone gebeurtenissen te volgen en automatische change detection te activeren.
• Templates: HTML met Angular-extensies voor data binding, directives en uitdrukkingen.
• RxJS: Angular gebruikt actief de RxJS-bibliotheek voor werken met asynchrone gegevens en gebeurtenisstromen.

Hoog niveau werkproces:

1. Laden: De browser laadt index.html.
2. Start: De root van de applicatie wordt gestart, meestal in main.ts.
3. Bootstrap: @NgModule voor de rootmodule (meestal AppModule) wordt geladen met platform-browser.
4. Rendering: Angular maakt en rendert de componenten, beginnend bij de root.
5. Data Binding: Gegevens uit de componentklassen worden gekoppeld aan de sjablonen.
6. Change Detection: Angular bewaakt dat wijzigingen in gegevens worden opgemerkt en de weergave wordt bijgewerkt.
7. Routing: Overgangen tussen weergaven worden door de router afgehandeld.

// Voorbeeld van een eenvoudige component
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Naam van de tag voor gebruik in de sjabloon
  template: `<p>{{ message }}</p>`, // Component sjabloon
  styles: ['p { color: blue; }'] // Component stijlen
})
export class GreetComponent {
  // Logica van de component
  message = 'Hallo van Angular!';
}

// Voorbeeld van het gebruik van een service met DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Service is beschikbaar in de root-injector
})
export class DataService {
  getData(): string {
    return 'Data van de service';
  }
}

// In een component die de service gebruikt
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-show-data',
  template: `<p>{{ serviceData }}</p>`,
})
export class ShowDataComponent implements OnInit {
  serviceData: string = '';

  constructor(private dataService: DataService) { // Service-injectie
  }

  ngOnInit() {
    this.serviceData = this.dataService.getData();
  }
}

Angular compileert TypeScript en HTML-sjablonen naar JavaScript tijdens het buildproces (standaard AOT-compileerproces), wat de prestaties verbetert.