Angular 17 Schulung

Einführung in Angular 17

• Was ist Angular?
• Angular im Vergleich mit React und Vue
• Übersicht der Funktionen und der Architektur von Angular 17
• Einrichtung der Entwicklungsumgebung

Erste Schritte

• Erstellen eines neuen Angular-17-Projekts mit Angular CLI
• Erkundung 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 mittels inputs und outputs
• Verwenden von Lifecycle-Hooks von Komponenten

Direktiven

• Unterschied zwischen strukturellen und Attribut-Direktiven
• Erstellen und Verwenden eingebauter Direktiven wie ngIf, ngFor, ngSwitch usw.
• Erstellen und Verwenden benutzerdefinierter Direktiven

Pipes

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

Services

• Rolle von Services in Angular 17
• Erstellen und Verwenden von Services
• Injektion von Abhängigkeiten mittels Providers

Module

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

Datenbindung

• Unterschied zwischen Einweg- und Zweiwege-Datenbindung
• Erstellen und Verwenden von Property Binding, Event Binding und der banana-in-a-box-Syntax
• Verwendung von Template-Referenzvariablen

Routing

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

Formulare

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

HTTP-Client

• Rolle des HTTP-Clients in Angular 17
• Erstellen und Verwenden von HTTP-Anfragen zur Kommunikation mit Backend-Diensten
• Verwendung von Observables zur Behandlung asynchroner Datenströme
• Verwendung von Interceptors zum Anpassen oder Verarbeiten von HTTP-Anfragen oder -Antworten

Neuer deklarative Kontrollfluss

• Erläuterung der neuen Template-Steuerungsblock-Syntax und wie sie häufige Aufgaben wie bedingte Anzeige, 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 bisherigen, wie *ngIf, *ngSwitch und *ngFor
• Hinweis darauf, wie die neuen Steuerungsblöcke zonenlose Anwendungen mit Signals unterstützen

Verzögerte Ladeblöcke

• Erläuterung des Konzepts des Deferred Loadings und wie es die Leistung und Benutzererfahrung von Webanwendungen verbessern kann
• Einführung des neuen @defer-Steuerungsblocks, der das Lazy Loading des Inhalts 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
• Hinweis darauf, 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 Entwicklern erlaubt, 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 Übergangstypen wie fade, slide, zoom und flip
• Hinweis darauf, 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 Zeichenfolge
• Der Animationscode von Angular ist Lazy-loadbar
• Unterstützung für TypeScript 5.2
• Die Kern-Signal-API ist nun stabil
• Die Unterstützung für Node.js v16 wurde entfernt und die Mindestunterstützungsversion ist v18.13.0
• Esbuild wird der Standard-Builder und der Standard-Development-Server wird Vite verwenden