Schulungsübersicht
Einführung
- Was ist Angular?
- Angular vs. React vs. Vue
- Überblick über Angular 17 Funktionen und Architektur
- Einrichten der Entwicklungsumgebung
Erste Schritte
- Erstellen eines neuen Angular 17-Projekts mit Angular CLI
- Erkunden der Projektstruktur und der Dateien
- Ausführen und Bereitstellen der Anwendung
- Anzeige von Daten mit Interpolation und Ausdrücken
Komponenten
- Verstehen der Rolle von Komponenten in Angular 17
- Erstellen und Verwenden von Komponenten
- Übergabe von Daten zwischen Komponenten mit Hilfe von Eingängen und Ausgängen
- Hooks für den Lebenszyklus von Komponenten verwenden
Direktiven
- Verstehen des Unterschieds zwischen strukturellen und attributiven Direktiven
- Erstellen und Verwenden von eingebauten Direktiven wie ngIf, ngFor, ngSwitch usw.
- Erstellen und Verwenden von benutzerdefinierten Direktiven
Pipes
- Verstehen des Zwecks von Pipes in Angular 17
- Erstellen und Verwenden von eingebauten Pipes wie date, currency, json, etc.
- Erstellen und Verwenden von benutzerdefinierten Pipes
Dienste
- Verstehen der Rolle von Diensten in Angular 17
- Erstellen und Verwenden von Diensten
- Einfügen von Abhängigkeiten mit Hilfe von Anbietern
Module
- Verstehen der Rolle von Modulen in Angular 17
- Erstellen und Verwenden von Modulen
- Importieren und Exportieren von Modulen
Datenbindung
- Verstehen des Unterschieds zwischen einseitiger und zweiseitiger Datenbindung
- Erstellen und Verwenden von Eigenschaftsbindung, Ereignisbindung und Banana-in-a-Box-Syntax
- Verwendung von Template-Referenzvariablen
Routing
- Verstehen der Rolle des Routings in Angular 17
- Erstellen und Konfigurieren von Routen
- Navigieren zwischen Routen mit routerLink und router.navigate()
- Verwendung von Routenparametern, Abfrageparametern und Fragmenten
Formulare
- Verstehen des Unterschieds zwischen vorlagengesteuerten und reaktiven Formularen
- Erstellen und Validieren von Formularen mithilfe von Formularsteuerelementen, Formulargruppen, Formulararrays usw.
- Verwendung von eingebauten Validatoren wie required, minLength, maxLength, etc.
- Erstellen und Verwenden von benutzerdefinierten Validierern
HTTP-Client
- Verstehen der Rolle des HTTP-Clients in Angular 17
- Erstellen und Verwenden von HTTP-Anfragen zur Kommunikation mit Backend-Diensten
- Verwendung von Observables zur Verarbeitung asynchroner Datenströme
- Verwendung von Interceptors zum Ändern oder Verarbeiten von HTTP-Anfragen oder -Antworten
Neuer, deklarativer Kontrollfluss
- Erläuterung der neuen Syntax der Template-Kontrollblöcke und wie sie gängige Aufgaben wie bedingtes Rendering, Schleifen und den Umgang mit leeren 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
- Erwähnung, wie die neuen Kontrollblöcke zonenlose Anwendungen mit Signalen unterstützen
Blöcke für verzögertes Laden
- Erläuterung des Konzepts des verzögerten Ladens und wie es die Leistung und das Benutzererlebnis von Webanwendungen verbessern kann
- Vorstellung des neuen @defer-Kontrollblocks, der ein verzögertes Laden des Blockinhalts 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 Styles
- Erwähnen, wie der @defer-Block mit der neuen View Transitions API funktioniert
Ansichtsübergänge-API
- Erläuterung des Zwecks und der Vorteile der API für Ansichtsübergänge, die es Entwicklern ermöglicht, die Animationen und Übergänge zwischen Ansichten anzupassen
- Einführung in die neue withViewTransitions-Direktive, die die Verwendung der API für View-Übergänge ermöglicht
- Beispiele für die Verwendung der withViewTransitions-Direktive mit verschiedenen Übergangstypen, wie Fade, Slide, Zoom und Flip
- Erwähnung, wie die API für Ansichtsübergänge mit dem Angular-Router und dem Browserverlauf funktioniert
Andere Funktionen und Verbesserungen
- Kurze Zusammenfassung einiger der anderen Funktionen und Verbesserungen, die Angular 17 bietet, wie z. B:
- Unterstützung für die Übergabe von @Component.styles als String
- Der Animationscode von Angular ist lazy-loadbar
- TypeScript 5.2 Unterstützung
- Die Kern-API für Signale ist jetzt stabil
- Node.js v16 Unterstützung wurde entfernt und die minimale Unterstützungsversion ist v18.13.0
- Esbuild wird der Standard-Builder sein und der Standard-Entwicklungsserver wird Vite verwenden
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 mit Angular 17 dynamische und reaktionsschnelle Webanwendungen erstellt
- Entwickler, die ihre Kenntnisse aus früheren Versionen von Angular auffrischen möchten
- Programmierer, die die neuen Funktionen und Verbesserungen von Angular 17 kennenlernen möchten
Erfahrungsberichte (2)
Mir hat vor allem der Ablauf der Schulung gefallen; sie ging durch das Thema, und am Ende des Themas hatte sie gut definierte Übungseinheiten für uns. Sie war in der Lage, uns bei den Problemen, mit denen wir in den Übungseinheiten konfrontiert wurden, sofort zu helfen.
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 während der gesamten Schulung zurückgelassen wurde.
Daniel - INIT Innovations in Transportation Ltd.
Kurs - Angular 17
Maschinelle Übersetzung