Next:
Impressum
Angular Grundlagen
1
Impressum
2
Einführung in Angular
2.1
Release-Strategie und Support-Zyklen
3
Architektur
3.1
Schichtenarchitektur in Angular
3.2
Von modulbasierter zu Standalone-Architektur
4
Moderne Entwicklungsumgebungen für Angular (2025)
4.1
Visual Studio Code
4.2
WebStorm
4.3
Fleet
4.4
Neovim/Vim mit Angular-Plugins
4.5
Zed Editor
4.6
Stackblitz WebContainers
4.7
Faktoren bei der IDE-Auswahl für Angular
5
Tool Chain
6
Installation
6.1
Node.js installieren
6.2
Angular CLI installieren
6.3
Nützliche CLI-Befehle für Angular
6.4
Kompakte Installation mit npx
7
Angular Projektstruktur
7.1
Grundlegende Verzeichnisstruktur
7.2
Hauptbestandteile eines Angular-Projekts
7.2.1
Quellcode-Verzeichnis (src/)
7.2.2
Konfigurationsdateien
7.3
Aktuelle Funktionen in Angular
7.3.1
Standalone-Komponenten als Standard
7.3.2
Verbesserte Konfigurationsdatei
7.3.3
Signals für Reaktivität (eingeführt in Angular 16)
7.3.4
Deferrable Views (neu in Angular 17)
7.3.5
Control Flow in Templates (neu in Angular 17)
7.4
Empfohlene Projektstruktur für größere Anwendungen
7.5
Best Practices
7.6
Entwicklungsumgebung einrichten
8
Angular Komponenten
8.1
Hands-On Einstieg in die Welt der Angular-Komponenten
8.1.1
Die erste Komponente erstellen
8.1.2
Die Anatomie einer Komponente verstehen
8.1.3
Der Datenfluss in Angular-Komponenten
8.1.4
Warum Komponenten?
8.1.5
Das große Ganze
8.1.6
Parent-Child Beziehungen:
@Input
()
8.1.7
Von unten nach oben:
@Output
() und EventEmitter
8.2
Fortgeschrittene Komponenten-Konzepte
8.2.1
Lifecycle Hooks
8.2.2
Content Projection mit ng-content
8.2.3
Mehrfache Content Projection mit select
8.3
Komponenten-Design und Best Practices
8.3.1
Komponenten-Hierarchie und -Struktur
8.3.2
Beispiel einer typischen Komponenten-Struktur
8.3.3
Komponenten-Styling und ViewEncapsulation
8.3.4
Component Change Detection
8.4
Praxisbeispiel - Eine komplette Feature-Komponente
9
Property und Event Binding in Angular: Ein umfassender Leitfaden
9.1
Grundlagen des Bindings: Was passiert hinter den Kulissen?
9.1.1
Der Angular Change Detection Mechanismus
9.1.2
Bindungs-Kategorien im Detail
9.2
Property Binding: Tiefergehende Betrachtung
9.2.1
Der Unterschied zwischen HTML-Attributen und DOM-Eigenschaften
9.2.2
Syntax und Anwendung mit detaillierten Erklärungen
9.2.3
Interpolation vs. Property Binding
9.2.4
Binding an native DOM-Eigenschaften mit praktischen Beispielen
9.2.5
Erweiterte Sicherheitsaspekte mit praktischen Beispielen
9.3
Event Binding: Vertieftes Verständnis
9.3.1
Grundlegende Syntax und Event-Typen
9.3.2
Das $event Objekt verstehen
9.3.3
Event-Modifikatoren im Detail
9.3.4
Event Bubbling und Capture verstehen
9.3.5
Event-Delegation und Leistungsoptimierung
9.3.6
Event-Payload und TypeScript-Integration im Detail
9.4
Two-way Binding (Bidirektionales Binding): Vertiefung
9.4.1
Wie Two-way Binding unter der Haube funktioniert
9.4.2
Grundlegende Verwendung von ngModel mit Formularen
9.4.3
Eigene Komponenten mit Two-way Binding: Eine Schritt-für-Schritt-Anleitung
10
Direktiven in Angular: Eine umfassende Betrachtung
10.1
Was sind Direktiven? Eine tiefere Betrachtung
10.1.1
Die technische Grundlage
10.1.2
Der Verarbeitungsprozess von Direktiven
10.2
Die drei Kategorien von Direktiven im Detail
10.2.1
Komponenten-Direktiven: Die Building Blocks
10.2.2
Attribut-Direktiven: Das Verhalten von Elementen anpassen
10.2.3
Struktur-Direktiven: Das DOM dynamisch manipulieren
10.3
Neuere Entwicklungen bei Angular-Direktiven: Tiefergehende Betrachtung
10.3.1
Signalbasierte Reaktivität in Direktiven
10.3.2
Verbesserte Dependency Injection mit inject()
10.3.3
Hostbindungen und Listeners: Erweitertes Beispiel
10.4
Bewährte Praktiken für Direktiven in Angular: Detaillierter Leitfaden
10.4.1
1. Verwende standalone: true für bessere Modularität
10.4.2
2. Verwende konsistente Selektorpräfixe
10.4.3
3. Implementiere die notwendigen Lifecycle-Hooks
10.4.4
4. Bevorzuge Renderer2 gegenüber direkten DOM-Manipulationen
10.4.5
5. Dokumentiere deine Direktiven gründlich
10.4.6
6. Halte Direktiven fokussiert auf eine Aufgabe
10.4.7
7. Berücksichtige die Performance bei komplexen Direktiven
10.5
Vergleich: Klassische vs. Neue Syntax im Detail
10.5.1
Konkrete Code-Beispiele im Vergleich
10.5.2
Fallstricke und Übergangsstrategien
10.6
Migrations-Strategie: Ein praktischer Ansatz
10.6.1
Phase 1: Vorbereitung und Planung
10.6.2
Phase 2: Inkrementelle Migration
10.6.3
Phase 3: Validierung und Optimierung
10.6.4
Code-Beispiel für schrittweise Migration:
10.7
Integration mit RxJS und moderner Angular-Architektur
10.7.1
Beispiel: Direktive mit RxJS-Integration
10.7.2
Beispiel: Integration mit Signals
10.8
Abschließende Gedanken zur erweiterten Nutzung von Direktiven
11
RxJS: Die reaktive Programmierung für JavaScript
11.1
Die Grundkonzepte von RxJS
11.1.1
Observable
11.1.2
Observer
11.1.3
Operatoren
11.2
Die Philosophie hinter RxJS
11.3
Fortgeschrittene Konzepte
11.3.1
Kalte vs. Heiße Observables
11.3.2
Fehlerbehandlung
11.4
Praktische Anwendungsfälle für RxJS
11.4.1
Zustandsverwaltung
11.4.2
Kombination von Datenströmen
11.5
Integration mit Frameworks
11.5.1
Angular
11.5.2
React
12
Change Detection
12.1
Einführung und Überblick
12.2
Zone.js und der Erkennungsmechanismus
12.2.1
Funktionsweise von Zone.js
12.2.2
Zoneless-Ansatz in Angular
12.3
Hierarchische Change Detection
12.3.1
Komponentenbaum und Change Detection
12.3.2
Visualisierung des Erkennungsprozesses
12.4
Change Detection Strategien in Angular
12.4.1
Default-Strategie
12.4.2
OnPush-Strategie
12.5
Verbesserungen der OnPush-Strategie
12.5.1
Beispiel für Signal-Integration mit OnPush
12.6
Manuelle Steuerung der Change Detection
12.6.1
ChangeDetectorRef
12.6.2
NgZone
12.7
Unidirektionaler Datenfluss
12.8
Immutabilität und Performance-Optimierung
12.9
RxJS und AsyncPipe
12.10
Signals in Angular
12.11
Debugging der Change Detection
12.11.1
DevTools-Integration
12.11.2
Programmatisches Debugging
12.12
Best Practices für optimale Performance
12.12.1
OnPush als Standard verwenden
12.12.2
Schwere Berechnungen aus der Change Detection heraushalten
12.12.3
Virtuelle Scrolling für große Listen
12.12.4
trackBy für NgFor verwenden
12.12.5
Kombination von Signals, OnPush und AsyncPipe
13
Lifecycle und Hooks
13.1
Einführung
13.2
Lifecycle Hooks im Detail
13.2.1
ngOnChanges()
13.2.2
ngOnInit()
13.2.3
ngDoCheck()
13.2.4
ngAfterContentInit()
13.2.5
ngAfterContentChecked()
13.2.6
ngAfterViewInit()
13.2.7
ngAfterViewChecked()
13.2.8
ngOnDestroy()
13.3
Integration mit der Signal API
13.4
Best Practices für Lifecycle Hooks
13.5
Weiterführende Ressourcen
14
Dependency Injection
14.1
Einführung
14.2
Grundlegende Konzepte des DI-Systems in Angular
14.2.1
Constructor Injection
14.2.2
Injektoren (Injectors)
14.2.3
Provider
14.2.4
Tokens
14.2.5
Providebereiche (Provider Scopes)
14.3
Neuere Entwicklungen im Angular DI-System
14.3.1
Das inject() API
14.3.2
Hierarchisches DI-System mit besserer Tree-Shaking-Unterstützung
14.3.3
Self, SkipSelf, Optional und Host-Dekoratoren
14.4
Konstruktor Injection vs. inject()-Funktion
14.4.1
Constructor Injection
14.4.2
inject()-Funktion (ab Angular 14)
14.4.3
Wann welche Methode verwenden?
14.5
Anwendungsbeispiele
14.5.1
Beispiel 1: Globaler State Service mit providedIn: ‘root’
14.5.2
Beispiel 2: Komponenten-spezifischer Service mit DI-Hierarchie
14.5.3
Beispiel 3: Factory Provider mit Environment-Abhängigkeiten
14.6
Die Angular Injector-Debugging API
14.7
Best Practices für Dependency Injection in Angular
14.8
Debugging des DI-Systems
15
Forms in Angular
15.1
Grundlegende Konzepte
15.2
Template-driven Forms
15.2.1
Einrichtung
15.2.2
Einfaches Beispiel
15.2.3
Wichtige Merkmale von Template-driven Forms
15.2.4
Verschachteltes Formular
15.3
Reactive Forms
15.3.1
Einrichtung
15.3.2
Einfaches Beispiel
15.3.3
Wichtige Merkmale von Reactive Forms
15.3.4
Verschachtelte Formulare
15.3.5
Dynamische Formulare mit FormArray
15.4
Validierung
15.4.1
Eingebaute Validatoren
15.4.2
Benutzerdefinierte Validatoren
15.4.3
Asynchrone Validatoren
15.5
Formulardaten senden
15.5.1
HTTP-Anfragen
15.6
Best Practices
15.6.1
Formular-Wiederverwendbarkeit
15.6.2
Validierungsfehlermeldungen zentralisieren
15.6.3
Formularstatus-Verfolgung
15.7
Typensicherheit in Formularen
15.8
Form Builder Verbesserungen
16
Pipes
16.1
Grundlagen
16.2
Vordefinierte Pipes in Angular
16.2.1
Textformatierung
16.2.2
Zahlenformatierung
16.2.3
Datum- und Zeitformatierung
16.2.4
Array- und Objekt-Pipes
16.2.5
Asynchrone Daten
16.3
Verkettung von Pipes
16.4
Parametrisierung von Pipes
16.5
Benutzerdefinierte Pipes in Angular
16.5.1
Erstellen einer einfachen Pipe
16.5.2
Pure vs. Impure Pipes
16.5.3
Eine Pipe mit Dependency Injection
16.6
Fortgeschrittene Pipe-Features in modernen Angular-Versionen
16.6.1
Signal-Unterstützung
16.7
Best Practices für Pipes in Angular
16.8
Praxisbeispiel: Filterpipe mit Suchfunktion
17
Services
17.1
Grundlagen
17.2
Was sind Angular Services?
17.3
Service-Erstellung in Angular
17.3.1
Grundstruktur eines Services
17.4
Dependency Injection
17.4.1
Der
@Injectable-Dekorator
17.5
Service-Nutzung in Komponenten
17.6
Service-Hierarchie und Provider-Ebenen
17.7
Fortgeschrittene Service-Nutzung
17.7.1
HTTP-Services
17.7.2
Service-zu-Service-Kommunikation
17.8
Standalone-Services
17.9
Reactive Services mit RxJS
17.10
Testing von Services in Angular
17.11
Best Practices für Services in Angular
18
Server Kommunikation in Angular
18.1
Einführung
18.2
Das HttpClientModule und Standalone Components
18.2.1
Traditioneller Ansatz (immer noch unterstützt)
18.2.2
Moderner Standalone-Ansatz (empfohlen)
18.3
REST-Operationen mit HttpClient
18.3.1
GET-Anfragen
18.3.2
Retry- und Fallback-Strategien
18.3.3
POST-Anfragen
18.3.4
PUT und PATCH-Anfragen
18.3.5
DELETE-Anfragen
18.4
Angular Signals API für reaktive Server-Kommunikation
18.4.1
Verwendung in einer Komponente
18.5
Behandlung von Observables und fortgeschrittene RxJS-Techniken
18.5.1
Grundlegende Subscription
18.5.2
Verwendung von async Pipe (empfohlen)
18.5.3
RxJS-Operatoren für erweiterte Szenarien
18.6
Error Handling und Retry-Mechanismen
18.7
CORS (Cross-Origin Resource Sharing) in Angular
18.7.1
CORS-Grundlagen für Angular-Entwickler
18.7.2
CORS-Behandlung in Angular-Services
18.7.3
Angular Proxy-Konfiguration für Entwicklung
18.7.4
Erweiterte Proxy-Konfiguration
18.7.5
Environment-spezifische CORS-Konfiguration
18.7.6
CORS-bewusster HTTP-Service
18.7.7
CORS-Debugging und -Monitoring
18.7.8
Best Practices für CORS in Angular
18.8
Interceptors für Headers, Authentication und Logging
18.8.1
Registrieren von Interceptors
18.9
Fortgeschrittene HTTP-Features in Angular
18.9.1
Progress Events für Up- und Downloads
18.9.2
Response Types und Options
18.9.3
HttpContext für kontextabhängige Request-Konfiguration
18.10
WebSockets in Angular
18.10.1
SignalR-Integration für Echtzeit-Kommunikation
18.11
Best Practices für Angular Server-Kommunikation
18.11.1
Modellierung von Datentypen mit TypeScript-Interfaces
18.11.2
Service-Modularisierung und Strukturierung
18.11.3
Caching-Strategien mit HTTP-Request-Caching
19
Routing in Angular
19.1
Grundkonzepte des Angular Routings
19.1.1
Das Router-Modul einrichten
19.1.2
Router-Outlet und Navigation
19.2
Fortgeschrittene Routing-Funktionen
19.2.1
Route-Parameter
19.2.2
Query-Parameter
19.2.3
Route Guards
19.2.4
Lazy Loading
19.2.5
Preloading-Strategien
19.3
Neuere Routing-Funktionen (Angular 15-17)
19.3.1
Standalone Components & Routing
19.3.2
Routed Komponenten mit Signals (Angular 17+)
19.3.3
Typed Routes (Angular 16+)
19.3.4
Hash-basiertes vs. HTML5 Routing
19.3.5
Relative Navigation und Route Reuse
19.3.6
Router Events
19.3.7
Deferred Loading (Angular 17+)
19.4
Best Practices für Angular Routing (15+)
20
REST APIs in Angular
20.1
Grundlagen der REST-Kommunikation
20.2
HttpClient in Angular
20.2.1
Einrichtung des HttpClient
20.3
HTTP-Methoden und ihre Anwendung
20.3.1
GET-Anfragen
20.3.2
POST-Anfragen
20.3.3
PUT und PATCH-Anfragen
20.3.4
DELETE-Anfragen
20.4
Erweiterte Funktionen
20.4.1
Request-Konfiguration und Parameter
20.4.2
Fehlerbehandlung
20.4.3
Abbruch von Anfragen
20.5
HTTP-Interceptoren
20.5.1
Authentifizierungs-Interceptor
20.5.2
Registrierung des Interceptors
20.6
Fortgeschrittene Konzepte
20.6.1
Reaktive Programmierung mit RxJS
20.6.2
Cache-Implementierung
20.6.3
GraphQL mit Apollo Client in Angular
20.7
Neuerungen in Angular 17+
20.7.1
Signal-basierte HTTP-Anfragen (Angular 17+)
20.7.2
Verbesserte HTTP-Konfiguration (Angular 18)
20.8
Best Practices für REST in Angular
20.8.1
Strukturierung von API-Services
20.8.2
Datenzugriff in Komponenten
21
OpenAPI und API-Vertragsmanagement in Angular
21.1
Was ist OpenAPI?
21.2
Contract-First vs. Code-First
21.2.1
Contract-First Ansatz
21.2.2
Code-First Ansatz
21.3
Der Vertrag als Single Source of Truth
21.3.1
Verbesserte Kommunikation
21.3.2
Automatisierte Codegenerierung
21.3.3
Präzise Dokumentation
21.3.4
Typsicherheit
21.4
Entkopplung durch Protokollebene
21.4.1
Technologieunabhängigkeit
21.4.2
Evolutionäre Entwicklung
21.4.3
Versionierung
21.4.4
Testbarkeit
21.5
OpenAPI-Integration in Angular-Projekten
21.5.1
Einrichtung mit npm-Skripten
21.5.2
Installation des openapi-generator
21.6
Umfangreiches Beispiel: Implementierung einer Contract-First API
21.6.1
Schritt 1: Erstellen der OpenAPI-Spezifikation
21.6.2
Schritt 2: Generierung des API-Clients
21.6.3
Schritt 3: Erstellen eines API-Service-Wrappers
21.6.4
Schritt 4: Verwendung in Angular-Komponenten
21.6.5
Schritt 5: Einrichten eines Mock-Servers für die Entwicklung
21.6.6
Schritt 6: Konfiguration der API-Basis-URL basierend auf der Umgebung
21.7
Vorteile der OpenAPI-Integration in Angular
21.7.1
Typsicherheit und Intellisense
21.7.2
Automatische Aktualisierung bei API-Änderungen
21.7.3
Konsistente Fehlerbehandlung
21.7.4
Einfache Mocks für Tests und Entwicklung
21.8
Best Practices für OpenAPI in Angular-Projekten
21.8.1
Versionierung der API-Spezifikation
21.8.2
Integration in CI/CD-Pipelines
21.8.3
Strikte Validierung der OpenAPI-Spezifikation
21.8.4
Zentrale API-Service-Schicht
21.8.5
Staging-spezifische API-Konfigurationen
21.8.6
Mock-Server für Entwicklung und Tests
21.8.7
Regelmäßige Aktualisierung der API-Dependencies
21.8.8
API-Versionen-Management
21.8.9
Fehlerbehandlung und -modellierung
21.8.10
Dokumentation erstellen und pflegen
21.8.11
API-Änderungen testen
21.8.12
API-Breaking-Changes managen
22
Authentifizierung in Angular
22.1
Moderne Authentifizierungsstrategien
22.2
Implementierung in Angular
22.2.1
Authentication Service mit modernem State Management
22.2.2
Moderner Auth Interceptor mit automatischem Token Refresh
22.2.3
Moderne Route Guards mit Standalone API
22.2.4
Verwendung im Standalone-Setup
22.2.5
Login-Komponente mit modernem Angular Syntax
22.3
CSRF Protection in Angular
22.3.1
CSRF-Grundlagen für Angular-Entwickler
22.3.2
Angular’s eingebauter CSRF-Schutz
22.3.3
CSRF-Token-Handling in Services
22.3.4
CSRF-Schutz in Authentication-Flows
22.3.5
CSRF-bewusste Interceptors
22.3.6
CSRF-Schutz für File Uploads
22.3.7
CSRF-Schutz mit Angular Forms
22.3.8
Testing von CSRF-Schutz
22.3.9
Best Practices für CSRF-Schutz in Angular
22.4
Sicherheitshinweise für moderne Angular-Anwendungen
23
State Management in Angular
23.1
Einführung
23.2
State Management Konzepte
23.2.1
Single Source of Truth
23.2.2
Unveränderlichkeit (Immutability)
23.2.3
Unidirektionaler Datenfluss
23.3
State Management Lösungen in Angular
23.3.1
Komponentenbasiertes State Management
23.3.2
Services als State Container
23.3.3
NgRx - Redux-Pattern für Angular
23.3.4
NgRx Component Store (ab Angular 11)
23.3.5
Signals in Angular für reaktives State Management
23.4
RxState - Ein leichtgewichtiger State Management Ansatz
23.5
Asynchrones State Management
23.5.1
Asynchrones State Management mit RxJS
23.5.2
Asynchrones State Management mit NgRx Effects
23.5.3
Asynchrones State Management mit Signals
23.5.4
Caching und Invalidierung asynchroner Daten
23.5.5
Strategien für die Optimierung der Leistung bei asynchronem State
23.6
Richtlinien zur Auswahl des richtigen State Management Ansatzes
23.7
Best Practices
24
WebSockets in Angular - Kompakter Leitfaden
24.1
Grundlagen von WebSockets
24.2
1. Native WebSocket-API in Angular
24.3
2. RxJS mit WebSockets
24.4
3. Socket.IO mit Angular
24.5
4. SignalR für .NET-Backends
24.6
5. WebSockets mit Angular Signals (Angular 16+)
24.7
Sicherheitsaspekte bei WebSockets
24.8
Best Practices
24.9
Moderne WebSocket-Features in Angular
24.10
Beispiel einer modernen WebSocket-Implementierung mit Signals
25
Testen in Angular
25.1
Einführung in das Angular-Testing
25.2
Das Testing-Framework
25.2.1
TestBed
25.2.2
Jest Alternative
25.2.3
Cypress für E2E-Tests
25.2.4
Playwright für E2E-Tests
25.3
Arten von Tests
25.3.1
Unit-Tests
25.3.2
Integrationstests
25.3.3
End-to-End-Tests
25.4
Komponententests
25.4.1
Shallow vs. Deep Rendering
25.4.2
Testen von Bindings
25.4.3
Testen von Ereignissen
25.4.4
Testen von Lebenszyklusmethoden
25.5
Service-Tests
25.5.1
Testen von Abhängigkeitsinjektionen
25.5.2
Testen von HTTP-Anfragen
25.6
Direktiven und Pipes testen
25.6.1
Direktiven testen
25.6.2
Pipes testen
25.7
Mocking und Spying
25.7.1
Jasmine Spies
25.7.2
Spy-Objekte erstellen
25.7.3
Mock-Services
25.8
Testing mit RxJS
25.8.1
Manuelles Testen von Observables
25.8.2
TestScheduler
25.9
Tests für Formulare in Angular
25.9.1
Template-Driven Forms
25.9.2
Reactive Forms
25.9.3
Formular-Validierung testen
25.9.4
Asynchrone Validatoren testen
25.10
Routing-Tests in Angular
25.10.1
Grundlegende Routing-Tests
25.10.2
Testen von RouterLink und Navigation
25.10.3
Testen von Route-Guards
25.10.4
Testen von Routen mit Parametern
25.10.5
Testen von Resolver
25.10.6
Testen der Navigation bei Formulareinreichung
25.11
Testing mit RxJS
25.11.1
Grundlagen zum Testen von Observables
25.11.2
Manuelles Testen mit fakeAsync und tick
25.11.3
TestScheduler und Marble Testing
25.11.4
Testen von Service-Methoden mit Observables
25.11.5
Testen von Komponenten mit Observables
25.11.6
Testen von Subject und BehaviorSubject
25.11.7
Testen von Kombinationsoperatoren
25.11.8
Testen der Abbruchlogik (Unsubscribe)
25.11.9
Fortgeschrittene Szenarien mit switchMap, mergeMap, etc.
25.11.10
Fehlerbehandlung mit catchError und retry
26
Jasmine und Karma in Angular-Tests
26.1
Jasmine: Das Behavior-Driven Testing-Framework
26.1.1
Grundstruktur eines Jasmine-Tests
26.1.2
Jasmine-Schlüsselkomponenten
26.1.3
Erweiterte Jasmine-Funktionen
26.2
Karma: Der Test-Runner
26.2.1
Funktionsweise von Karma
26.2.2
Karma-Konfiguration
26.2.3
Wichtige Karma-Konfigurationsoptionen
26.2.4
Karma-Befehle in Angular-Projekten
26.2.5
Test-Debugging mit Karma
26.2.6
Integration mit CI/CD-Pipelines
26.2.7
Häufige Probleme und Lösungen
26.3
Jasmine und Karma in Angular-Projekten
26.3.1
Standardmäßige Test-Struktur
26.3.2
Tests ausführen
26.3.3
Best Practices für Jasmine und Karma in Angular
26.4
Alternativen zu Jasmine und Karma
26.4.1
Jest als Alternative
26.4.2
Cypress für Komponententests
27
Code Coverage in Angular-Tests
27.1
Grundlagen der Code Coverage
27.2
Coverage-Messung in Angular
27.3
Konfiguration der Coverage-Anforderungen
27.4
Die begrenzte Aussagekraft von Coverage-Prozentwerten
27.4.1
Warum 100% Coverage nicht ausreicht
27.4.2
Der “Coverage-Illusion”-Effekt
27.5
Die Bedeutung von Boundary Testing
27.5.1
Innerhalb und außerhalb der Grenzen testen
27.5.2
Äquivalenzklassen identifizieren
27.6
Integration von Code-Coverage in CI/CD-Pipelines
27.7
Ausgewogener Ansatz zur Code Coverage
27.8
Die Rolle von Coverage in einer umfassenden Teststrategie
28
Barrierefreiheit: Grundlagen und Umsetzung
28.1
Einführung in die Barrierefreiheit
28.2
Zielgruppen der Barrierefreiheit
28.3
Barrierefreiheit in verschiedenen Bereichen
28.3.1
Bauliche Barrierefreiheit
28.3.2
Digitale Barrierefreiheit
28.3.3
Kommunikative Barrierefreiheit
28.3.4
Barrierefreiheit im Verkehr
28.4
Gesetzliche Grundlagen
28.5
Umsetzung von Barrierefreiheit
28.5.1
Prinzip des Universal Design
28.5.2
Praktische Maßnahmen
28.6
Herausforderungen und Lösungsansätze
28.7
Barrierefreiheit in Angular-Anwendungen
28.7.1
Grundlegende Konzepte für barrierefreie Angular-Anwendungen
28.7.2
Angular-spezifische Tools und Bibliotheken
28.7.3
Testen der Barrierefreiheit in Angular
28.7.4
Best Practices für Angular-Entwickler
28.7.5
Häufige Herausforderungen und Lösungen
28.8
Best Practices und Beispiele
28.8.1
Erfolgreiche Umsetzungsbeispiele
28.8.2
Checklisten zur Umsetzung
28.9
Weiterführende Ressourcen
29
Angular im Enterprise Bereich
29.1
Einleitung
29.2
Warum Angular für Enterprise-Anwendungen?
29.2.1
Typsicherheit durch TypeScript
29.2.2
Architektonische Konsistenz
29.2.3
Skalierbarkeit
29.2.4
Langfristige Unterstützung und klarer Releasezyklus
29.3
Enterprise-spezifische Features und Best Practices
29.3.1
Sicherheit
29.3.2
Internationalisierung (i18n)
29.3.3
Barrierefreiheit (Accessibility)
29.3.4
Testing
29.4
Architekturmuster für Enterprise-Anwendungen
29.4.1
Micro Frontends
29.4.2
State Management
29.4.3
Backend-Kommunikation
29.5
Herausforderungen und Lösungsansätze
29.5.1
Performance-Optimierung
29.5.2
Build-Optimierung
29.5.3
Wartung großer Codebases
29.6
Tooling und Entwicklungsumgebung
29.6.1
Angular CLI und Erweiterungen
29.6.2
CI/CD-Integration
29.7
Fallstudien und Erfolgsgeschichten
29.7.1
Unternehmen, die auf Angular setzen
30
Hintergrundprozesse und Parallelität im modernen Web
30.1
Die Herausforderung langläufiger Berechnungen
30.2
Web Workers: Parallelität für das Web
30.2.1
Funktionsweise von Web Workers
30.2.2
Einschränkungen von Web Workers
30.3
Service Workers: Die Evolution zu PWAs
30.3.1
Was sind Service Workers?
30.3.2
Progressive Web Apps (PWAs): Das große Ganze
30.4
Die Verbindung zwischen den Konzepten
30.5
Praktisches Beispiel: Eine PWA mit Hintergrundverarbeitung
31
Zone.js: Das Herzstück der asynchronen Verarbeitung in Angular
31.1
Was ist Zone.js?
31.2
Die Entstehungsgeschichte von Zone.js
31.3
Wie funktioniert Zone.js?
31.4
NgZone: Die Angular-spezifische Implementierung
31.5
Zone.js in der Praxis
31.6
Leistungsoptimierung mit Zone.js
31.7
Zone.js und die Zukunft von Angular
31.8
Debugging mit Zone.js
31.9
Zone.js jenseits von Angular
32
Key Bindings in Angular-Anwendungen
32.1
Grundlegende Konzepte
32.2
Einfaches Event Binding
32.2.1
Praktisches Beispiel - Einfache Suche
32.3
HostListener Decorator
32.4
Benutzerdefinierte Direktiven für wiederverwendbare Key Bindings
32.5
Globaler Keyboard-Service
32.5.1
Verwendung des Keyboard-Services in einer Komponente:
32.6
Hilfskomponente zur Anzeige von Tastenkombinationen
32.7
Kontextbasierte Tastenkombinationen
32.7.1
Verwendung des kontextbasierten Keyboard-Services:
32.8
Integration mit Mousetrap-Bibliothek
32.8.1
Verwendung des Mousetrap-Services:
32.9
Zugänglichkeit (Accessibility) berücksichtigen
32.10
Best Practices für Key Bindings in Angular-Apps
33
Übersetzungen / Internationalization in Angular
33.1
Grundlagen der Internationalisierung
33.2
Angular i18n Konzepte
33.2.1
Kompilierungszeitbasierte Übersetzungen
33.2.2
Laufzeitbasierte Übersetzungen
33.3
Einrichtung der Internationalisierung in Angular
33.3.1
Installation der erforderlichen Pakete
33.3.2
Texte für Übersetzung markieren
33.3.3
Extrahieren der Übersetzungen
33.3.4
Übersetzungsdateien erstellen
33.3.5
Konfiguration für mehrere Sprachen
33.3.6
Builds erstellen
33.4
Moderne Ansätze ab Angular 17/18
33.4.1
Verbesserungen in
@angular/localize
33.4.2
Laufzeit-Übersetzungen mit Transloco
33.4.3
Verbesserte Lokalisierung in neueren Angular-Versionen
33.5
Fortgeschrittene Konzepte
33.5.1
Pluralisierung
33.5.2
Geschlecht-abhängige Übersetzungen
33.5.3
Verschachtelte Expressions
33.5.4
Richtlinien für RTL-Sprachen (Right-to-Left)
33.6
Bewährte Praktiken
33.7
Integration mit SSR (Server-Side Rendering)
34
Rendering-Konzepte in Angular: Von SSR bis Prerendering
34.1
Einführung in Rendering-Konzepte bei Angular
34.1.1
Client-Side Rendering (CSR)
34.1.2
Server-Side Rendering (SSR)
34.1.3
Prerendering
34.2
Vorteile fortschrittlicher Rendering-Strategien
34.2.1
Verbesserte Benutzererfahrung
34.2.2
Suchmaschinenoptimierung (SEO)
34.2.3
Performance-Optimierung
34.3
Die Evolution des Renderings in Angular
34.3.1
Angular 2-4: Frühe Server-Side Rendering mit Angular Universal
34.3.2
Angular 5-8: Verbesserungen an Angular Universal
34.3.3
Angular 9-10: Ivy Renderer und verbesserte Performance
34.3.4
Angular 11-12: Verbessertes SSR-Setup
34.3.5
Angular 13-14: Hydration und schnellere Builds
34.3.6
Angular 15-16: Einführung von Angular Hydration
34.3.7
Angular 17: Server-Side Rendering Revolution
34.3.8
Angular 18: Server-Side Rendering 2.0 und statisches Pre-Rendering
34.4
Angular Universal - SSR für Angular in der Praxis
34.4.1
Einrichtung von Angular Universal
34.4.2
Funktionsweise von Angular Universal
34.5
Implementierungsdetails und Best Practices
34.5.1
TransferState API für Datenaustausch
34.5.2
Plattformspezifischer Code
34.5.3
Domino für DOM-Manipulation auf dem Server
34.5.4
Umgang mit externen Bibliotheken
34.6
Hybride Rendering-Strategien
34.6.1
Statisches Prerendering
34.6.2
Incrementelle Static Regeneration (ISR)
34.6.3
Dynamic Rendering
34.7
Optimierung der Nutzererfahrung
34.7.1
Progressive Bootstrapping
34.7.2
Shell-Architektur
34.8
Debugging und Fehlerbehebung
34.8.1
Server-Logging
34.8.2
Häufige Fehler und ihre Lösungen
34.9
Leistungsmessung
34.9.1
Metrics
34.9.2
Tools
34.10
Integration mit anderen Angular-Funktionen
34.10.1
Angular Router
34.10.2
NgRx/Redux State Management
34.11
Deployment-Strategien
34.11.1
Node.js Server
34.11.2
Serverless Deployment
35
Debugging: Fehlersuche und -behebung in der Webentwicklung
35.1
Arten von Fehlern
35.1.1
Syntaxfehler
35.1.2
Laufzeitfehler (Runtime Errors)
35.1.3
Logikfehler
35.2
Browser-Entwicklertools
35.2.1
Chrome DevTools / Firefox Developer Tools
35.3
Debugging in der IDE
35.3.1
Integrierter Debugger
35.3.2
Statische Codeanalyse
35.3.3
Integrierte Terminals
35.3.4
Source Control Integration
35.4
Integration zwischen Browser und IDE
35.4.1
Browser-Debugging aus der IDE
35.4.2
Workflow-Beispiel (VS Code mit Chrome)
35.4.3
Browser-Extension-Debugging
35.5
Debugging-Techniken
35.5.1
Grundlegende Techniken
35.5.2
Fortgeschrittene Techniken
35.6
Debugging von asynchronem Code
35.6.1
Promises und async/await
35.6.2
Timeouts und Intervalle
35.6.3
Event-Listener
35.7
Performance-Debugging
35.7.1
Performance-Probleme identifizieren
35.7.2
Memory-Leaks finden
35.7.3
Render-Performance verbessern
35.8
Debugging in Produktionsumgebungen
35.8.1
Source Maps
35.8.2
Error Tracking
35.8.3
Remote Debugging
35.9
Best Practices für effektives Debugging
35.9.1
Methodisches Vorgehen
35.9.2
Tools und Techniken kombinieren
35.9.3
Debugging-freundlichen Code schreiben
35.9.4
Team-Debugging
36
Performance-Optimierung in Angular
36.1
Einleitung
36.2
Verständnis der Angular Performance-Metriken
36.3
Build-Optimierungen in Angular
36.4
Zoneless Change Detection
36.5
Signal-basierte Reaktivität für Performancegewinn
36.6
Hydration und SSR mit Angular
36.7
Deferrable Views für optimiertes Laden
36.8
Webpack und Esbuild Optimierungen
36.9
Web Workers für rechenintensive Aufgaben
36.10
Verbesserte OnPush-Strategie und Memoization
36.11
Angular DevTools und Performance-Profiling
36.12
Memory Management und Leak Prevention
36.13
Asset-Optimierung
36.14
Route-basierte Code-Splitting-Optimierungen
36.15
Standalone Components und leichtgewichtige Dependency Injection
37
Containerisierung einer Angular-Anwendung
37.1
Einführung in die Containerisierung
37.2
Containerisierung mit Docker
37.2.1
Vorbereitung der Angular-Anwendung
37.2.2
Multi-Stage Dockerfile erstellen
37.2.3
NGINX-Konfiguration
37.2.4
Docker-Image bauen und testen
37.2.5
Sicherheitsüberlegungen
37.3
Kubernetes-Deployment mit Helm
37.3.1
Einführung in Helm
37.3.2
Helm-Chart-Struktur erstellen
37.3.3
Chart.yaml anpassen
37.3.4
values.yaml konfigurieren
37.3.5
Deployment-Template anpassen
37.3.6
ConfigMap für runtime-Konfiguration
37.3.7
Service und Ingress
37.3.8
Helm-Chart testen und bereitstellen
37.4
Konfiguration der Angular-Anwendung für Containerumgebungen
37.4.1
Runtime-Konfiguration
37.4.2
Health-Checks
37.5
CI/CD-Integration
37.5.1
GitHub Actions Workflow
37.6
Überwachung und Logging
37.6.1
Prometheus Metriken
37.7
Best Practices
38
CI/CD für eine containerisierte Angular-Anwendung
38.1
Einführung in CI/CD für Angular-Projekte
38.2
CI/CD-Strategie und Workflow-Design
38.2.1
Pipeline-Architektur planen
38.2.2
Branching-Strategie
38.2.3
Umgebungen definieren
38.3
CI/CD mit GitLab CI
38.3.1
GitLab CI-Konfiguration
38.3.2
GitLab CI/CD Variablen
38.4
CI/CD mit GitHub Actions
38.4.1
Workflow-Konfiguration
38.4.2
GitHub Secrets und Umgebungen
38.5
CI/CD mit Azure DevOps
38.5.1
Pipeline-Konfiguration
38.5.2
Variablengruppen und Umgebungen
38.6
CI/CD auf Jenkins
38.6.1
Jenkinsfile konfigurieren
38.6.2
Jenkins Credentials und Plugins
38.7
Automatisierte Tests in CI/CD-Pipelines
38.7.1
Unit-Tests
38.7.2
End-to-End-Tests
38.7.3
Test-Abdeckung und Qualitätsmetriken
38.8
Konfigurationsmanagement für verschiedene Umgebungen
38.8.1
Angular-Umgebungsdateien
38.8.2
Anpassung der Angular-Build-Konfiguration
38.8.3
Runtime-Konfiguration mit Docker
38.9
Monitoring und Fehlerbehandlung
38.9.1
Anwendungsmonitoring
38.9.2
Protokollierung und Analyse
38.9.3
Alarme und Benachrichtigungen
38.10
Kontinuierliche Verbesserung der Pipeline
38.10.1
Pipeline-Metriken
38.10.2
Optimierung
38.11
Zusammenfassung und Bewertung
38.11.1
Bewertung Ihrer CI/CD-Pipeline
38.11.2
Ausblick und nächste Schritte
39
Component Deep Dive
39.1
Von Modulen zu Standalone Components
39.1.1
Die Evolution: Von NgModule zu Standalone
39.2
Der Component Decorator im Detail
39.2.1
Fokus:
standalone
und
imports
39.2.2
Dependency Injection und Provider
39.3
Der Provider-Baum: Wie Angular die Dependency Injection organisiert
39.3.1
Der Aufbau des Provider-Baums
39.3.2
Der Vergleich zu Spring Boot
39.4
Praktisches Beispiel: Aufbau einer modularen Anwendung mit Standalone Components
39.5
Gegenüberstellung: Modularer Ansatz vs. Standalone
39.5.1
Modularer Ansatz (traditionell)
39.5.2
Standalone Ansatz (modern)
39.6
Vorteile des Standalone-Ansatzes
39.7
Herausforderungen und Übergangsphase