Angular Agentic Software Engineering (NGADV)

Kursüberblick

Dieser Workshop richtet sich an erfahrene Angular-Entwickler, die die moderne Angular-Entwicklung beherrschen und lernen möchten, mit KI-Agenten als natürlichen Bestandteil ihres täglichen Arbeitsablaufs zu arbeiten. In zwölf Modulen erstellen Sie echte Angular-v22-Anwendungen, wobei Sie durchgehend eigenständige Komponenten, signalbasierten Status, Signalabfragen und die auf „inject“ basierende Abhängigkeitsinjektion einsetzen. Jedes Konzept wird anhand von funktionierenden Demos vorgestellt, die Sie ausführen, erweitern und mit denen Sie experimentieren können.

Zunächst richten Sie Claude Code und GitHub Copilot als Ihre Entwicklungspartner ein und lernen, wie Sie Harness-Dateien, Skills, Subagenten und Hooks erstellen, die bestimmen, wie diese Agenten Sie in allen folgenden Modulen unterstützen. Die Werkzeuge und Arbeitsgewohnheiten, die du dir hier aneignest, begleiten dich durch den Rest des Kurses – die agentische Entwicklung ist also kein isoliertes Thema, sondern eine Arbeitsweise, die du in jedes nachfolgende Modul mitnimmst.

Sobald Sie über die erforderlichen Werkzeuge verfügen, tauchen Sie in den reaktiven Kern von Angular ein. Signale sind die wichtigste Zustandsprimitive im modernen Angular, und Sie behandeln die gesamte API, einschliesslich `signal()`, `computed()`, `effect()`, `linkedSignal()` und `model()`, zusammen mit `httpResource()`, `resourceChain()`, Streaming-Ressourcen und `debounced()` für das deklarative Laden von Daten. Das Komponentenmodul baut dann auf dieser Grundlage auf und behandelt Signalabfragen, moderne Kontrollflussstrukturen, Inhaltsprojektion, Direktivenkomposition, programmatische Komponenten, `@angular/aria` und `@defer`.

Signal Forms führen einen schemabasierten Ansatz zur Formularerstellung ein, bei dem der Feldstatus als Signale bereitgestellt wird, die direkt in Ihre Vorlagen eingebunden werden, darunter `validateHttp`, `FormValueControl`, JSON-gesteuerte dynamische Formulare und Datumsvalidatoren. Anschliessend tauchen Sie in die reaktive Programmierung mit RxJS ein und lernen dabei Strategien zum Abflachen und Kombinieren, die Fehlerbehandlung, benutzerdefinierte Operatoren sowie die Interoperabilitätsmuster kennen, die Observables und Signale in beide Richtungen miteinander verbinden.

Als Nächstes folgt der Zustand auf Anwendungsebene mit NgRx SignalStore. Sie erstellen Stores mit `withState()`, `withComputed()`, `withMethods()` und `withEntities()`, kombinieren diese mit `withFeature` und `withProps`, erweitern Ressourcen und nutzen das Events-Plugin. Anschliessend folgt fortgeschrittenes Routing, das funktionale Guards, HTTP-Interceptors, signalbasierte Resolver, Route-Inputs, `provideAppInitializer` mit `injectAsync`, `animate.enter`/`animate.leave` sowie View-Übergänge abdeckt.

Die letzten Module konzentrieren sich auf die Produktionsqualität. Das Testen mit Vitest umfasst Signaleingabetests, Servicetests, SignalStore-Tests, zonenspezifische asynchrone Tests sowie Playwright, wobei eine Demo im Mittelpunkt steht, bei der der Agent die Spezifikation schreibt und eine Mutationsrunde diese überprüft. WebMCP verwandelt dann die Anwendung selbst in etwas, das ein Agent steuern kann: Sieben Demos stellen eine einfache Seite, ein Signal, eine Komponente, ein Signal-Formular, einen SignalStore und den Router als Agent-Tools bereit sowie eine Testsuite, die diese Tools so aufruft, wie es ein Agent tun würde. Optimierung und Compliance umfassen Lighthouse, Rolldown-Bundle-Optimierung, `@defer`-Trigger, virtuelles Scrollen, Bildoptimierung, WCAG 2.2 AA mit `@angular/aria` sowie ein Gate beim Pull-Request. Das Thema „Hybrid Rendering“ rundet die Angular-Themen mit Server-Routen, `AngularNodeAppEngine`, inkrementeller Hydration und dem Transfer-Cache ab. Der Kurs endet mit einem agentenorientierten DevOps-Modul, in dem eine echte Website bereitgestellt und überprüft wird.

Am Ende des Workshops werden Sie ein umfassendes Verständnis dafür haben, wie moderne Angular-Anwendungen aufgebaut sind, und eine Reihe von proaktiven Arbeitsabläufen kennen, mit denen Sie diese schneller erstellen und pflegen können. Die Kombination aus fundiertem Angular-Wissen und effektiver Zusammenarbeit mit KI ist genau das, was Ihnen dieser Kurs vermitteln soll.