Advanced Angular Development (NGADV)

Eigenständige Komponenten: Konzepte und Migration

• Eigenständige Komponenten vs. Module
• Eigenständige Komponenten erstellen und bestehende Komponenten konvertieren
• Verstehen des Angular Bootstrapping-Prozesses
• app.config.ts & app.routes.ts
• Registrierung von Providern in app.config.ts
• Migration eines bestehenden Projekts zu eigenständigen Komponenten

Komponenten und Formulare im Detail

• Verwendung und Umstellung auf die Kontrollflusssyntax
• Aufgeschobenes Laden
• Eigenständige Richtlinien & Richtlinien Composition Api
• Inhalt Projektion
• HostBinding & HostListener
• Reaktive Formulare (FormGroup, Form Builder, FormControl, FormArray)
• Typisierte Formulare Nullbarkeit, NonNullableFormBuilder, GetRawValue
• Partielle Werte, optionale Steuerelemente, dynamische Gruppen und FormRecord
• Unified Form Events
• Kaskadierende Formularsteuerelemente
• Implementierung von benutzerdefinierten Steuerelementen mit ControlValueAccessor
• Validierung typisierter Formulare & benutzerdefinierte Validatoren
• Behandlung von FormErrors & ErrorStateMatcher

Beherrschung der reaktiven Programmierung mit RxJS

• Einführung in RxJS
• Observables, Beobachter & Anwendungsfälle
• Imperative vs. deklarative Reaktivität
• Daten- vs. Aktionsströme
• Maus- und DOM-Ereignisse als Observablen
• Subjekttypen und zustandsabhängige Dienste
• Abmeldung DestroyRef & takeUntilDestroyed
• Basis-Operatoren: Zuordnen, Filtern, Zusammenführen,
• Marble-Diagramme verstehen & Observables debuggen
• Marmor-Test von RxJS
• Kombinations- und Transformationsoperatoren
• Strategien zur Wiederholung und Fehlerbehandlung
• Implementieren und Testen von benutzerdefinierten beobachtbaren Operatoren

Beherrschung der Reaktivität mithilfe von Signalen

• Einführung in Signale (WritableSignal, Computed, Effekte)
• Signale vs. beobachtbare Grössen
• Signale und Beobachtungsdaten Interoperabilität
• Verschachtelung von Komponenten unter Verwendung von Signalen, Eingabe, Ausgabe und Modell
• Ansichtsabfragen: viewChild, -Children, contentChild, -Children
• Kommunikation zwischen Komponenten mit Ereignisbus-Muster
• Zonenlose Erkennung von Veränderungen anhand von Signalen

Erweiterte Zustandsverwaltung mit NgRx

• Übersicht State Management Patterns
• NgRx Classic vs. Signal Store
• Einführung in das klassische NgRx- und Redux-Muster
• Implementierung von NgRx Store, Reducers & Selectors mit createFeature
• Aktionen & createActionGroup
• Effekte, Fassaden, @ngrx/entity & @ngrx/data
• Erstellen eines Signalspeichers mit @ngrx/signals
• Nebenwirkungen von rxMethod
• Signalspeicher, Entitäts- und benutzerdefinierte Datendienste
• Implementierung und Verwendung von benutzerdefinierten Store-Funktionen

Erweitertes Routing und App-Initialisierung

• Dependency Injection in der Tiefe: Auflösungsmodifikatoren und Abhängigkeitsanbieter
• Verwendung von Constructor vs. inject für DI
• APP_INITIALIZER, Injektion & forwardRef
• Implementierung von globaler Fehlerbehandlung und Wiederholungsmustern
• Fliessendes Laden und dynamische Komponenten
• Vorladestrategien verwenden
• Binden von Router-Parametern an Komponenteneingänge
• Vorladen von Komponentendaten mit funktionalen Auflösern
• Funktionen zur Umleitung von Routen
• Funktionale Streckenposten und Abfangjäger
• Ansicht Transition Api
• Hilfsrouten: Häufige Anwendungsfälle
• Router-Animationen und Anker-Bildlauf
• Einführung in die visuelle Rückmeldung (Lade-, Speicher-, ...-Indikator)

Absicherung von Angular mit Cloud-Identitäten

• Zusammenfassung Jwt, OAuth 2.0 & OpenID Connect
• Token-basierte Authentifizierung in Angular mit NgRx
• Implementierung eines AuthModuls unter Verwendung eines Fassadendienstes, von Komponenten, Guards und Interceptoren
• Optimierung des Anwendungsablaufs für die Authentifizierung
• Authentifizierung mit Microsoft Entra ID

Erweiterte Tests mit Jasmine, Cypress und NgRx

• Einführung Angular Testing Tools (Jasmine, Karma, Jest & Cypress)
• Testen von Klassen, Pipes, Direktiven
• Testen von Diensten mit HttpClientTestingModule & HttpTestingController
• Spott gegen Spione
• Testen der Interaktion von Komponenten (Lesen, Schreiben, Senden, Eingaben)
• Prüfung komplexer Formulare
• Prüfung von Beobachtungswerten und Signalen
• Materialprüfung mit Komponenten-Kabelbäumen
• Asynchrones Testen von Komponenten (done, fakeAsync, waitForAsync)
• Komponenten Marmorprüfung
• NgRx testen: Mock Store, Mock Selectors, Reducers, Effekte, Facades
• Verwendung von Jest für Unit-Tests (Einrichtung, Änderungen in der Spezifikation, Snapshot-Tests)
• Einführung in die End-2-End-Prüfung mit Cypress
• Cypress-Komponententests

Wiederverwendbarkeit mit Bibliotheken, Nx- und Angular-Elementen

• Angular Building Blocks: Arbeitsbereich, Apps, Bibliotheken
• Wiederverwendbare Artefakte mit Angular-Bibliotheken
• Implementieren, Veröffentlichen und Konsumieren von Bibliotheken in / aus GitHub-Paketen
• Einführung in Nx Workspaces
• Wiederverwendbare Webkomponenten mit Angular-Elementen und eigenständigen Komponenten

Echtzeit-Mikro-Frontends & Progressive Web Apps

• Einführung in Micro-Frontends
• Echtzeit-Verbindung über Cloud-Ereignisse oder grosse Sprachmodelle Antworten
• Einführung in Progressive Web Apps
• Verstehen und Konfigurieren von Service Workern und Manifesten
• Installieren und Aktualisieren von Progressive Web Apps

Optimieren und Veröffentlichen von containerisierten Anwendungen

• Chrome Dev Tools und Lighthouse zur Leistungsoptimierung verwenden
• Verstehen und Verwenden von Seitenverläufen
• Analysieren und Optimieren von Paketen
• Protokollierung von NgRx an benutzerdefinierte Ziele mit Meta-Reduzierern
• Virtuelles und unendliches Scrollen
• Verständnis, Profiling und Optimierung der Angular Change Detection
• Verstehen und Optimieren der Angular Change Detection
• Einführung in die zonenlose Erkennung von Änderungen
• Optimieren von Bildern mit NgOptimizedImage
• Verwendung von Linting und Autoformatierung mit Prettier
• Barrierefreiheit A11y: Bewährte Praktiken & Linting
• Einführung in Server Side Rendering (SSR) und nicht-destruktive Hydration
• Konfigurieren von serverseitigem Rendering und Vor-Rendering
• Optionen für Konfigurationsmanagement und Konfigurationsinjektion
• Erstellen eines mehrstufigen Angular-Docker-Images
• Überschreiben der Konfiguration in Containern mit Umgebungsvariablen