Class Details
Dieser Workshop richtet sich an erfahrene Angular Developer, die moderne Angular Entwicklung meistern und AI Agents als selbstverständlichen Teil ihres täglichen Workflows einsetzen wollen. Über zwölf Module bauen Sie echte Angular v22 Applications mit Standalone Components, signal-basiertem State, Signal Queries und inject-basierter Dependency Injection. Jedes Konzept wird über lauffähige Demos eingeführt, die Sie ausführen, erweitern und verändern können.
Sie starten damit, Claude Code und GitHub Copilot als Ihre Development Partner einzurichten, und lernen, Harness Files, Skills, Subagents und Hooks zu schreiben, die bestimmen, wie diese Agents Sie in jedem weiteren Modul unterstützen. Die Tools und Gewohnheiten, die Sie hier etablieren, bleiben Ihnen für den Rest des Kurses erhalten: Agentic Development ist damit kein isoliertes Thema, sondern eine Arbeitsweise, die Sie in jedes folgende Modul mitnehmen.
Mit fertigem Tooling gehen Sie in den reaktiven Kern von Angular: die komplette Signals API, httpResource() und Resource Chaining, Signal Queries, modernes Control Flow, Signal Forms und die RxJS Interop Patterns, die Observables und Signals in beide Richtungen verbinden. Danach folgt Application-Level State mit NgRx SignalStore, anschließend Advanced Routing und schließlich die Production Themen: Vitest und Playwright, WebMCP, Optimization und Compliance, Hybrid Rendering und ein agentic DevOps Track, der eine echte Site deployt und verifiziert.
Zielgruppe
- Erfahrene Angular Developer, die moderne Angular v22 Patterns übernehmen
- Teams, die von Legacy Patterns auf Signals, Signal Forms und NgRx SignalStore migrieren
- Developer, die strukturierte Abdeckung von Advanced Routing, Testing, Performance, Compliance und SSR suchen
Voraussetzungen
- Fundierte Erfahrung mit Angular (Components, Services, Routing, Forms)
- Vertrautheit mit TypeScript und RxJS Grundlagen
Lehrplan
Modul 01: Agentic Angular Software Engineering
- Der Angular CLI MCP Server
- Harness Files: CLAUDE.md, AGENTS.md, copilot-instructions.md
- Angular Agent Skills
- Der Angular Expert Subagent
- Hooks und Quality Gates
Modul 02: Mastering Signals
- Signals Fundamentals: signal(), computed(), effect()
- Signal Patterns: Inputs, model(), linkedSignal, Equality
- Async Signals: httpResource(), resource chain(), debounced()
- @Service und injectAsync
- Signals Tooling: der DevTools Signal Graph
Modul 03: Component Composition und Signal Queries
- Moderne Template Syntax und Control Flow
- Signal Queries: viewChild, viewChildren, contentChild, contentChildren
- Content Projection, Directive Composition, Programmatic Components
- Data Loading mit resource() und @defer
- Accessible Composition mit @angular/aria
- Component Antipatterns und Agent-Driven Refactoring
Modul 04: Signal Forms
- Signal Form Basics: form(), Fields, Submission
- Validation: validators, validateHttp, validateAsync, validateStandardSchema
- Error Handling mit isSignalErrorState
- Advanced: Arrays, Nested Objects, Dynamic Forms
- Signal Forms und Agents: AI-geschriebene Tests
Modul 05: RxJS dort, wo es weiterhin zählt
- Subscribe vs Stream vs Signal
- Flattening und Combining Strategies
- Error Handling und Custom Operators
- Signal Interop in beide Richtungen, rxResource, debounce
- Agent-Assisted RxJS to Signals Migration
Modul 06: State Management mit NgRx SignalStore
- SignalStore Fundamentals: withState(), withComputed(), withMethods()
- Entity Management mit withEntities()
- Store Composition: signalMethod, withFeature, withProps
- Resource Extensions und Linked State
- Das Events Plugin und Deep Signals
Modul 07: Advanced Routing und App Initialization
- provideAppInitializer mit injectAsync, @Service
- Functional Guards, HTTP Interceptors, Error Handling
- Signal-Based Resolvers und Route Inputs
- animate.enter / animate.leave und View Transitions
- Route-Driven SignalStore
Modul 08: Advanced Testing mit Vitest und Playwright
- Karma to Vitest Migration
- Vitest Fundamentals: Pipes, Directives, Services, Components
- Signal Inputs, Forms und Store Testing
- Zoneless Async: whenStable, TestBed.tick, getLastFixture
- Playwright Fundamentals
- Agent-Written Specs, bewiesen durch Mutation
Modul 09: WebMCP - The Agentic Web
- Eine Counterpart Page für den Agent
- Signals als WebMCP Tools
- WebMCP in Components
- Ein Signal Form als Agent Tool
- SignalStore Methods als Tools
- Navigation Tools für den Agent
- WebMCP Tools End to End testen
Modul 10: Optimization und Compliance
- Core Web Vitals Messung mit Lighthouse
- Bundle Optimization mit Rolldown und Budgets
- @defer by Trigger, Zoneless, DevTools Profiling
- Virtual Scrolling und Image Optimization
- WCAG 2.2 AA mit @angular/aria
- Compliance Gates auf dem Pull Request
Modul 11: Hybrid Rendering und Hydration
- Server Routes mit RenderMode und getPrerenderParams
- Express 5 mit AngularNodeAppEngine
- Incremental Hydration und Hydrate Triggers
- Transfer Cache mit httpResource
- CSR vs SSR: gemessenes Delta
Modul 12: Agentic Angular DevOps
- Der Deployment Agent: Allowlists und Manifest
- Bootstrapping und Hardening einer Ubuntu Box
- Multi-Stage Container Serving mit Caddy
- DNS vor dem ersten ACME Versuch
- Core Web Vitals und SEO Loop