Seminare
Seminare
  • Seminare
  • Anbieter
  • 5 km
  • 10 km
  • 25 km
  • 50 km
  • 100 km
  • 150 km
  • 200 km
  • 300 km

Modernes Angular: Signals, SignalStore und API-first mit OpenAPI (ab Angular 22)

Seminar - GFU Cyrus AG

Nach dem Seminar entwickeln Sie Angular-Anwendungen mit Standalone Components, Signals und funktionalem Routing. Sie generieren aus einer OpenAPI-Spezifikation einen typsicheren Client und binden ihn in den Build ein. Sie verwalten Zustand konsequent mit SignalStore und strukturieren Features nach klaren Schichten und Abhängigkeitsregeln. Komponenten, Stores, Services, Guards und Interceptoren testen Sie mit Vitest. Zentrale Abläufe prüfen Sie mit Playwright end-to-end.
Termin Ort Preis*
firmenintern auf Anfrage auf Anfrage
*Alle Preise verstehen sich inkl. MwSt.

Detaillierte Informationen zum Seminar

Inhalte:
  • Angular im Überblick
    • Werkzeuge: Node.js, Angular CLI und IDE
    • Projektstruktur, Standalone Components und Bootstrapping
    • Templates, Data Binding und Control Flow (@if, @for, @switch)
    • Signals: signal, computed und effect

  • Komponenten
    • Kommunikation mit input(), output() und model()
    • Lifecycle und Styles
    • Direktiven und Pipes: eingebaute und eigene

  • Dependency Injection
    • Services, inject() und Gültigkeitsbereiche: root, Route und Komponente

  • HTTP und Router
    • HTTP-Client, funktionale Interceptoren, RxJS-Grundlagen und die Brücke zu Signals
    • Router: Navigation, Parameter, Lazy Loading, funktionale Guards und Resolver

  • Formulare
    • Signal Forms als neuer Standard, Reactive Forms im Überblick

  • Unit Tests mit Vitest
    • Vitest in Angular: Konfiguration, TestBed und Aufbau guter Tests
    • Komponenten testen: Signal-Inputs, DOM und Component Harnesses
    • Services, funktionale Guards, Resolver und Interceptoren testen
    • Abhängigkeiten über Provider austauschen

  • Architektur und Projektstruktur
    • Features und Schichten: feature, data-access, ui und util
    • Abhängigkeitsregeln und öffentliche API je Bibliothek
    • Container- und Präsentationskomponenten
    • Querschnitt: Fehlerbehandlung, Berechtigungen über Guards und Konfiguration

  • OpenAPI und Code-Generierung
    • OpenAPI 3.x lesen und bewerten: paths, components/schemas, Parameter, Antworten und Fehlerformat
    • Qualität der Spezifikation prüfen, etwa mit Spectral
    • Code-Generierung mit einem zum Backend passenden Generator
    • Alternativen im Überblick: OpenAPI Generator (typescript-angular), ng-openapi-gen, openapi-typescript und Orval
    • Generierung im Build: npm-Skript und generierter Client in der data-access-Schicht
    • Generierten Code einchecken oder bei jedem Build erzeugen
    • Versionierung der Spezifikation
    • Generierten Client verwenden: Basis-URL, Interceptoren und Fehlerbehandlung
    • Generierte Typen direkt nutzen oder abbilden
    • Änderungen der Spezifikation: Breaking Changes früh über Typfehler erkennen
    • Mock-Server auf Basis der Spezifikation

  • Einstieg in SignalStore
    • Warum SignalStore: Abgrenzung zu Services mit Signals
    • signalStore, withState und patchState
    • withComputed und withProps
    • withMethods samt privaten Members und Reihenfolge der Features
    • withHooks: onInit und onDestroy
    • Stores bereitstellen und verwenden: root, Route oder Komponente

  • SignalStore im Projekt
    • Store-Design: ein Store pro Feature, Zuschnitt und abgeleiteter Zustand
    • Sammlungen mit withEntities
    • Asynchrone Aufrufe mit rxMethod und tapResponse über den generierten Client
    • Lade- und Fehlerzustand
    • Eigene Store-Features mit signalStoreFeature und withFeature, etwa für Request-Status oder Paginierung
    • Globale und Feature-Stores: Lebensdauer an Routen und Kommunikation zwischen Stores
    • Stores testen: Zustand, Methoden und rxMethod
    • Den generierten Client durch einen Mock ersetzen

  • Qualität und Auslieferung
    • API-Vertrag absichern: Tests gegen den Mock-Server
    • End-to-End-Tests mit Playwright: zentrale Abläufe absichern
    • Pipeline: Generierung, Lint inklusive Prüfung der Abhängigkeitsregeln, Tests und Build

Zielgruppe:
Das Seminar richtet sich an Entwicklerinnen und Entwickler, die eine Angular-Anwendung nicht nur schreiben, sondern langfristig tragfähig strukturieren möchten.

Teilnahmevoraussetzungen


Sie benötigen sichere Kenntnisse in TypeScript sowie Grundkenntnisse in HTML und CSS.

Rudimentäre Angular-Kenntnisse sind hilfreich.
Seminarkennung:
S7450
Nach unten
Nach oben
Wir setzen Analyse-Cookies ein, um Ihre Zufriedenheit bei der Nutzung unserer Webseite zu verbessern. Diese Cookies werden nicht automatisiert gesetzt. Wenn Sie mit dem Einsatz dieser Cookies einverstanden sind, klicken Sie bitte auf Akzeptieren. Weitere Informationen finden Sie hier.
Akzeptieren Nicht akzeptieren









Um Spam abzuwehren, geben Sie bitte die Buchstaben auf dem Bild in das Textfeld ein:

captcha



Bei der Verarbeitung Ihrer personenbezogenen Daten im Zusammenhang mit der Kontaktfunktion beachten wir die gesetzlichen Bestimmungen. Unsere ausführlichen Datenschutzinformationen finden Sie hier. Bei der Kontakt-Funktion erhobene Daten werden nur an den jeweiligen Anbieter weitergeleitet und sind nötig, damit der Anbieter auf Ihr Anliegen reagieren kann.







Um Spam abzuwehren, geben Sie bitte die Buchstaben auf dem Bild in das Textfeld ein:

captcha