Kontakt aufnehmen

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

Teilnehmerzahl


Preis je Teilnehmer (exkl. USt)

Erfahrungsberichte (2)

Kommende Kurse

Verwandte Kategorien