Angular Agentic Software Engineering (NGADV)

Course Overview

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. Signals are the primary state primitive in modern Angular, and you cover the complete API including `signal()`, `computed()`, `effect()`, `linkedSignal()`, and `model()`, together with `httpResource()`, resource `chain()`, streaming resources, and `debounced()` for declarative data loading. The component module then builds on that foundation with signal queries, modern control flow, content projection, directive composition, programmatic components, `@angular/aria`, and `@defer`.

Signal Forms introduce a schema-driven approach to form construction where field state is exposed as signals that wire directly into your templates, including `validateHttp`, `FormValueControl`, JSON-driven dynamic forms, and date validators. You then step into reactive programming with RxJS, covering flattening and combining strategies, error handling, custom operators, and the interop patterns that connect observables and signals in both directions.

Application-level state comes next with NgRx SignalStore. You build stores using `withState()`, `withComputed()`, `withMethods()`, and `withEntities()`, compose them with `withFeature` and `withProps`, extend resources, and use the events plugin. Advanced routing follows, covering functional guards, HTTP interceptors, signal-based resolvers, route inputs, `provideAppInitializer` with `injectAsync`, `animate.enter`/`animate.leave`, and view transitions.

The last modules focus on production quality. Testing with Vitest covers signal input tests, service tests, SignalStore tests, zoneless async testing, and Playwright, built around a demo where the agent writes the spec and a mutation round proves it. WebMCP then turns the application itself into something an agent can drive: seven demos expose a plain page, a signal, a component, a signal form, a SignalStore and the router as agent tools, and a suite that calls those tools the way an agent would. Optimization and compliance covers Lighthouse, Rolldown bundle optimization, `@defer` triggers, virtual scrolling, image optimization, WCAG 2.2 AA with `@angular/aria`, and a gate on the pull request. Hybrid rendering closes the Angular topics with server routes, `AngularNodeAppEngine`, incremental hydration, and the transfer cache. The course ends with an agentic DevOps track that deploys and verifies a real site.

By the end of the workshop you will have a thorough understanding of how modern Angular applications are structured and a set of agentic workflows that make you faster at building and maintaining them. The combination of deep Angular knowledge and effective AI collaboration is what this course is designed to give you.