Schulungsübersicht
Einführung
- Was ist Angular?
- Angular vs. React vs. Vue
- Überblick über die Funktionen und die Architektur von Angular 17
- Einrichten der Entwicklungsumgebung
Erste Schritte
- Erstellen eines neuen Angular-17-Projekts mit Angular CLI
- Erschließen der Projektstruktur und der Dateien
- Ausführen und Bereitstellen der Anwendung
- Anzeigen von Daten mittels Interpolation und Ausdrücken
Komponenten
- Verstehen der Rolle von Komponenten in Angular 17
- Erstellen und Verwenden von Komponenten
- Weitergeben von Daten zwischen Komponenten über Inputs und Outputs
- Nutzung der Lifecycle-Hooks von Komponenten
Direktiven
- Verstehen des Unterschieds zwischen strukturellen und attributbasierten Direktiven
- Erstellen und Verwenden eingebauter Direktiven wie ngIf, ngFor, ngSwitch usw.
- Erstellen und Verwenden benutzerdefinierter Direktiven
Pipes
- Verstehen des Zwecks von Pipes in Angular 17
- Erstellen und Verwenden eingebauter Pipes wie date, currency, json usw.
- Erstellen und Verwenden benutzerdefinierter Pipes
Dienste (Services)
- Verstehen der Rolle von Diensten in Angular 17
- Erstellen und Verwenden von Diensten
- Injizieren von Abhängigkeiten mittels Providern
Module
- Verstehen der Rolle von Modulen in Angular 17
- Erstellen und Verwenden von Modulen
- Importieren und Exportieren von Modulen
Data Binding
- Verstehen des Unterschieds zwischen einseitigem und zweiseitigem Data Binding
- Erstellen und Verwenden von Property Binding, Event Binding und der „Banana-in-a-Box“-Syntax
- Nutzung von Template-Referenzvariablen
Routing
- Verstehen der Rolle von Routing in Angular 17
- Erstellen und Konfigurieren von Routen
- Navigieren zwischen Routen mittels routerLink und router.navigate()
- Nutzung von Routenparametern, Abfrageparametern (query parameters) und Fragmenten
Formulare
- Verstehen des Unterschieds zwischen Template-gesteuerten und reaktiven Formularen
- Erstellen und Validieren von Formularen mittels Form Controls, Form Groups, Form Arrays usw.
- Nutzung eingebauter Validators wie required, minLength, maxLength usw.
- Erstellen und Verwenden benutzerdefinierter Validators
HTTP-Client
- Verstehen der Rolle des HTTP-Clients in Angular 17
- Erstellen und Verwenden von HTTP-Anfragen zur Kommunikation mit Backend-Diensten
- Nutzung von Observables zum Behandeln asynchroner Datenströme
- Nutzung von Interceptors zum Modifizieren oder Behandeln von HTTP-Anfragen oder -Antworten
Neuer, deklarativer Steuerfluss
- Erläutern der neuen Syntax der Template-Control-Blöcke und wie sie häufige Aufgaben wie bedingtes Rendern, Schleifen und das Behandeln leerer Sammlungen vereinfacht.
- Bereitvon Beispielen für die Verwendung der neuen Blöcke, z. B. @if, @else, @switch, @case, @default, @for und @empty
- Vergleich der neuen Syntax mit der vorherigen, wie *ngIf, *ngSwitch und *ngFor
- Hinweis darauf, wie die neuen Control-Blocks zoneless-Anwendungen mit Signals unterstützen.
Deferred Loading Blocks (Blöcke mit verzögerter Ladeaktion)
- Erläutern des Konzepts des Deferred Loadings und wie es die Leistung und Benutzererfahrung von Webanwendungen verbessern kann.
- Vorstellung des neuen @defer-Controlblocks, der das Lazy-Loading des Inhalts des Blocks sowie dessen Abhängigkeiten ermöglicht.
- Bereitstellen von Beispielen für die Verwendung des @defer-Blocks in verschiedenen Szenarien, z. B. das Laden von Komponenten, Direktiven, Pipes, Animationen und Stylesheets.
- Hinweis darauf, wie der @defer-Block mit der neuen View Transitions API funktioniert.
View Transitions API
- Erläutern des Zwecks und der Vorteile der View Transitions API, die Entwicklern ermöglicht, Animationen und Übergänge zwischen Ansichten anzupassen.
- Vorstellung der neuen Direktive withViewTransitions, die die Nutzung der View Transitions API ermöglicht.
- Bereitstellen von Beispielen für die Verwendung der Direktive withViewTransitions mit verschiedenen Übergangstypen, z. B. Fade, Slide, Zoom und Flip.
- Hinweis darauf, wie die View Transitions API mit dem Angular-Router und dem Browserverlauf funktioniert.
Weitere Funktionen und Verbesserungen
- Kurze Zusammenfassung einiger weiterer Funktionen und Verbesserungen, die Angular 17 bietet, wie z. B.:
- Unterstützung für das Übergeben von @Component.styles als String
- Der Animationscode von Angular ist Lazy-Loadable
- Unterstützung für TypeScript 5.2
- Die Kern-Signals-API ist nun stabil
- Die Unterstützung für Node.js v16 wurde entfernt, und die Mindestversion beträgt v18.13.0
- Esbuild wird zum 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 man Angular 17 nutzt, um dynamische und responsive Webanwendungen zu erstellen.
- 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