Reaktive Programmierung für Angular-Entwickler mit RxJS und NgRx

Seminarziel

Am Ende des Seminars sind die Teilnehmenden in der Lage, Angular, RxJS und NgRx effektiv zu installieren, zu konfigurieren und zu nutzen. Sie lernen, wie sie reaktive Anwendungen entwickeln, Datenströme verwalten und komplexe Operators nutzen können.

Inhalt

• Einführung in reaktive Programmierung
  • Überblick und Konzepte: Erklärung, was reaktive Programmierung ist, ihre Hauptmerkmale und die Vorteile der Nutzung in modernen Webanwendungen.
  • Anwendungsbereiche: Diskussion der typischen Anwendungsfälle der reaktiven Programmierung, insbesondere in der Angular-Entwicklung.
• Einführung in Angular und RxJS
  • Überblick und Funktionen: Einführung in Angular und RxJS, die Hauptmerkmale und Vorteile der Nutzung in der Webentwicklung.
  • Installation und Setup: Schritt-für-Schritt-Anleitung zur Installation von Angular und RxJS sowie grundlegende Einrichtung eines Angular-Projekts.
• Grundlegende Konzepte von RxJS in Angular
  • Observable und Observer: Einführung in die Konzepte von Observables und Observers in RxJS, einschließlich der Erstellung und Nutzung.
  • Subjects und BehaviorSubjects: Erklärung der verschiedenen Arten von Subjects und deren Verwendung in Angular.
• RxJS Operators in Angular
  • Grundlegende Operators: Einführung in grundlegende RxJS Operators wie map, filter, flatMap und merge.
  • Transformation und Kombination: Nutzung von Operators zur Transformation und Kombination von Datenströmen in Angular-Anwendungen.
• Erstellen einfacher reaktiver Anwendungen
  • Erstes Projekt: Anleitung zur Erstellung einer einfachen reaktiven Anwendung mit Angular und RxJS, z.B. eine To-Do-Liste oder eine einfache Wetter-App.
  • Datenbindung: Einführung in die Datenbindung zwischen UI-Elementen und Observables.
• Erweiterte RxJS Operators
  • Filter- und Bedingungsoperators: Nutzung von Operators wie distinctUntilChanged, take, skip und debounce.
  • Error Handling: Techniken zur Fehlerbehandlung in RxJS, einschließlich catchError und retry.
• Reaktive Formularverarbeitung
  • Reactive Forms: Einführung in die Erstellung und Nutzung von reaktiven Formularen in Angular.
  • Formularvalidierung: Implementierung von Formularvalidierungen mit RxJS und Angular Reactive Forms.
• State Management mit NgRx
  • Einführung in NgRx: Nutzung von NgRx für das State Management in Angular-Anwendungen.
  • Store und Effects: Implementierung von State Management mit dem NgRx Store und Effects.
• Netzwerkprogrammierung mit RxJS und Angular
  • HTTP-Client und RxJS: Erstellung von Netzwerkanfragen mit dem Angular HTTP-Client und RxJS.
  • Datenparsing: Parsing von JSON-Daten und deren Bindung an UI-Elemente.
• Fallstudie 1: Reaktive Nachrichten-App
  • Problemstellung: Bedarf an einer App zur Echtzeit-Kommunikation mit Push-Benachrichtigungen.
  • Lösung: Nutzung von Angular und RxJS zur Implementierung der Echtzeit-Datenbindung und -Aktualisierung.
  • Ergebnis: Eine benutzerfreundliche Nachrichten-App, die nahtlose Echtzeit-Kommunikation ermöglicht.
• Fallstudie 2: Finanz-Dashboard
  • Problemstellung: Bedarf an einer App zur Anzeige von Echtzeit-Finanzdaten und -Charts.
  • Lösung: Implementierung eines reaktiven Dashboards mit Angular und RxJS zur Anzeige und Aktualisierung von Finanzdaten in Echtzeit.
  • Ergebnis: Ein interaktives Dashboard, das Echtzeit-Einblicke in Finanzdaten bietet und die Benutzerinteraktion verbessert.
• Fallstudie 3: Reaktive Formularvalidierung
  • Problemstellung: Bedarf an einer App zur dynamischen Validierung von Benutzereingaben in Formularen.
  • Lösung: Nutzung von Angular Reactive Forms und RxJS zur Implementierung einer reaktiven Formularvalidierung mit sofortigem Feedback.
  • Ergebnis: Verbesserte Benutzerfreundlichkeit durch sofortige Validierung und Fehleranzeigen.