Schulungsübersicht
Einleitung
- Was ist Angular?
- Angular im Vergleich zu React und Vue
- Überblick über die Funktionen und Architektur von Angular 17
- Einrichtung der Entwicklungsumgebung
Erste Schritte
- Erstellung eines neuen Angular 17-Projekts mittels Angular CLI
- Überblick über die Projektstruktur und Dateien
- Ausführen und Starten der Anwendung
- Datenanzeige mithilfe von Interpolation und Ausdrücken
Komponenten
- Rolle von Komponenten in Angular 17 verstehen
- Erstellen und Nutzen von Komponenten
- Datenaustausch zwischen Komponenten über Eingaben und Ausgaben
- Einsatz der Lebenszyklus-Hooks der Komponenten
Direktiven
- Unterschiede zwischen strukturellen und attributiven Direktiven erkennen
- Nutzung integrierter Direktiven wie ngIf, ngFor oder ngSwitch
- Erstellen und Verwenden eigener benutzerdefinierter Direktiven
Pipes
- Aufgabe von Pipes in Angular 17 verstehen
- Verwendung integrierter Pipes wie date, currency oder json
- Erstellen und Einsatz eigener benutzerdefinierter Pipes
Services
- Rolle von Services in Angular 17 erkennen
- Erstellung und Nutzung von Services
- Übergabe von Abhängigkeiten über Provider-Einträge
Module
- Bedeutung der Module in Angular 17 verstehen
- Erstellen und Nutzung eigener Module
- Importieren sowie Exportieren von Modulen
Datenbindung
- Unterschiede zwischen einseitiger und zweiseitiger Datenbindung erkennen
- Einsatz von Eigenschafts- und Ereignisbindung sowie der sogenannten Banana-in-a-Box-Schreibweise
- Nutzung referenzierender Variablen in Vorlagen
Routing
- Wichtigkeit des Routings in Angular 17 verstehen
- Erstellen und Konfigurieren von Routen
- Navigation zwischen Ansichten mittels routerLink oder router.navigate()
- Umgang mit Routen-Parametern, Abfrageparametern sowie Fragmenten
Formulare
- Unterschiede zwischen template-driven und reaktiven Formularen erkennen
- Erstellung und Validierung von Formularen unter Nutzung von Form Controls, Form Groups oder Form Arrays
- Einsatz vordefinierter Validatoren wie required, minLength oder maxLength
- Erstellen und Verwenden eigener Validatoren
HTTP-Client
- Rolle des HTTP-Clients in Angular 17 verstehen
- Ausführung von HTTP-Anfragen zur Kommunikation mit Backend-Systemen
- Nutzung von Observables zum Umgang mit asynchronen Datenströmen
- Verwendung von Interceptoren zur Bearbeitung von eingehenden und ausgehenden HTTP-Anfragen oder -Antworten
Neue, deklarative Steuerung des Flusses in Vorlagen
- Einführung der neuen Template-Control-Block-Syntax und Erklärung, wie diese häufige Aufgaben vereinfacht – etwa bedingtes Rendern, Schleifen oder das Verarbeiten leerer Sammlungen.
- Beispiele für die Nutzung der neuen Blöcke wie @if, @else, @switch, @case, @default, @for und @empty.
- Vergleich der neuen Syntax mit der bisherigen Schreibweise (beispielsweise *ngIf oder *ngFor).
- Bemerkung dazu, wie diese neuen Control Blocks zoneless-Anwendungen unterstützen – in Kombination mit Signals.
Deferred Loading Blocks
- Einführung des Konzepts des verzögerten Ladens und dessen Vorteile für die Performance sowie das Benutzererlebnis von Webanwendungen.
- Vorstellung des neuen @defer-Control-Blocks, der es ermöglicht, Inhalte erst bei Bedarf nachzuladen.
- Beispiele dafür, wie @defer in verschiedenen Situationen genutzt werden kann – etwa für Komponenten, Direktiven, Pipes, Animationen oder Stylesheets.
- Hinweis darauf, dass der @defer-Block nahtlos mit der neuen View Transitions API zusammenarbeitet.
View Transitions API
- Erklärung des Zwecks und Nutzens dieser API: Entwicklern wird ermöglicht, Animationen sowie Übergänge zwischen verschiedenen Ansichten frei zu gestalten.
- Einführung der Direktive withViewTransitions als Voraussetzung für die Verwendung dieser API.
- Beispiele für deren Nutzung bei unterschiedlichen Übergangsarten wie Fade, Slide, Zoom oder Flip.
- Erklärung, wie die View Transitions API im Zusammenspiel mit dem Angular Router sowie der Browser-Historie funktioniert.
Weitere Funktionen und Verbesserungen
- Kurzer Überblick über weitere Neuerungen in Angular 17:
- Möglichkeit, @Component.styles als Zeichenkette zu definieren.
- Die Animationen-Komponente von Angular kann nun verzögert geladen werden.
- Unterstützung für TypeScript 5.2.
- Die Kern-Signals-API ist mittlerweile stabil.
- Node.js v16 wird nicht mehr unterstützt; die Mindestversion lautet nun v18.13.0.
- Esbuild dient künftig als Standard-Builder, und der eingesetzte Entwicklungsserver nutzt Vite.
Zusammenfassung und nächste Schritte
Voraussetzungen
- Grundkenntnisse in HTML, CSS und JavaScript
- Erfahrung mit TypeScript und RxJS
- Praxiserfahrung im Web-Entwicklungsbereich
Zielgruppe
- Entwickler, die lernen möchten, wie man mit Angular 17 dynamische und benutzerfreundliche Webanwendungen erstellt.
- Programmierer, die ihre Kenntnisse aus früheren Angular-Versionen aktualisieren wollen.
- Coder, die sich für die neuen Funktionen und Verbesserungen von Angular 17 interessieren.
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