Angular Mastery Path¶

Mastery Path

BOOTCAMP

VINOD BHANUJA

Angular is the framework you reach for when an application has to be big, long-lived and maintained by more than one team. It gives you the whole toolkit in one coordinated release — components, a reactivity model, dependency injection, a router, forms, an HTTP client, server-side rendering, testing and a CLI that can upgrade your code for you. This course teaches modern Angular: standalone components, signals everywhere, zoneless change detection, the new template control flow, signal forms, resources for async data, and per-route server rendering — and, just as importantly, the machinery underneath, so you can reason about what your app is doing instead of copying patterns.

The course targets Angular 22.2 (the version on npm while it was written, with TypeScript 6.0 and Vitest 5). Level 1 builds a routed reading-list app from scratch: the CLI, components and templates, signals, control flow, inputs and outputs, services, routing and HttpClient. Level 2 makes apps real: reactive and signal forms, dependency injection in depth, RxJS and interop, resource/httpResource, guards and resolvers, interceptors, pipes and directives — ending with an issue tracker. Level 3 goes under the hood: change detection without Zone.js, composition, state management, @defer, performance, SSR and hydration, testing, accessibility and security — ending with a server-rendered catalog. Level 4 is about production: build configurations, libraries, i18n, custom elements, upgrades, architecture, deployment, error handling and a readiness review, finishing with a capstone.

Every lesson has a How It Actually Works section — what the compiler turns a template into, why a plain field changed in setTimeout doesn't update the screen any more, how a signal knows who depends on it, why track $index moves your typed text to the wrong row, how hydration adopts server HTML instead of rebuilding it.

Verified against real builds — and honest about what moves

The code in this course was compiled with ng build, tested with ng test and, for anything visual, driven in a real browser while writing. Terminal and browser output shown on these pages is output we actually observed — including the places where our first attempt was wrong, because those are the lessons worth learning. Angular changes defaults between major versions (new projects became zoneless, OnPush became the default, @Service() arrived in 22), so lessons say which behaviour belongs to which version. Where something couldn't be run locally (a Docker image, hosting-provider specifics), the lesson says so.

How the program is organized¶

Level	Focus	Modules
Level 1 · Entry	What Angular is, the CLI, components & templates, signals, control flow, inputs/outputs/`model()`, services & DI, routing, `HttpClient`	9 topics + 1 project (a reading-list app with live search)
Level 2 · Intermediate	Reactive forms, signal forms, DI in depth, RxJS, signals ↔ RxJS interop, `resource` & `httpResource`, guards & resolvers, interceptors, pipes & directives	9 topics + 1 project (an issue tracker with an in-memory API)
Level 3 · Advanced	Change detection & zoneless, projection & queries, state management, `@defer`, performance, SSR & hydration, testing, accessibility, security	9 topics + 1 project (a server-rendered product catalog)
Level 4 · Master	Build configurations, libraries, i18n, Angular Elements, upgrades & migrations, architecture, deployment, observability, production readiness	9 topics + 1 capstone (the catalog taken to production standard)

How to use this site¶

Build as you read. Create a project in Level 1, lesson 02 and keep it open. Code blocks are titled with their file path (src/app/book-store.ts) so you know exactly where each piece lives.
Run ng build, not just ng serve. The production build is where you see bundle sizes, lazy chunks and budget errors, and many lessons ask you to read its output.
Know TypeScript first. Angular is TypeScript everywhere; if classes, interfaces, union types and generics are new, start with TypeScript Mastery Path. For browser fundamentals see JavaScript Mastery Path; for the server runtime behind SSR, Node.js Mastery Path; for end-to-end testing, Playwright Mastery Path; and to compare frameworks, React Mastery Path builds similar projects.
Do the Exercise at the end of each lesson; the module-10 projects build on them.