Kontakt aufnehmen

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

Teilnehmerzahl


Preis je Teilnehmer (exkl. USt)

Erfahrungsberichte (2)

Kommende Kurse

Verwandte Kategorien