Module Recap

Module 01 covered the foundation: what Angular is, how the CLI works, how a project is structured, and the component tree model. Here is what to take forward.

What you learned

Angular is an opinionated, batteries-included framework. Unlike React, which is a library, Angular ships with routing, forms, HTTP, and dependency injection. Teams get consistent answers to common problems without assembling a stack from scratch.

The Angular CLI is central to the workflow. ng new scaffolds a project, ng serve starts the dev server, ng generate creates components and services, and ng build produces the production build. You will use these throughout the course.

The project structure is deliberate. src/index.html is the shell Angular renders into. main.ts bootstraps the app. app.config.ts is where providers are registered. app.routes.ts is where routes are defined. Your code lives in src/app/.

Every Angular app is a component tree. Components nest by including each other’s selectors in their templates. <router-outlet> renders the page component that matches the current URL. Data flows down via inputs; events flow up via outputs.

How this connects to CinemaVault

The component tree you sketched mentally in Lesson 05 is the actual structure of CinemaVault:

App
├── NavBar        ← always visible; contains the search form
├── RouterOutlet  ← renders the current page
│   ├── Home      ← trending + popular movie grids
│   ├── Browse    ← filterable movie grid
│   ├── SearchResults
│   ├── MovieDetail
│   └── Watchlist
└── Toast         ← always visible; displays brief messages

Every component in this tree is a TypeScript class decorated with @Component. Every route is a mapping from a URL path to one of the page components. The app.config.ts will register provideRouter and provideHttpClient to enable routing and HTTP. All of this is the skeleton you will fill out across the next six modules.

Key terms

Term	What it means
Angular CLI	The command-line tool that scaffolds, generates, serves, and builds Angular apps
ng new	Creates a new Angular project
ng serve	Starts the dev server with live reload
bootstrapApplication	The function in main.ts that starts the Angular app
Root component	The top-level component (App) rendered into <app-root> in index.html
Component tree	The hierarchical structure of components that makes up an Angular app
<router-outlet>	The placeholder Angular fills with the page component for the current URL
@Component	The decorator that turns a TypeScript class into an Angular component

What is next

Module 02 — Components →

Module 02 dives into the @Component decorator in detail: how the selector, template, and styles work; how @Input() passes data down from parent to child; how @Output() emits events up; how lifecycle hooks let you run code at specific moments; and why the standalone component model is the right default for new Angular apps.