Master Angular in real depth — from fundamentals to production
A genuinely detailed, project-driven curriculum — 26 weeks across 7 phases, each week with its own learning objectives, topic breakdown and hands-on exercise. Signals, standalone components, routing, forms, RxJS, testing, performance, security and SSR — ending with a capstone app you ship yourself.
Prerequisites & tooling
What you should already know
- Comfortable writing HTML, CSS and everyday JavaScript
- Basic TypeScript is helpful, but we cover it in Week 1
- Familiarity with the command line and Git
- Node.js (LTS) installed on your machine
Stack you'll work with
Everything is taught on the current Angular toolchain — no legacy NgModules required.
Your 26-week curriculum
Twenty-five modules, from your first TypeScript refresher to a capstone Angular application you design, build and deploy yourself.
Modern JavaScript & TypeScript for Angular
Build the language foundation every Angular concept sits on top of.
- Types, interfaces & generics
- Classes & decorators — the mechanism Angular is built on
tsconfig.jsondeep dive & strict mode
Angular CLI, Tooling & Project Anatomy
Get comfortable with the tools you'll use every day for the rest of the course.
- The Vite/esbuild-based application builder
- Project structure:
angular.json,main.ts, app config - Editor setup, Angular Language Service & DevTools
Standalone Components & the Angular Mental Model
Learn how Angular assembles an application without NgModules.
- Bootstrapping with
bootstrapApplication - Standalone components, directives & pipes
- Providers &
ApplicationConfig
Component Fundamentals & Templates
Build your first real components and internalize Angular's template syntax.
- Interpolation, property & event binding
input(),output()&model()signal-based APIs- Lifecycle hooks & signal-based alternatives
Signals Deep Dive
Master Angular's fine-grained reactivity primitive.
signal(),computed()&effect()in depthlinkedSignal()for dependent, resettable state- Signals vs. RxJS — when to reach for each
New Control Flow & Template Syntax
Replace structural directives with Angular's built-in control flow.
@if/@else if/@else@for, track expressions & performance implications- Migrating
*ngIf/*ngFortemplates to the new syntax
Styling, View Encapsulation & Content Projection
Compose flexible, reusable UI components.
- View encapsulation modes (Emulated, ShadowDom, None)
ng-content, multi-slot projection & fallback content- Responsive layout with the Angular CDK Layout module
Directives, Pipes & the Angular CDK
Extend Angular's template language with your own reusable behavior.
- Custom structural directives — how
*ngIf-style directives work - Pure vs. impure pipes, and building your own
- CDK Overlay, Portal & DragDrop basics
Dependency Injection & Services Deep Dive
Structure application logic so it's testable and swappable.
- Providers,
providedInstrategies & tree-shakable services - The
inject()function vs. constructor injection - Injection tokens & multi-providers
Routing Fundamentals
Turn a single component tree into a real multi-view application.
- Route configuration & the Router service
- Router outlets & nested/child routes
- Programmatic navigation &
routerLink
Advanced Routing
Control access, loading and performance at the routing layer.
- Functional guards (
CanActivate,CanDeactivate,CanMatch) - Lazy loading with
loadComponent&loadChildren - Deferrable views with
@defer(triggers, placeholders, errors)
Reactive Forms
Handle complex, validated user input the Angular way.
FormControl,FormGroup&FormArray(typed forms)- Async validators & debounced validation
- Cross-field validation patterns
Template-Driven & Dynamic Forms
Know when template-driven forms fit better, and how to generate forms from data.
- Template-driven forms &
ngModel - Building a schema-driven dynamic form renderer
- Custom form control components (
ControlValueAccessor)
HttpClient, Interceptors & API Integration
Talk to real backends reliably.
HttpClientbasics: GET/POST/PUT/DELETE, typed responses- Functional interceptors (auth headers, error handling, logging)
- Retry, timeout & error-recovery strategies
RxJS Deep Dive
Get fluent in the reactive-stream operators Angular is built on.
- Subjects,
BehaviorSubject&ReplaySubject - Core operators:
map,switchMap,mergeMap,concatMap,exhaustMap - Subscription management & memory leaks
Bridging Signals & Observables
Use both reactivity models together without fighting them.
toSignal()&toObservable()resource()andrxResource()for async data loading- Avoiding common interop bugs (stale closures, double-subscribing)
State Management at Scale
Choose and implement a state strategy that scales past a single component.
- Signal-based state services (the "poor man's store")
- NgRx Signal Store fundamentals
- Entity state patterns
Unit Testing
Build confidence in your components and services with fast, isolated tests.
- Vitest/Jasmine fundamentals &
TestBed - Testing components with signal inputs/outputs
- Mocking services & HTTP
Component, Integration & E2E Testing
Test the seams — how components and pages actually behave together.
- Component harnesses & the CDK Testing Harness API
- End-to-end testing with Playwright
- CI test strategy & flaky-test triage
Performance Optimization & Zoneless Change Detection
Make an app that stays fast as it grows.
- Zoneless change detection & OnPush strategy
- Bundle analysis & lazy-loading strategy review
- Virtual scrolling with the CDK
SSR, Hydration & Deployment
Ship an app that starts fast for real users.
- Server-side rendering with Angular
- Hydration & avoiding hydration mismatches
- Deploying to a hosting provider (static + SSR)
Animations, Accessibility & Internationalization
Polish the app for real, diverse users.
- WCAG basics & accessible component patterns
- Keyboard navigation & focus management
- Angular i18n & runtime translation strategies
Security, Authentication & Authorization
Protect an application and its users.
- XSS, CSRF & Angular's built-in sanitization
- Token-based auth (JWT) & refresh-token flows
- OAuth2/OIDC login flows in an SPA
Micro-Frontends & Advanced Architecture
See how large orgs split Angular apps apart.
- Monorepo strategies (Nx) for multi-app Angular workspaces
- Module federation & micro-frontend patterns
- Shared design-system libraries across apps
Capstone: Ship a Full Application
Plan, build, test and ship a complete Angular application solo.
- Full implementation using signals, routing, forms & state
- Performance pass & accessibility pass
- SSR + deployment