Class Details
This workshop is for experienced Angular developers who want to master modern Angular development and learn to work with AI agents as a natural part of their daily workflow. Over twelve modules you will build real Angular v22 applications using standalone components, signal-based state, signal queries, and inject-based dependency injection throughout. Every concept is introduced through working demos that you can run, extend, and experiment with.
You start by setting up Claude Code and GitHub Copilot as your development partners, learning to write harness files, skills, subagents, and hooks that shape how these agents assist you across every module that follows. The tools and habits you establish here stay with you for the rest of the course, so agentic development is not a standalone topic but a way of working you bring to every subsequent module.
With your tooling in place, you move into Angular’s reactive core: the complete signals API, httpResource() and resource chaining, signal queries, modern control flow, Signal Forms, and the RxJS interop patterns that connect observables and signals in both directions. Application-level state follows with NgRx SignalStore, then advanced routing, and finally the production topics: Vitest and Playwright, WebMCP, optimization and compliance, hybrid rendering, and an agentic DevOps track that deploys and verifies a real site.
Audience
- Experienced Angular developers adopting modern Angular v22 patterns
- Teams migrating from legacy patterns to signals, Signal Forms, and NgRx SignalStore
- Developers seeking structured coverage of advanced routing, testing, performance, compliance, and SSR
Prerequisites
- Solid experience with Angular (components, services, routing, forms)
- Familiarity with TypeScript and RxJS basics
Curriculum
Module 01: Agentic Angular Software Engineering
- The Angular CLI MCP Server
- Harness Files: CLAUDE.md, AGENTS.md, copilot-instructions.md
- Angular Agent Skills
- The Angular Expert Subagent
- Hooks and Quality Gates
Module 02: Mastering Signals
- Signals Fundamentals: signal(), computed(), effect()
- Signal Patterns: inputs, model(), linkedSignal, equality
- Async Signals: httpResource(), resource chain(), debounced()
- @Service and injectAsync
- Signals Tooling: the DevTools signal graph
Module 03: Component Composition and Signal Queries
- Modern Template Syntax and Control Flow
- Signal Queries: viewChild, viewChildren, contentChild, contentChildren
- Content Projection, Directive Composition, Programmatic Components
- Data Loading with resource() and @defer
- Accessible Composition with @angular/aria
- Component Antipatterns and Agent-Driven Refactoring
Module 04: Signal Forms
- Signal Form Basics: form(), fields, submission
- Validation: validators, validateHttp, validateAsync, validateStandardSchema
- Error Handling with isSignalErrorState
- Advanced: arrays, nested objects, dynamic forms
- Signal Forms and Agents: AI-written tests
Module 05: RxJS Where It Still Matters
- Subscribe vs Stream vs Signal
- Flattening and Combining Strategies
- Error Handling and Custom Operators
- Signal Interop Both Ways, rxResource, debounce
- Agent-Assisted RxJS to Signals Migration
Module 06: State Management with NgRx SignalStore
- SignalStore Fundamentals: withState(), withComputed(), withMethods()
- Entity Management with withEntities()
- Store Composition: signalMethod, withFeature, withProps
- Resource Extensions and Linked State
- The Events Plugin and Deep Signals
Module 07: Advanced Routing and App Initialization
- provideAppInitializer with injectAsync, @Service
- Functional Guards, HTTP Interceptors, Error Handling
- Signal-Based Resolvers and Route Inputs
- animate.enter / animate.leave and View Transitions
- Route-Driven SignalStore
Module 08: Advanced Testing with Vitest and Playwright
- Karma to Vitest Migration
- Vitest Fundamentals: pipes, directives, services, components
- Signal Inputs, Forms and Store Testing
- Zoneless Async: whenStable, TestBed.tick, getLastFixture
- Playwright Fundamentals
- Agent-Written Specs, Proven by Mutation
Module 09: WebMCP - The Agentic Web
- A Counterpart Page for the Agent
- Signals as WebMCP Tools
- WebMCP in Components
- A Signal Form as an Agent Tool
- SignalStore Methods as Tools
- Navigation Tools for the Agent
- Testing WebMCP Tools End to End
Module 10: Optimization and Compliance
- Core Web Vitals Measurement with Lighthouse
- Bundle Optimization with Rolldown and Budgets
- @defer by Trigger, Zoneless, DevTools Profiling
- Virtual Scrolling and Image Optimization
- WCAG 2.2 AA with @angular/aria
- Compliance Gates on the Pull Request
Module 11: Hybrid Rendering and Hydration
- Server Routes with RenderMode and getPrerenderParams
- Express 5 with AngularNodeAppEngine
- Incremental Hydration and Hydrate Triggers
- Transfer Cache with httpResource
- CSR vs SSR Measured Delta
Module 12: Agentic Angular DevOps
- The Deployment Agent: Allowlists and Manifest
- Bootstrapping and Hardening an Ubuntu Box
- Multi-Stage Container serving with Caddy
- DNS before the First ACME Attempt
- Core Web Vitals and SEO Loop