Kontakt aufnehmen

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.
 28 Stunden

Teilnehmerzahl


Preis je Teilnehmer (exkl. USt)

Erfahrungsberichte (2)

Kommende Kurse

Verwandte Kategorien