Angular

Ein TypeScript-Framework von Google für Single Page Applications (SPA), also Webanwendungen, die einmal geladen werden und danach im Browser laufen. Es gibt einen klaren, einheitlichen Aufbau vor und eignet sich besonders für grosse Unternehmensanwendungen mit mehreren Teams.

Code-Beispiele aus Quelle - Angular Mastery Workshop (Folie 164, 242), von den Folienbildern abgeschrieben. Die übrigen Beispiele stehen auf den Detailseiten.

Was Angular ausmacht

Laut Quelle - Angular Mastery Workshop (Folie 70–72):

• Stark vorgegeben („opinionated“): Es gibt einen Standardweg für fast alles. Wer ein Angular-Projekt kennt, findet sich in jedem anderen ab dem ersten Tag zurecht.
• TypeScript gibt Sicherheit und gute Werkzeugunterstützung (Autovervollständigung, Refactoring), siehe TypeScript.
• Werkzeuge: Die Angular CLI erzeugt, baut, testet und aktualisiert Projekte.
• Entwickelt vom Angular-Team bei Google, mit vielen Beiträgen aus der Community. Nachfolger von AngularJS (Version 1), mit dem es ausser dem Namen wenig gemeinsam hat.

Die Autoren halten Angular für „derzeit die beste Lösung“ für mittlere bis grosse Anwendungen in Unternehmen, geben aber zu, dass das eine Meinung ist (Folie 71).

Bausteine

Etwa 95 % des Codes einer Angular-App bestehen aus fünf Bausteinen (Folie 150):

Dazu kommen Error Handler, HTTP-Interceptors, Preloading-Strategien und weitere Hilfsbausteine.

Services

Komponenten sollen keine Datenzugriffe oder komplexe Geschäftslogik enthalten, sondern Daten anzeigen und den Rest an Services abgeben (Folie 163, 240). Typische Einsätze (Folie 241): zustandslose Logik (Berechnen, Sortieren, Umformen für das Backend), Zustandsbehälter (Services sind meist Singletons und überall injizierbar, also ideal für geteilten Zustand, siehe State Management) und Backend-Anfragen (REST, GraphQL, WebSocket).

Ein zustandsloser Service mit wiederverwendbarer Logik und ein zweiter, der ihn mit dem HttpClient kombiniert (Folie 164):

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class SortService {

    constructor() {}

    sort(sortCriteria: SortCriteria, items: any[]): any[] {
        // sort logic ...
    }

    private compare(item1: any, item2: any, property: string): number {
        // compare logic ...
    }
}

export interface SortCriteria {
    sortProperty: string | string[];
    sortOrder?: 'asc' | 'desc';
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { SortService, SortCriteria } from '../sort/sort.service';

@Injectable({
    providedIn: 'root'
})
export class UserService {

    constructor(
        private httpClient: HttpClient,
        private sortService: SortService
    ) {}

    getAll(sortCriteria: SortCriteria): Observable<User[]> {
        return this.httpClient.get<User[]>(RESOURCE_URL).pipe(
            map(users => this.sortService.sort(users))     // Folie: sortCriteria fehlt als Argument
        )
    }
}

export interface User {
    // ...
}

Ein Service, der eine fremde Bibliothek verpackt, ist über die normale DI injizierbar und lässt sich damit im Test leicht ersetzen. Ein zweiter Service hält Zustand (eine Liste von Benachrichtigungen), nutzt den ersten und kann in vielen Komponenten Meldungen auslösen und anzeigen (Folie 242):

import uuid from 'uuid/v4';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',                // app-weites Singleton
})
export class UuidService {
  constructor() {}

  generate(): string {
    return uuid();
  }
}

import { Injectable } from '@angular/core';

import { UuidService } from '../uuid/uuid.service';
import { Notification, NotificationType } from './notification';

@Injectable()
export class NotificationService {

  notifications: Notification[] = [];                        // Zustand

  constructor(private uuidService: UuidService) {}          // andere Services injizieren

  info(message: string, timeout: number = 2000): void {
    this.addNotification('info', message, timeout);
  }

  // error, warning ...

  remove(notification: Notification): void {
    const indexToRemove = this.notifications
        .findIndex(n => n.id === notification.id);
    this.notifications.splice(indexToRemove, 1);
  }

  private addNotification(
    type: NotificationType,
    message: string,
    timeout?: number
  ) {
    const notification = { id: this.uuidService.generate(), type, message };
    this.notifications.push(notification);
    if (timeout) {
      setTimeout(() => {
        this.remove(notification);
      }, timeout);
    }
  }
}

Weitere Themen des Kurses

• Backend-Kommunikation: HttpClient, Backend-Services, Fehlerbehandlung mit catchError, HTTP-Interceptors, Tests. Code in Angular-Backend-Kommunikation (Folie 286–295).
• Routing: routerLink, Router.navigate(), Lazy Loading, Guards, Resolver, Pfad-Parameter. Code in Angular-Routing (Folie 300–313).
• Formulare: Template-driven mit [(ngModel)] oder Reactive Forms mit FormBuilder und Validatoren. Code in Angular-Formular (Folie 315–323).
• Pipes, Direktiven, Content Projection, @ViewChild: Code in Angular-Komponente (Folie 325–342).
• Plattform: Angular Material (Komponenten, Barrierefreiheit, Themes), Angular Universal (Server-Side Rendering) sowie Community-Bibliotheken wie Nx (Monorepos), NgRx, ngx-translate, ng-bootstrap, ngx-charts und das Material CDK (Folie 83–86, 384–391). Zum Ausprobieren empfiehlt der Kurs StackBlitz, eine Online-Entwicklungsumgebung im Browser, gut für kleine Beispiele und für Nachbauten von Fehlern (Folie 191–192).

Release-Zyklus

Laut Kurs (Folie 75–79) gibt es alle 6 Monate eine Hauptversion, 1–3 Nebenversionen und fast wöchentlich Patches. Jede Version wird 6 Monate aktiv und 12 Monate als LTS unterstützt. ng update automatisiert Updates samt Code-Migrationen. Der Kurs startet mit Angular 12 und nennt Ivy (neue Rendering-Engine, Standard ab v9) als grösste Neuerung.

Was sich seit Angular 12 geändert hat

Die wichtigsten Neuerungen laut Quelle - Recherche - Angular heute 2026:

• Standalone-Komponenten statt NgModules (Standard seit v19), siehe Angular-Architektur.
• Signals als neues Reaktivitätsmodell (stabil seit v20), siehe Reaktive Programmierung.
• Zoneless und OnPush als Standard (v21, v22), siehe Angular-Komponente.
• Neue Template-Syntax @if, @for, @defer (v17).
• Signal Forms (stabil seit v22) als dritte Formular-Variante neben Template-driven und Reactive Forms.
• Der HttpClient nutzt seit v22 die Fetch API. Guards sind heute Funktionen statt Klassen.

Verwandt

• Angular-Komponente – der wichtigste Baustein
• Angular-Architektur – wie eine App gegliedert wird
• TypeScript – die Sprache von Angular
• Reaktive Programmierung – RxJS und Signals
• State Management – wo der Zustand liegt
• Angular CLI – das Werkzeug zum Erzeugen und Bauen
• Angular-Routing, Angular-Formular, Angular-Backend-Kommunikation – Detailseiten mit Code