Angular 17 Schulung

Einführung in Angular 17

• Was ist Angular?
• Angular im Vergleich zu React und Vue
• Überblick über die Funktionen und die Architektur von Angular 17
• Einrichtung der Entwicklerumgebung

Erste Schritte

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

Komponenten

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

Direktiven

• Unterscheidung zwischen strukturellen und Attributdirektiven
• Erstellen und Verwenden eingebauster Direktiven wie ngIf, ngFor, ngSwitch usw.
• Erstellen und Verwenden benutzerdefinierter Direktiven

Pipes

• Zweck von Pipes in Angular 17 verstehen
• Erstellen und Verwenden eingebauster Pipes wie date, currency, json usw.
• Erstellen und Verwenden benutzerdefinierter Pipes

Dienste

• Rolle von Diensten in Angular 17 verstehen
• Erstellen und Verwenden von Diensten
• Injizieren von Abhängigkeiten über Providers

Module

• Rolle von Modulen in Angular 17 verstehen
• Erstellen und Verwenden von Modulen
• Importieren und Exportieren von Modulen

Data Binding

• Unterschied zwischen Einweg- und Zweiweg-Datenbindung verstehen
• Erstellen und Verwenden von Property Binding, Event Binding und der Banane-im-Kasten-Syntax
• Verwenden von Template-Referenzvariablen

Routing

• Rolle des Routings in Angular 17 verstehen
• Erstellen und Konfigurieren von Routen
• Navigieren zwischen Routen mit routerLink und router.navigate()
• Verwenden von Routenparametern, Query-Parametern und Fragmenten

Formulare

• Unterschied zwischen Template-orientierten und reaktiven Formularen verstehen
• Erstellen und Validieren von Formularen mit Form Controls, Form Groups, Form Arrays usw.
• Verwendung eingebauster Validatoren wie required, minLength, maxLength usw.
• Erstellen und Verwenden benutzerdefinierter Validatoren

HTTP-Client

• Rolle des HTTP-Clients in Angular 17 verstehen
• Erstellen und Verwenden von HTTP-Anfragen zur Kommunikation mit Backend-Diensten
• Verwenden von Observables zur Behandlung asynchroner Datenströme
• Verwendung von Interzeptoren zur Änderung oder Verarbeitung von HTTP-Anfragen oder -Antworten

Neuer, deklarative Kontrollfluss

• Erläuterung der neuen Template Control Block Syntax und wie sie häufige Aufgaben wie bedingtes Rendering, Schleifen und die Behandlung leerer Sammlungen vereinfacht
• Beispiele für die Nutzung der neuen Blöcke wie @if, @else, @switch, @case, @default, @for und @empty
• Vergleich der neuen Syntax mit der vorherigen, z. B. *ngIf, *ngSwitch und *ngFor
• Erwähnung, wie die neuen Control Blocks zoneless Anwendungen mit Signals unterstützen

Deferred Loading Blocks

• Erläuterung des Konzepts von Deferred Loading und wie es die Leistung und Benutzererfahrung von Webanwendungen verbessern kann
• Einführung des neuen @defer Control Blocks, das das lazy loading des Inhalts und seiner Abhängigkeiten ermöglicht
• Beispiele für die Verwendung des @defer Blocks in verschiedenen Szenarien, z. B. Laden von Komponenten, Direktiven, Pipes, Animationen und Stilen
• Erwähnung, wie das @defer Block mit der neuen View Transitions API zusammenarbeitet

View Transitions API

• Zweck und Vorteile der View Transitions API erklären, die es Entwicklern erlaubt, Animationen und Übergänge zwischen Ansichten anzupassen
• Einführung der neuen withViewTransitions Direktive, die die Nutzung der View Transitions API ermöglicht
• Beispiele für die Verwendung der withViewTransitions Direktive mit verschiedenen Übergangstypen 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

• Kurzüberblick über einige andere Funktionen und Verbesserungen, die Angular 17 bietet, wie z. B.:
• Unterstützung für das Übergeben von @Component.styles als Zeichenkette
• Der Animationscode von Angular ist lazy-load-fähig
• Unterstützung für TypeScript 5.2
• Die zentrale Signal API ist jetzt stabil
• Die Unterstützung für Node.js v16 wurde entfernt; die minimale unterstützte Version ist v18.13.0
• Esbuild wird der Standard-Builder und der Standard-Dev-Server wird Vite verwenden