Angular Foundations
Angular Foundations picks up where TypeScript Foundations left off. You can write typed, structured JavaScript. Now you will use that foundation to build modern, production-quality single-page applications with Angular.
Every concept in this course is applied directly to CinemaVault — a movie catalog SPA powered by the TMDb API that you build from scratch and ship as a fully deployed app by the final module.
What you will learn
Section titled “What you will learn”- Angular fundamentals — what Angular is, how the CLI works, and how the framework renders your app
- Components — the
@Componentdecorator, templates,@Inputand@Output, lifecycle hooks, and the standalone component model - Templates and data binding — interpolation, property binding, event binding,
@if/@forcontrol flow, and pipes - Routing — client-side navigation,
RouterOutlet,RouterLink, route parameters, and route guards with side effects - Services and dependency injection —
@Injectable, the DI system, singleton services, shared signal state, andinject() - Reactive forms and HTTP —
FormGroup,FormControl, validators,HttpClient, and key RxJS operators
Prerequisites
Section titled “Prerequisites”This course assumes you have completed TypeScript Foundations or have equivalent knowledge. You should be comfortable with TypeScript types, interfaces, classes, generics, and async/await. No prior Angular experience is assumed.
The CinemaVault project
Section titled “The CinemaVault project”All seven modules build the same real application — CinemaVault, a movie catalog SPA powered by the TMDb API. You can explore the live app or browse the source on GitHub.
The finished app:
- Fetches live movie data from the TMDb API and types every response with TypeScript interfaces
- Shows trending and popular movies on the Home page
- Lets you filter movies by genre, year, and sort order on the Browse page
- Searches movies with a reactive form that debounces API calls
- Shows full movie details including cast on a dedicated Movie Detail page
- Lets you save movies to a Watchlist that persists across sessions via localStorage
- Protects the Watchlist route with a guard that shows a toast notification when empty
By Module 07 you will wire all of these pieces together into a working, deployed Angular app.
Modules
Section titled “Modules”01 — Getting Started with Angular
Section titled “01 — Getting Started with Angular”- What Is Angular
- Installing the Angular CLI
- Your First Angular App
- Project Structure
- The Component Tree
- Module Recap
02 — Components
Section titled “02 — Components”- What Is a Component
- Templates and the View
- @Input and @Output
- Lifecycle Hooks
- Standalone Components
- Module Recap
03 — Templates and Data Binding
Section titled “03 — Templates and Data Binding”- Interpolation and Property Binding
- Event Binding
- Two-Way Binding with ngModel
- @if and @for
- Pipes
- Module Recap
04 — Routing
Section titled “04 — Routing”- Client-Side Routing
- Defining Routes and RouterOutlet
- RouterLink and Active Links
- Route Parameters and ActivatedRoute
- Programmatic Navigation and Route Guards
- Module Recap
05 — Services and Dependency Injection
Section titled “05 — Services and Dependency Injection”- What Is a Service
- @Injectable and the DI System
- Creating and Injecting a Service
- Singleton Services and Shared State
- The inject() Function
- Module Recap
06 — Reactive Forms and HTTP
Section titled “06 — Reactive Forms and HTTP”- Reactive Forms: FormGroup and FormControl
- Validators and Error Display
- HttpClient and Observables
- RxJS Operators: map, catchError, switchMap
- Debounce and Search Patterns
- Module Recap