Wie funktioniert Angular?

Angular funktioniert als Framework zum Erstellen von Single-Page-Anwendungen (SPA). Seine wichtigsten Komponenten und Prinzipien:

• Modularität: Anwendungen werden aus Modulen gebaut. @NgModule definiert, welche Komponenten, Dienste und andere Elemente zum Modul gehören.
• Komponenten: Die Hauptbausteine von Angular-Anwendungen. Jede Komponente besteht aus einer Vorlage (HTML), einer TypeScript-Klasse (Logik) und Stilen (CSS). Der Component-Dekorator verbindet sie.
• Datenbindung: Angular stellt die Verbindung zwischen den Daten in der Komponentenklasse und der Darstellung in der Vorlage her. Es gibt einseitige (Property Binding, Interpolation) und bidirektionale Bindung (ngModel).
• Direktiven: Ändern das Verhalten oder das Aussehen von DOM-Elementen. Es gibt strukturelle (*ngIf, *ngFor) und attributbezogene (ngClass, ngStyle) Direktiven.
• Dienste: Klassen, die Logik enthalten, die von mehreren Komponenten genutzt werden kann. Sie werden verwendet, um Daten zu erhalten, Geschäftslogik usw.
• Abhängigkeitsinjektion: Mechanismus, durch den Angular Dienste an Komponenten oder andere Dienste bereitstellt. Er macht den Code flexibler und testbarer.
• Routing: Ermöglicht die Navigation zwischen verschiedenen Ansichten (Komponenten) der Anwendung ohne Seitenreload. Wird mit RouterModule und Routen-Konfiguration definiert.
• Lebenszyklus einer Komponente: Eine Reihe von Ereignissen, die vom Erstellen bis zum Zerstören der Komponente auftreten. Angular bietet Hooks (ngOnInit, ngOnDestroy), die für Aktionen in bestimmten Phasen implementiert werden können.
• Änderungserkennung: Mechanismus, der bestimmt, wann die Ansicht (DOM) basierend auf Änderungen in den Anwendungsdaten aktualisiert werden muss. Angular verwendet Zonen (NgZone), um asynchrone Ereignisse zu verfolgen und die Änderungserkennung automatisch auszulösen.
• Templates: HTML mit Angular-Erweiterungen für Datenbindung, Direktiven und Ausdrücke.
• RxJS: Angular nutzt aktiv die RxJS-Bibliothek für die Arbeit mit asynchronen Daten und Ereignisströmen.

Hochrangiger Arbeitsprozess:

1. Laden: Der Browser lädt index.html.
2. Start: Die Wurzel der Anwendung wird gestartet, meist in main.ts.
3. Bootstrap: @NgModule für das Wurzelmodul (meist AppModule) wird mit platform-browser geladen.
4. Rendering: Angular erstellt und rendert die Komponenten, beginnend mit der Wurzel.
5. Datenbindung: Daten aus den Komponentenklassen werden mit den Templates verbunden.
6. Änderungserkennung: Angular überwacht Datenänderungen und aktualisiert die Ansicht.
7. Routing: Übergänge zwischen Ansichten werden vom Router verwaltet.

// Beispiel eines einfachen Komponenten
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Tag-Name für die Verwendung im Template
  template: `<p>{{ message }}</p>`, // Komponentenvorlage
  styles: ['p { color: blue; }'] // Komponentenstile
})
export class GreetComponent {
  // Logik der Komponente
  message = 'Hallo von Angular!';
}

// Beispiel für die Verwendung eines Dienstes mit DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Dienst ist im Wurzel-Injektor verfügbar
})
export class DataService {
  getData(): string {
    return 'Daten vom Dienst';
  }
}

// In einer Komponente, die den Dienst nutzt
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) { // Dienst-Injektion
  }

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

Angular kompiliert TypeScript und HTML-Vorlagen in JavaScript während des Build-Prozesses (standardmäßig AOT-Compilation), was die Leistung verbessert.