Angular

An opinionated, complete front-end platform.

Angular is taught here in 13 lessons, running from Components and templates through to Server rendering, hydration and deployment. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

TrackFront-end Development
Lessons13
LevelBeginner to intermediate
Reading timeabout 3 hours
PrerequisitesHelpful, but not required: Next.js

Lessons

  1. Components and templatesStandalone components, signal-based state, inputs and outputs, and the built-in template control flow.
  2. Services and dependency injectionInjectable services, the inject() function, providers and tokens, plus an HTTP layer with interceptors and typed responses.
  3. Routing and formsRoute configuration with lazy loading and functional guards, then typed reactive forms with validation that the user can act on.
  4. Setting up a workspace with the Angular CLICreate a workspace with the options that matter, understand the files the CLI generates, and know where configuration actually lives.
  5. Signals, computed values and effectsUse signal, computed, linkedSignal and effect for the state that drives a template, and know when an observable is still the better tool.
  6. Template control flow, pipes and deferred viewsUse the built-in control flow blocks, keep pipes pure, and split a heavy page with @defer so the first paint is not waiting on a chart library.
  7. Component lifecycle and DOM interactionReplace the old lifecycle hooks with afterNextRender and signal queries, and touch the DOM through the renderer instead of querySelector.
  8. HTTP, interceptors and async resourcesConfigure provideHttpClient, write functional interceptors for auth and retries, and use resource and httpResource to get loading and error states without boilerplate.
  9. RxJS essentials for AngularThe handful of operators that solve real problems, the subject patterns that avoid memory leaks, and when the answer is a signal instead.
  10. Advanced reactive and signal formsDynamic field arrays, cross-field and async validators, custom controls with ControlValueAccessor, and how the signal-based forms model changes the picture.
  11. Change detection, zoneless and performanceHow rendering is scheduled without Zone.js, what OnPush changes, how to profile a slow view, and how to keep a bundle inside its budget.
  12. Testing Angular applicationsTestBed with standalone components, component harnesses, HttpTestingController, and how to test signal and zoneless code reliably.
  13. Server rendering, hydration and deploymentTurn on rendering, control it per route, avoid the platform traps, and choose a hosting model that matches how you build.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js React Next.js jQuery ECharts Chart.js SVG Font Awesome

FAQ

How long does the Angular course take?
It has 13 lessons, about 3 hours of reading. Expect roughly twice that if you type out and run every example.
Do I need prior experience for Angular?
Not strictly. It helps to have read Next.js first, because some lessons build on it, but every lesson explains its own assumptions.
What should I read after Angular?
Continue with jQuery (12 lessons), the next course in Front-end Development.