Angular 17 Schulung

Einführung in Angular 17

• Was ist Angular?
• Angular vs. React vs. Vue
• Überblick über die Funktionen und die Architektur von Angular 17
• Einrichten der Entwicklungsumgebung

Einstieg

• Erstellen eines neuen Angular-17-Projekts mit der Angular CLI
• Untersuchen der Projektstruktur und der Dateien
• Ausführen und Bereitstellen der Anwendung
• Anzeigen von Daten mittels Interpolation und Ausdrücken

Komponenten

• Verständnis der Rolle von Komponenten in Angular 17
• Erstellen und Verwenden von Komponenten
• Übergeben von Daten zwischen Komponenten über Inputs und Outputs
• Verwenden von Lebenszyklus-Hooks von Komponenten

Direktiven

• Verständnis des Unterschieds zwischen strukturellen und Attribut-Direktiven
• Erstellen und Verwenden von integrierten Direktiven wie ngIf, ngFor, ngSwitch usw.
• Erstellen und Verwenden benutzerdefinierter Direktiven

Pipes

• Verständnis des Zwecks von Pipes in Angular 17
• Erstellen und Verwenden von integrierten Pipes wie date, currency, json usw.
• Erstellen und Verwenden benutzerdefinierter Pipes

Dienste

• Verständnis der Rolle von Diensten in Angular 17
• Erstellen und Verwenden von Diensten
• Injizieren von Abhängigkeiten über Provider

Module

• Verständnis der Rolle von Modulen in Angular 17
• Erstellen und Verwenden von Modulen
• Importieren und Exportieren von Modulen

Datenbindung

• Verständnis des Unterschieds zwischen Einwege- und Zweigedatenbindung
• Erstellen und Verwenden von Eigenschaftsbindung, Ereignisbindung und der banana-in-a-box-Syntax
• Verwenden von Template-Referenzvariablen

Routing

• Verständnis der Rolle von Routing in Angular 17
• Erstellen und Konfigurieren von Routen
• Navigieren zwischen Routen über routerLink und router.navigate()
• Verwenden von Routenparametern, Abfrageparametern und Fragmenten

Formulare

• Verständnis des Unterschieds zwischen template-gesteuerten und reaktiven Formularen
• Erstellen und Validieren von Formularen mit Formularsteuerelementen, Formulargruppen, Formulararrays usw.
• Verwenden von integrierten Validierern wie required, minLength, maxLength usw.
• Erstellen und Verwenden benutzerdefinierter Validierer

HTTP-Client

• Verständnis der Rolle des HTTP-Clients in Angular 17
• Erstellen und Verwenden von HTTP-Anfragen zur Kommunikation mit Backendsdiensten
• Verwenden von Observables zur Verarbeitung asynchroner Datenströme
• Verwenden von Interzeptoren zur Änderung oder Bearbeitung von HTTP-Anfragen oder -Antworten

Neue, deklarativer Steuerungslogik

• Erläuterung der neuen Template-Steuerungsblöck-Syntax und wie sie allgemeine Aufgaben wie bedingte Darstellung, Schleifen und die Behandlung leerer Sammlungen vereinfacht
• Beispiele für die Verwendung der neuen Blöcke wie @if, @else, @switch, @case, @default, @for und @empty
• Vergleich der neuen Syntax mit der früheren, wie *ngIf, *ngSwitch und *ngFor
• Erwähnung, wie die neuen Steuerungsblöcke zoneless Anwendungen mit Signals unterstützen

Verzögerte Ladungsblöcke

• Erläuterung des Konzepts des verzögerten Ladens und wie es die Leistung und Benutzererfahrung von Webanwendungen verbessern kann
• Einführung des neuen @defer-Steuerungsblocks, der das Lazy-Loading des Blockinhalts und seiner Abhängigkeiten ermöglicht
• Beispiele für die Verwendung des @defer-Blocks für verschiedene Szenarien wie das Laden von Komponenten, Direktiven, Pipes, Animationen und Stilen
• Erwähnung, wie der @defer-Block mit der neuen View-Transitions-API zusammenarbeitet

View-Transitions-API

• Erläuterung des Zwecks und der Vorteile der View-Transitions-API, die es Entwicklern ermöglicht, Animationen und Übergänge zwischen Ansichten anzupassen
• Einführung der neuen withViewTransitions-Direktive, die die Verwendung der View-Transitions-API ermöglicht
• Beispiele für die Verwendung der withViewTransitions-Direktive mit verschiedenen Transitionstypen wie fade, slide, zoom und flip
• Erwähnung, wie die View-Transitions-API mit dem Angular-Router und dem Browserverlauf zusammenarbeitet

Weitere Funktionen und Verbesserungen

• Kurzbeschreibung einiger anderer Funktionen und Verbesserungen, die Angular 17 bietet, wie z. B.:
• Unterstützung für das Übergeben von @Component.styles als Zeichenfolge
• Der Animationscode von Angular ist lazy-loadbar
• Unterstützung für TypeScript 5.2
• Die Kern-Signal-API ist jetzt stabil
• Die Unterstützung für Node.js v16 wurde entfernt und die Mindestunterstützungsversion ist v18.13.0
• Esbuild wird zum Standard-Bauwerkzeuge und der Standard-Dev-Server verwendet Vite