Angular Signals - Reaktive State-Management in Angular

Seminarziel

Die Teilnehmer erlangen umfassende praktische Fähigkeiten im Einsatz von Angular Signals für moderne State-Management-Lösungen. Sie lernen Signals zu erstellen und zu verwalten, komplexe abgeleitete States mit computed() zu implementieren und Side Effects mit effects() zu handhaben. Der Fokus liegt auf praxisnahen Patterns für reale Anwendungsfälle, Performance-Optimierung und Integration in bestehende Angular-Architekturen. Nach dem Seminar können die Teilnehmer eigenständig Signal-basierte Anwendungen entwickeln, bestehende Codebasen migrieren und die Vorteile des reaktiven Programming-Modells vollständig ausschöpfen

Inhalt

• 1. Einführung in Angular Signals
  • Was sind Signals? : Revolutionäres Reaktivitätsmodell in Angular ab Version 16
  • Grundprinzipien : Reaktive Programmierung mit automatischem Change Detection
  • Vergleich zu bestehenden Lösungen : Unterschiede zu RxJS, BehaviorSubject und klassischem State Management
• 2. Signals Grundlagen und Syntax
  • Signal-Erstellung : signal(), computed(), effect() - Wann welche Funktion verwenden?
  • Signal-Werte lesen und schreiben : .()-Syntax vs. .set()/.update() Methoden
  • Typisierung und TypeScript : Vollständige Type Safety mit Generics in Signals
• 3. Computed Signals und abgeleitete Werte
  • Abgeleitete State : Automatische Berechnungen basierend auf anderen Signals
  • Performance-Optimierung : Vermeidung redundanter Berechnungen durch Caching
  • Komplexe Abhängigkeiten : Verschachtelte computed Signals und Best Practices
• 4. Effects und Seiteneffekte
  • Effect-Funktionen : Automatische Ausführung bei Signal-Änderungen
  • Use Cases für Effects : DOM-Manipulation, Logging, externe API-Calls
  • Effect-Lifecycle : Cleanup, Destroy und Memory Management
• 5. Integration in Komponenten
  • Signals in Templates : Direkte Verwendung mit {{ signal() }} Syntax
  • Change Detection Optimierung : OnPush Strategy mit Signals
  • Two-Way-Binding : Integration mit ngModel und Formularen
• 6. Signals mit Services und Dependency Injection
  • Global State Management : Signals in Services für app-weiten State
  • Service-Kommunikation : Signal-basierte Kommunikation zwischen Komponenten
  • Testing Strategies : Einfacheres Testing von Services mit Signals
• 7. Migration von bestehenden Lösungen
  • RxJS zu Signals : Migration von Observables und Subjects
  • NgRx/NGXS Replacement : Wann Signals State-Libraries ersetzen können
  • Hybride Ansätze : Kombination von Signals mit RxJS für komplexe Szenarien
• 8. Performance und Best Practices
  • Memory Management : Vermeidung von Memory Leaks in großen Applications
  • Lazy Evaluation : Optimierte Berechnungsstrategien für performante Apps
  • Debugging und DevTools : Debugging von Signal-basierten Applications
• 9. Praxisübung: Todo-App mit Signals
  • Aufgabe : Implementierung einer vollständigen Todo-Applikation mit Angular Signals
  • Bonus : Integration mit Backend-API und Offline-Fähigkeit