Schulungsübersicht
Einführung
- Was ist Angular?
- Angular im Vergleich zu React und Vue
- Übersicht über Funktionen und Architektur von Angular 17
- Einrichten der Entwicklungsumgebung
Erste Schritte
- Erstellen eines neuen Angular 17-Projekts mit Angular CLI
- Erkundung der Projektstruktur und -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
- Erstellung und Verwendung von Komponenten
- Weitergabe von Daten zwischen Komponenten über Inputs und Outputs
- Nutzung von Lifecycle-Hooks
Direktiven
- Unterschied zwischen strukturellen und Attribut-Direktiven verstehen
- Erstellung und Verwendung integrierter Direktiven wie ngIf, ngFor, ngSwitch usw.
- Erstellung und Verwendung benutzerdefinierter Direktiven
Pipes
- Verständnis der Aufgabe von Pipes in Angular 17
- Erstellung und Verwendung integrierter Pipes wie date, currency, json usw.
- Erstellung und Verwendung benutzerdefinierter Pipes
Dienste (Services)
- Verständnis der Rolle von Diensten in Angular 17
- Erstellung und Verwendung von Diensten
- Injizieren von Abhängigkeiten via Provider
Module
- Verständnis der Rolle von Modulen in Angular 17
- Erstellung und Verwendung von Modulen
- Importieren und Exportieren von Modulen
Data Binding
- Unterschied zwischen einseitigem und zweiseitigem Data Binding verstehen
- Erstellung und Verwendung von Property Binding, Event Binding sowie der Banana-in-a-Box-Syntax
- Nutzung von Template-Referenzvariablen
Routing
- Verständnis der Rolle des Routings in Angular 17
- Erstellung und Konfiguration von Routen
- Navigation zwischen Routen mittels routerLink und router.navigate()
- Nutzung von Routenparametern, Query-Parametern und Fragments
Formulare
- Unterschied zwischen Template-driven und Reactive Forms verstehen
- Erstellung und Validierung von Formularen mittels form controls, form groups, form arrays usw.
- Nutzung integrierter Validatoren wie required, minLength, maxLength usw.
- Erstellung und Verwendung benutzerdefinierter Validatoren
HTTP-Client
- Verständnis der Rolle des HTTP-Clients in Angular 17
- Erstellung und Nutzung von HTTP-Anfragen zur Kommunikation mit Backend-Diensten
- Nutzung von Observables zum Umgang mit asynchronen Datenströmen
- Einsatz von Interceptors zum Bearbeiten oder Behandeln von HTTP-Anfragen oder -Antworten
Neuer, deklarativer Kontrollfluss
- Erläuterung der neuen Syntax für Template-Kontrollblöcke und wie sie gängige Aufgaben wie bedingte Darstellung, Schleifenverarbeitung und den Umgang mit leeren Collections vereinfacht.
- Beispiele zur Nutzung der neuen Blöcke, z.B. @if, @else, @switch, @case, @default, @for und @empty
- Vergleich der neuen Syntax mit früheren Ansätzen wie *ngIf, *ngSwitch und *ngFor
- Hinweis darauf, dass die neuen Kontrollblöcke Zoneless-Applikationen mit Signals unterstützen
Deferred Loading Blocks (Verzögerte Ladeblöcke)
- Erläuterung des Konzepts von Deferred Loading und wie es die Leistung und User Experience von Webanwendungen verbessern kann.
- Einführung des neuen @defer-Kontrollblocks, der das Lazy-Loading des Blockinhalts sowie seiner Abhängigkeiten ermöglicht.
- Beispiele zur Nutzung des @defer-Blocks für verschiedene Szenarien, z.B. das Laden von Komponenten, Direktiven, Pipes, Animationen und Styles
- Hinweis darauf, wie der @defer-Block mit der neuen View Transitions API funktioniert
View Transitions API
- Erläuterung des Zwecks und der Vorteile der View Transitions API, die Entwicklern ermöglicht, Animationen und Übergänge zwischen Ansichten anzupassen.
- Einführung der neuen withViewTransitions-Direktive, die die Nutzung der View Transitions API erlaubt.
- Beispiele zur Nutzung der withViewTransitions-Direktive mit verschiedenen Übergangstypen, z.B. Fade, Slide, Zoom und Flip
- Hinweis darauf, wie die View Transitions API mit dem Angular Router und dem Browserverlauf zusammenarbeitet
Weitere Funktionen und Verbesserungen
- Kurze Zusammenfassung weiterer von Angular 17 angebotener Funktionen und Verbesserungen, wie:
- Unterstützung für die Übergabe von @Component.styles als String
- Die Animationscode-Bibliothek von Angular ist lazy-loadable
- Unterstützung für TypeScript 5.2
- Die Core-Signal-API ist nun stabil
- Die Unterstützung für Node.js v16 wurde entfernt; Mindestversion ist nun v18.13.0
- Esbuild ist der Standard-Build-Tool, und der Standard-Dev-Server nutzt Vite
Zusammenfassung und nächste Schritte
Voraussetzungen
- Verständnis von HTML, CSS und JavaScript
- Erfahrung mit TypeScript und RxJS
- Erfahrung in der Webentwicklung
Zielgruppe
- Entwickler, die lernen möchten, wie sie Angular 17 zur Erstellung dynamischer und responsiver Webanwendungen nutzen können.
- Entwickler, die ihre Fähigkeiten von früheren Angular-Versionen auf den neuesten Stand bringen möchten.
- Programmierer, die die neuen Funktionen und Verbesserungen von Angular 17 erkunden möchten.
Erfahrungsberichte (2)
Ich mochte den Ablauf der Schulung im Großen und Ganzen; sie ging das Thema durch und hatte am Ende jedes Themas gut strukturierte Übungsstunden für uns. Sie konnte uns bei den Problemen, die wir in den Übungsstunden hatten, schnell und zielgerichtet führen.
Rabin Byanjankar - Lument
Kurs - Angular 17
Maschinelle Übersetzung
Es war sehr interaktiv und informativ. Der Trainer war sehr geduldig mit uns, wenn wir etwas nicht verstanden haben, und sorgte dafür, dass niemand im Kurs zurückbleibt.
Daniel - INIT Innovations in Transportation Ltd.
Kurs - Angular 17
Maschinelle Übersetzung