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
Der praktische Einstieg
8.2
Interaktivität durch Datenbindung
8.3
Der Mechanismus dahinter
8.4
Komponenten-Hierarchien und Datenfluss
8.5
Komponenten-Lebenszyklus
8.6
Content Projection mit ng-content
8.7
Template-Referenzen und ViewChild
8.8
Change Detection Strategien
8.9
Eine praxisnahe Todo-Anwendung
8.10
Dynamische Komponenten
8.11
Komponenten-Kommunikation über Services
9
Property und Event Binding
9.1
Die Brücke zwischen Logik und Darstellung
9.2
Die Change Detection als Fundament
9.3
Vier Kategorien des Datenaustauschs
9.4
Property Binding im Detail
9.5
Interpolation versus Property Binding
9.6
Native DOM-Eigenschaften binden
9.7
Sicherheit durch Sanitization
9.8
Event Binding und Benutzerinteraktion
9.9
Das $event-Objekt analysieren
9.10
Event-Modifikatoren vereinfachen Code
9.11
Event-Bubbling und Propagation
9.12
Event-Delegation für Performance
9.13
Two-Way Binding mit ngModel
9.14
Eigene Two-Way Binding Komponenten
9.15
Attribute, Class und Style Binding
9.15.1
Attribute Binding
9.15.2
Class Binding
9.15.3
Style Binding
9.16
Direktiven als Binding-Targets
10
Direktiven
10.1
DOM-Manipulation durch Anweisungen
10.2
Drei Kategorien mit unterschiedlichen Rollen
10.3
Attribut-Direktiven im Einsatz
10.3.1
Dynamische CSS-Klassen mit ngClass
10.3.2
Inline-Styles mit ngStyle
10.3.3
Two-Way Binding mit ngModel
10.3.4
Eigene Attribut-Direktiven entwickeln
10.4
Struktur-Direktiven manipulieren das DOM
10.4.1
Bedingte Anzeige mit ngIf
10.4.2
Iteration mit ngFor
10.4.3
Mehrfachverzweigung mit ngSwitch
10.5
Modern Control Flow seit Angular 17
10.5.1
@if
ersetzt *ngIf
10.5.2
@for
ersetzt *ngFor
10.5.3
@switch
ersetzt ngSwitch
10.5.4
@defer
für Progressive Loading
10.6
Eigene Struktur-Direktiven erstellen
10.7
Signalbasierte Direktiven
10.8
Integration mit RxJS
11
RxJS: Reactive Programming für Angular
11.1
Das Problem der Asynchronität
11.2
Observable: Der Kern von RxJS
11.3
Creation Operators
11.4
Pipeable Operators
11.4.1
Transformation Operators
11.4.2
Filtering Operators
11.4.3
Combination Operators
11.5
Flattening Operators: Die kritischen Higher-Order Operators
11.5.1
switchMap: Cancel Previous
11.5.2
mergeMap: Parallel Execution
11.5.3
concatMap: Sequential Execution
11.5.4
exhaustMap: Ignore While Busy
11.6
Subjects: Multicast Observables
11.6.1
BehaviorSubject: Current Value
11.6.2
ReplaySubject: Replay History
11.7
Error Handling
11.7.1
catchError: Graceful Degradation
11.7.2
retry: Automatic Retry
11.8
Cold vs. Hot Observables
11.9
Unsubscription und Memory Leaks
11.10
Practical Patterns in Angular
11.10.1
Smart Search Implementation
11.10.2
State Management mit BehaviorSubject
11.10.3
Combining Multiple Data Sources
12
Change Detection: Synchronisation von State und View
12.1
Das fundamentale Problem
12.2
Zone.js: Automatische Trigger Detection
12.3
Der Change Detection Tree
12.4
Default Strategy: Check Alles
12.5
OnPush Strategy: Optimistic Updates
12.6
Input-Changes und Referenz-Equality
12.7
Events und Change Detection
12.8
AsyncPipe: Die intelligente Pipe
12.9
Manuelle Change Detection Control
12.9.1
detach und reattach
12.10
NgZone: Running Outside Angular
12.11
Signals: Die Zukunft der Reactivity
12.11.1
Signals mit OnPush
12.11.2
Signals vs. Observables
12.12
Immutability und Predictability
12.13
Performance-Patterns
12.13.1
TrackBy für NgFor
12.13.2
Virtual Scrolling für große Listen
12.14
Zoneless Angular
13
Lifecycle Hooks: Kontrolle über den Component-Lebenszyklus
13.1
Das Component-Lifecycle-Problem
13.2
Constructor: Nicht ein Lifecycle Hook
13.3
ngOnChanges: Input-Property Tracking
13.4
ngOnInit: Der primäre Initialization Hook
13.5
ngDoCheck: Custom Change Detection
13.6
ngAfterContentInit: Content Projection verfügbar
13.7
ngAfterContentChecked: Nach Content Change Detection
13.8
ngAfterViewInit: View ist fertig rendered
13.9
ngAfterViewChecked: Nach View Change Detection
13.10
ngOnDestroy: Cleanup und Resource-Freeing
13.11
Signals und Effects: Die neue Reactivity
13.12
Lifecycle-Timing und Reihenfolge
13.13
Common Patterns und Anti-Patterns
13.13.1
Pattern: Lazy-Loading mit ngOnInit
13.13.2
Anti-Pattern: Heavy Logic in ngDoCheck
13.13.3
Anti-Pattern: Subscription ohne Cleanup
14
Forms in Angular
14.1
Zwei Paradigmen für Formulare
14.2
Template-driven Forms verstehen
14.2.1
CSS-Klassen für visuelles Feedback
14.2.2
Verschachtelte Forms mit ngModelGroup
14.3
Reactive Forms für explizite Kontrolle
14.3.1
Reaktive Updates und Observables
14.3.2
Werte programmatisch setzen
14.3.3
Verschachtelte Forms mit FormGroup
14.4
Dynamische Forms mit FormArray
14.5
Validierung verstehen
14.5.1
Cross-Field Validation
14.5.2
Asynchrone Validation
14.6
Form Submission und HTTP-Integration
14.7
TypeScript-Integration und Type Safety
14.8
Patterns für wiederverwendbare Forms
15
Pipes für Datentransformation
15.1
Transformation direkt im Template
15.2
Eingebaute Pipes für häufige Szenarien
15.2.1
Text-Transformation
15.2.2
Zahlen-Formatierung
15.2.3
Datum und Zeit
15.2.4
Collections und Strukturen
15.2.5
Asynchrone Werte mit AsyncPipe
15.3
Eigene Pipes entwickeln
15.4
Pure versus Impure Pipes
15.5
Pipes mit Dependencies
15.6
Testing von Pipes
15.7
Pipes in modernem Angular
15.8
Praktische Patterns
16
Services und Dependency Injection
16.1
Die Trennung von Zuständigkeiten
16.2
Dependency Injection verstehen
16.3
Service-Erstellung und Konfiguration
16.3.1
Provider-Scopes verstehen
16.4
Services in Komponenten verwenden
16.4.1
Die moderne inject() Funktion
16.5
Komponenten-spezifische Service-Instanzen
16.6
HTTP-Services und API-Kommunikation
16.7
Service-zu-Service-Kommunikation
16.8
Reaktive Services mit RxJS
16.9
Signal-basierte Services
16.10
Testing von Services
16.11
Fortgeschrittene Patterns
16.11.1
Factory Providers
16.11.2
Value Providers
16.11.3
Multi-Providers
17
Server Kommunikation in Angular
17.1
Einführung
17.2
Das HttpClientModule und Standalone Components
17.2.1
Traditioneller Ansatz (immer noch unterstützt)
17.2.2
Moderner Standalone-Ansatz (empfohlen)
17.3
REST-Operationen mit HttpClient
17.3.1
GET-Anfragen
17.3.2
Retry- und Fallback-Strategien
17.3.3
POST-Anfragen
17.3.4
PUT und PATCH-Anfragen
17.3.5
DELETE-Anfragen
17.4
Angular Signals API für reaktive Server-Kommunikation
17.4.1
Verwendung in einer Komponente
17.5
Behandlung von Observables und fortgeschrittene RxJS-Techniken
17.5.1
Grundlegende Subscription
17.5.2
Verwendung von async Pipe (empfohlen)
17.5.3
RxJS-Operatoren für erweiterte Szenarien
17.6
Error Handling und Retry-Mechanismen
17.7
CORS (Cross-Origin Resource Sharing) in Angular
17.7.1
CORS-Grundlagen für Angular-Entwickler
17.7.2
CORS-Behandlung in Angular-Services
17.7.3
Angular Proxy-Konfiguration für Entwicklung
17.7.4
Erweiterte Proxy-Konfiguration
17.7.5
Environment-spezifische CORS-Konfiguration
17.7.6
CORS-bewusster HTTP-Service
17.7.7
CORS-Debugging und -Monitoring
17.7.8
Best Practices für CORS in Angular
17.8
Interceptors für Headers, Authentication und Logging
17.8.1
Registrieren von Interceptors
17.9
Fortgeschrittene HTTP-Features in Angular
17.9.1
Progress Events für Up- und Downloads
17.9.2
Response Types und Options
17.9.3
HttpContext für kontextabhängige Request-Konfiguration
17.10
WebSockets in Angular
17.10.1
SignalR-Integration für Echtzeit-Kommunikation
17.11
Best Practices für Angular Server-Kommunikation
17.11.1
Modellierung von Datentypen mit TypeScript-Interfaces
17.11.2
Service-Modularisierung und Strukturierung
17.11.3
Caching-Strategien mit HTTP-Request-Caching
18
Routing und Navigation
18.1
Single Page Applications verstehen
18.2
Router-Konfiguration und Setup
18.3
Router Outlet und Navigation
18.4
Route-Parameter extrahieren
18.5
Route Guards für Zugriffskontrolle
18.6
Lazy Loading und Code Splitting
18.6.1
Preloading-Strategien
18.7
Child Routes und verschachtelte Navigation
18.8
Resolver für Daten-Preloading
18.9
Signal-Integration für reaktives Routing
18.10
Typed Routes für Typsicherheit
18.11
Router Events für Observability
18.12
Hash-basiertes vs. HTML5 Routing
18.13
Route Reuse Strategy
19
REST APIs in Angular
19.1
Grundlagen der REST-Kommunikation
19.2
HttpClient in Angular
19.2.1
Einrichtung des HttpClient
19.3
HTTP-Methoden und ihre Anwendung
19.3.1
GET-Anfragen
19.3.2
POST-Anfragen
19.3.3
PUT und PATCH-Anfragen
19.3.4
DELETE-Anfragen
19.4
Erweiterte Funktionen
19.4.1
Request-Konfiguration und Parameter
19.4.2
Fehlerbehandlung
19.4.3
Abbruch von Anfragen
19.5
HTTP-Interceptoren
19.5.1
Authentifizierungs-Interceptor
19.5.2
Registrierung des Interceptors
19.6
Fortgeschrittene Konzepte
19.6.1
Reaktive Programmierung mit RxJS
19.6.2
Cache-Implementierung
19.6.3
GraphQL mit Apollo Client in Angular
19.7
Neuerungen in Angular 17+
19.7.1
Signal-basierte HTTP-Anfragen (Angular 17+)
19.7.2
Verbesserte HTTP-Konfiguration (Angular 18)
19.8
Best Practices für REST in Angular
19.8.1
Strukturierung von API-Services
19.8.2
Datenzugriff in Komponenten
20
OpenAPI und API-Vertragsmanagement in Angular
20.1
Was ist OpenAPI?
20.2
Contract-First vs. Code-First
20.2.1
Contract-First Ansatz
20.2.2
Code-First Ansatz
20.3
Der Vertrag als Single Source of Truth
20.3.1
Verbesserte Kommunikation
20.3.2
Automatisierte Codegenerierung
20.3.3
Präzise Dokumentation
20.3.4
Typsicherheit
20.4
Entkopplung durch Protokollebene
20.4.1
Technologieunabhängigkeit
20.4.2
Evolutionäre Entwicklung
20.4.3
Versionierung
20.4.4
Testbarkeit
20.5
OpenAPI-Integration in Angular-Projekten
20.5.1
Einrichtung mit npm-Skripten
20.5.2
Installation des openapi-generator
20.6
Umfangreiches Beispiel: Implementierung einer Contract-First API
20.6.1
Schritt 1: Erstellen der OpenAPI-Spezifikation
20.6.2
Schritt 2: Generierung des API-Clients
20.6.3
Schritt 3: Erstellen eines API-Service-Wrappers
20.6.4
Schritt 4: Verwendung in Angular-Komponenten
20.6.5
Schritt 5: Einrichten eines Mock-Servers für die Entwicklung
20.6.6
Schritt 6: Konfiguration der API-Basis-URL basierend auf der Umgebung
20.7
Vorteile der OpenAPI-Integration in Angular
20.7.1
Typsicherheit und Intellisense
20.7.2
Automatische Aktualisierung bei API-Änderungen
20.7.3
Konsistente Fehlerbehandlung
20.7.4
Einfache Mocks für Tests und Entwicklung
20.8
Best Practices für OpenAPI in Angular-Projekten
20.8.1
Versionierung der API-Spezifikation
20.8.2
Integration in CI/CD-Pipelines
20.8.3
Strikte Validierung der OpenAPI-Spezifikation
20.8.4
Zentrale API-Service-Schicht
20.8.5
Staging-spezifische API-Konfigurationen
20.8.6
Mock-Server für Entwicklung und Tests
20.8.7
Regelmäßige Aktualisierung der API-Dependencies
20.8.8
API-Versionen-Management
20.8.9
Fehlerbehandlung und -modellierung
20.8.10
Dokumentation erstellen und pflegen
20.8.11
API-Änderungen testen
20.8.12
API-Breaking-Changes managen
21
Authentifizierung in Angular
21.1
Moderne Authentifizierungsstrategien
21.2
Implementierung in Angular
21.2.1
Authentication Service mit modernem State Management
21.2.2
Moderner Auth Interceptor mit automatischem Token Refresh
21.2.3
Moderne Route Guards mit Standalone API
21.2.4
Verwendung im Standalone-Setup
21.2.5
Login-Komponente mit modernem Angular Syntax
21.3
CSRF Protection in Angular
21.3.1
CSRF-Grundlagen für Angular-Entwickler
21.3.2
Angular’s eingebauter CSRF-Schutz
21.3.3
CSRF-Token-Handling in Services
21.3.4
CSRF-Schutz in Authentication-Flows
21.3.5
CSRF-bewusste Interceptors
21.3.6
CSRF-Schutz für File Uploads
21.3.7
CSRF-Schutz mit Angular Forms
21.3.8
Testing von CSRF-Schutz
21.3.9
Best Practices für CSRF-Schutz in Angular
21.4
Sicherheitshinweise für moderne Angular-Anwendungen
22
State Management in Angular
22.1
Einführung
22.2
State Management Konzepte
22.2.1
Single Source of Truth
22.2.2
Unveränderlichkeit (Immutability)
22.2.3
Unidirektionaler Datenfluss
22.3
State Management Lösungen in Angular
22.3.1
Komponentenbasiertes State Management
22.3.2
Services als State Container
22.3.3
NgRx - Redux-Pattern für Angular
22.3.4
NgRx Component Store (ab Angular 11)
22.3.5
Signals in Angular für reaktives State Management
22.4
RxState - Ein leichtgewichtiger State Management Ansatz
22.5
Asynchrones State Management
22.5.1
Asynchrones State Management mit RxJS
22.5.2
Asynchrones State Management mit NgRx Effects
22.5.3
Asynchrones State Management mit Signals
22.5.4
Caching und Invalidierung asynchroner Daten
22.5.5
Strategien für die Optimierung der Leistung bei asynchronem State
22.6
Richtlinien zur Auswahl des richtigen State Management Ansatzes
22.7
Best Practices
23
WebSockets in Angular - Kompakter Leitfaden
23.1
Grundlagen von WebSockets
23.2
1. Native WebSocket-API in Angular
23.3
2. RxJS mit WebSockets
23.4
3. Socket.IO mit Angular
23.5
4. SignalR für .NET-Backends
23.6
5. WebSockets mit Angular Signals (Angular 16+)
23.7
Sicherheitsaspekte bei WebSockets
23.8
Best Practices
23.9
Moderne WebSocket-Features in Angular
23.10
Beispiel einer modernen WebSocket-Implementierung mit Signals
24
Testing in Angular
24.1
Die Testing-Pyramide verstehen
24.2
TestBed: Die Testumgebung
24.2.1
Fixture und Change Detection
24.2.2
Testing mit Standalone Components
24.3
Services testen
24.4
Komponenten mit Dependencies testen
24.5
Asynchrones Testen
24.5.1
fakeAsync und tick
24.5.2
async und whenStable
24.5.3
done Callback
24.6
Input und Output testen
24.6.1
@Input
testen
24.6.2
@Output
testen
24.7
Forms testen
24.7.1
Reactive Forms testen
24.7.2
Template-driven Forms testen
24.8
Direktiven testen
24.8.1
Attribut-Direktive testen
24.8.2
Struktur-Direktive testen
24.9
Pipes testen
24.10
Routing testen
24.10.1
Navigation testen
24.10.2
Route Guards testen
25
Jasmine und Karma für Angular-Tests
25.1
Das Testing-Ökosystem verstehen
25.2
Jasmine: Behavior-Driven Testing
25.3
Test-Organisation und Struktur
25.3.1
Setup und Teardown-Hooks
25.4
Matchers für präzise Assertions
25.5
Asynchrone Tests meistern
25.6
Spies für Isolation und Mocking
25.7
Benutzerdefinierte Matchers
25.8
Test-Fokussierung und Filtering
25.9
Karma: Der Test-Orchestrator
25.10
Karma-Konfiguration verstehen
25.10.1
Browser-Konfiguration für verschiedene Szenarien
25.10.2
Coverage-Reports und Thresholds
25.11
Karma in der Praxis
25.11.1
Test-Debugging im Browser
25.11.2
CI/CD-Integration
25.12
Troubleshooting häufiger Probleme
25.13
Alternativen zum Standard-Stack
26
Code Coverage in Angular-Tests
26.1
Grundlagen der Code Coverage
26.2
Coverage-Messung in Angular
26.3
Konfiguration der Coverage-Anforderungen
26.4
Die begrenzte Aussagekraft von Coverage-Prozentwerten
26.4.1
Warum 100% Coverage nicht ausreicht
26.4.2
Der “Coverage-Illusion”-Effekt
26.5
Die Bedeutung von Boundary Testing
26.5.1
Innerhalb und außerhalb der Grenzen testen
26.5.2
Äquivalenzklassen identifizieren
26.6
Integration von Code-Coverage in CI/CD-Pipelines
26.7
Ausgewogener Ansatz zur Code Coverage
26.8
Die Rolle von Coverage in einer umfassenden Teststrategie
27
Barrierefreiheit: Grundlagen und Umsetzung
27.1
Einführung in die Barrierefreiheit
27.2
Zielgruppen der Barrierefreiheit
27.3
Barrierefreiheit in verschiedenen Bereichen
27.3.1
Bauliche Barrierefreiheit
27.3.2
Digitale Barrierefreiheit
27.3.3
Kommunikative Barrierefreiheit
27.3.4
Barrierefreiheit im Verkehr
27.4
Gesetzliche Grundlagen
27.5
Umsetzung von Barrierefreiheit
27.5.1
Prinzip des Universal Design
27.5.2
Praktische Maßnahmen
27.6
Herausforderungen und Lösungsansätze
27.7
Barrierefreiheit in Angular-Anwendungen
27.7.1
Grundlegende Konzepte für barrierefreie Angular-Anwendungen
27.7.2
Angular-spezifische Tools und Bibliotheken
27.7.3
Testen der Barrierefreiheit in Angular
27.7.4
Best Practices für Angular-Entwickler
27.7.5
Häufige Herausforderungen und Lösungen
27.8
Best Practices und Beispiele
27.8.1
Erfolgreiche Umsetzungsbeispiele
27.8.2
Checklisten zur Umsetzung
27.9
Weiterführende Ressourcen
28
Angular im Enterprise Bereich
28.1
Einleitung
28.2
Warum Angular für Enterprise-Anwendungen?
28.2.1
Typsicherheit durch TypeScript
28.2.2
Architektonische Konsistenz
28.2.3
Skalierbarkeit
28.2.4
Langfristige Unterstützung und klarer Releasezyklus
28.3
Enterprise-spezifische Features und Best Practices
28.3.1
Sicherheit
28.3.2
Internationalisierung (i18n)
28.3.3
Barrierefreiheit (Accessibility)
28.3.4
Testing
28.4
Architekturmuster für Enterprise-Anwendungen
28.4.1
Micro Frontends
28.4.2
State Management
28.4.3
Backend-Kommunikation
28.5
Herausforderungen und Lösungsansätze
28.5.1
Performance-Optimierung
28.5.2
Build-Optimierung
28.5.3
Wartung großer Codebases
28.6
Tooling und Entwicklungsumgebung
28.6.1
Angular CLI und Erweiterungen
28.6.2
CI/CD-Integration
28.7
Fallstudien und Erfolgsgeschichten
28.7.1
Unternehmen, die auf Angular setzen
29
Hintergrundprozesse und Parallelität im modernen Web
29.1
Die Herausforderung langläufiger Berechnungen
29.2
Web Workers: Parallelität für das Web
29.2.1
Funktionsweise von Web Workers
29.2.2
Einschränkungen von Web Workers
29.3
Service Workers: Die Evolution zu PWAs
29.3.1
Was sind Service Workers?
29.3.2
Progressive Web Apps (PWAs): Das große Ganze
29.4
Die Verbindung zwischen den Konzepten
29.5
Praktisches Beispiel: Eine PWA mit Hintergrundverarbeitung
30
Zone.js: Das Herzstück der asynchronen Verarbeitung in Angular
30.1
Was ist Zone.js?
30.2
Die Entstehungsgeschichte von Zone.js
30.3
Wie funktioniert Zone.js?
30.4
NgZone: Die Angular-spezifische Implementierung
30.5
Zone.js in der Praxis
30.6
Leistungsoptimierung mit Zone.js
30.7
Zone.js und die Zukunft von Angular
30.8
Debugging mit Zone.js
30.9
Zone.js jenseits von Angular
31
Key Bindings in Angular-Anwendungen
31.1
Grundlegende Konzepte
31.2
Einfaches Event Binding
31.2.1
Praktisches Beispiel - Einfache Suche
31.3
HostListener Decorator
31.4
Benutzerdefinierte Direktiven für wiederverwendbare Key Bindings
31.5
Globaler Keyboard-Service
31.5.1
Verwendung des Keyboard-Services in einer Komponente:
31.6
Hilfskomponente zur Anzeige von Tastenkombinationen
31.7
Kontextbasierte Tastenkombinationen
31.7.1
Verwendung des kontextbasierten Keyboard-Services:
31.8
Integration mit Mousetrap-Bibliothek
31.8.1
Verwendung des Mousetrap-Services:
31.9
Zugänglichkeit (Accessibility) berücksichtigen
31.10
Best Practices für Key Bindings in Angular-Apps
32
Übersetzungen / Internationalization in Angular
32.1
Grundlagen der Internationalisierung
32.2
Angular i18n Konzepte
32.2.1
Kompilierungszeitbasierte Übersetzungen
32.2.2
Laufzeitbasierte Übersetzungen
32.3
Einrichtung der Internationalisierung in Angular
32.3.1
Installation der erforderlichen Pakete
32.3.2
Texte für Übersetzung markieren
32.3.3
Extrahieren der Übersetzungen
32.3.4
Übersetzungsdateien erstellen
32.3.5
Konfiguration für mehrere Sprachen
32.3.6
Builds erstellen
32.4
Moderne Ansätze ab Angular 17/18
32.4.1
Verbesserungen in
@angular/localize
32.4.2
Laufzeit-Übersetzungen mit Transloco
32.4.3
Verbesserte Lokalisierung in neueren Angular-Versionen
32.5
Fortgeschrittene Konzepte
32.5.1
Pluralisierung
32.5.2
Geschlecht-abhängige Übersetzungen
32.5.3
Verschachtelte Expressions
32.5.4
Richtlinien für RTL-Sprachen (Right-to-Left)
32.6
Bewährte Praktiken
32.7
Integration mit SSR (Server-Side Rendering)
33
Rendering-Konzepte in Angular: Von SSR bis Prerendering
33.1
Einführung in Rendering-Konzepte bei Angular
33.1.1
Client-Side Rendering (CSR)
33.1.2
Server-Side Rendering (SSR)
33.1.3
Prerendering
33.2
Vorteile fortschrittlicher Rendering-Strategien
33.2.1
Verbesserte Benutzererfahrung
33.2.2
Suchmaschinenoptimierung (SEO)
33.2.3
Performance-Optimierung
33.3
Die Evolution des Renderings in Angular
33.3.1
Angular 2-4: Frühe Server-Side Rendering mit Angular Universal
33.3.2
Angular 5-8: Verbesserungen an Angular Universal
33.3.3
Angular 9-10: Ivy Renderer und verbesserte Performance
33.3.4
Angular 11-12: Verbessertes SSR-Setup
33.3.5
Angular 13-14: Hydration und schnellere Builds
33.3.6
Angular 15-16: Einführung von Angular Hydration
33.3.7
Angular 17: Server-Side Rendering Revolution
33.3.8
Angular 18: Server-Side Rendering 2.0 und statisches Pre-Rendering
33.4
Angular Universal - SSR für Angular in der Praxis
33.4.1
Einrichtung von Angular Universal
33.4.2
Funktionsweise von Angular Universal
33.5
Implementierungsdetails und Best Practices
33.5.1
TransferState API für Datenaustausch
33.5.2
Plattformspezifischer Code
33.5.3
Domino für DOM-Manipulation auf dem Server
33.5.4
Umgang mit externen Bibliotheken
33.6
Hybride Rendering-Strategien
33.6.1
Statisches Prerendering
33.6.2
Incrementelle Static Regeneration (ISR)
33.6.3
Dynamic Rendering
33.7
Optimierung der Nutzererfahrung
33.7.1
Progressive Bootstrapping
33.7.2
Shell-Architektur
33.8
Debugging und Fehlerbehebung
33.8.1
Server-Logging
33.8.2
Häufige Fehler und ihre Lösungen
33.9
Leistungsmessung
33.9.1
Metrics
33.9.2
Tools
33.10
Integration mit anderen Angular-Funktionen
33.10.1
Angular Router
33.10.2
NgRx/Redux State Management
33.11
Deployment-Strategien
33.11.1
Node.js Server
33.11.2
Serverless Deployment
34
Debugging: Fehlersuche und -behebung in der Webentwicklung
34.1
Arten von Fehlern
34.1.1
Syntaxfehler
34.1.2
Laufzeitfehler (Runtime Errors)
34.1.3
Logikfehler
34.2
Browser-Entwicklertools
34.2.1
Chrome DevTools / Firefox Developer Tools
34.3
Debugging in der IDE
34.3.1
Integrierter Debugger
34.3.2
Statische Codeanalyse
34.3.3
Integrierte Terminals
34.3.4
Source Control Integration
34.4
Integration zwischen Browser und IDE
34.4.1
Browser-Debugging aus der IDE
34.4.2
Workflow-Beispiel (VS Code mit Chrome)
34.4.3
Browser-Extension-Debugging
34.5
Debugging-Techniken
34.5.1
Grundlegende Techniken
34.5.2
Fortgeschrittene Techniken
34.6
Debugging von asynchronem Code
34.6.1
Promises und async/await
34.6.2
Timeouts und Intervalle
34.6.3
Event-Listener
34.7
Performance-Debugging
34.7.1
Performance-Probleme identifizieren
34.7.2
Memory-Leaks finden
34.7.3
Render-Performance verbessern
34.8
Debugging in Produktionsumgebungen
34.8.1
Source Maps
34.8.2
Error Tracking
34.8.3
Remote Debugging
34.9
Best Practices für effektives Debugging
34.9.1
Methodisches Vorgehen
34.9.2
Tools und Techniken kombinieren
34.9.3
Debugging-freundlichen Code schreiben
34.9.4
Team-Debugging
35
Performance-Optimierung in Angular
35.1
Einleitung
35.2
Verständnis der Angular Performance-Metriken
35.3
Build-Optimierungen in Angular
35.4
Zoneless Change Detection
35.5
Signal-basierte Reaktivität für Performancegewinn
35.6
Hydration und SSR mit Angular
35.7
Deferrable Views für optimiertes Laden
35.8
Webpack und Esbuild Optimierungen
35.9
Web Workers für rechenintensive Aufgaben
35.10
Verbesserte OnPush-Strategie und Memoization
35.11
Angular DevTools und Performance-Profiling
35.12
Memory Management und Leak Prevention
35.13
Asset-Optimierung
35.14
Route-basierte Code-Splitting-Optimierungen
35.15
Standalone Components und leichtgewichtige Dependency Injection
36
Containerisierung einer Angular-Anwendung
36.1
Einführung in die Containerisierung
36.2
Containerisierung mit Docker
36.2.1
Vorbereitung der Angular-Anwendung
36.2.2
Multi-Stage Dockerfile erstellen
36.2.3
NGINX-Konfiguration
36.2.4
Docker-Image bauen und testen
36.2.5
Sicherheitsüberlegungen
36.3
Kubernetes-Deployment mit Helm
36.3.1
Einführung in Helm
36.3.2
Helm-Chart-Struktur erstellen
36.3.3
Chart.yaml anpassen
36.3.4
values.yaml konfigurieren
36.3.5
Deployment-Template anpassen
36.3.6
ConfigMap für runtime-Konfiguration
36.3.7
Service und Ingress
36.3.8
Helm-Chart testen und bereitstellen
36.4
Konfiguration der Angular-Anwendung für Containerumgebungen
36.4.1
Runtime-Konfiguration
36.4.2
Health-Checks
36.5
CI/CD-Integration
36.5.1
GitHub Actions Workflow
36.6
Überwachung und Logging
36.6.1
Prometheus Metriken
36.7
Best Practices
37
CI/CD für eine containerisierte Angular-Anwendung
37.1
Einführung in CI/CD für Angular-Projekte
37.2
CI/CD-Strategie und Workflow-Design
37.2.1
Pipeline-Architektur planen
37.2.2
Branching-Strategie
37.2.3
Umgebungen definieren
37.3
CI/CD mit GitLab CI
37.3.1
GitLab CI-Konfiguration
37.3.2
GitLab CI/CD Variablen
37.4
CI/CD mit GitHub Actions
37.4.1
Workflow-Konfiguration
37.4.2
GitHub Secrets und Umgebungen
37.5
CI/CD mit Azure DevOps
37.5.1
Pipeline-Konfiguration
37.5.2
Variablengruppen und Umgebungen
37.6
CI/CD auf Jenkins
37.6.1
Jenkinsfile konfigurieren
37.6.2
Jenkins Credentials und Plugins
37.7
Automatisierte Tests in CI/CD-Pipelines
37.7.1
Unit-Tests
37.7.2
End-to-End-Tests
37.7.3
Test-Abdeckung und Qualitätsmetriken
37.8
Konfigurationsmanagement für verschiedene Umgebungen
37.8.1
Angular-Umgebungsdateien
37.8.2
Anpassung der Angular-Build-Konfiguration
37.8.3
Runtime-Konfiguration mit Docker
37.9
Monitoring und Fehlerbehandlung
37.9.1
Anwendungsmonitoring
37.9.2
Protokollierung und Analyse
37.9.3
Alarme und Benachrichtigungen
37.10
Kontinuierliche Verbesserung der Pipeline
37.10.1
Pipeline-Metriken
37.10.2
Optimierung
37.11
Zusammenfassung und Bewertung
37.11.1
Bewertung Ihrer CI/CD-Pipeline
37.11.2
Ausblick und nächste Schritte
38
Component Deep Dive
38.1
Von Modulen zu Standalone Components
38.1.1
Die Evolution: Von NgModule zu Standalone
38.2
Der Component Decorator im Detail
38.2.1
Fokus:
standalone
und
imports
38.2.2
Dependency Injection und Provider
38.3
Der Provider-Baum: Wie Angular die Dependency Injection organisiert
38.3.1
Der Aufbau des Provider-Baums
38.3.2
Der Vergleich zu Spring Boot
38.4
Praktisches Beispiel: Aufbau einer modularen Anwendung mit Standalone Components
38.5
Gegenüberstellung: Modularer Ansatz vs. Standalone
38.5.1
Modularer Ansatz (traditionell)
38.5.2
Standalone Ansatz (modern)
38.6
Vorteile des Standalone-Ansatzes
38.7
Herausforderungen und Übergangsphase