Angular Setup & Project Structure

Angular is a full-featured, opinionated framework built and maintained by Google. Unlike React or Vue, it ships everything you need out of the box: a router, forms library, HTTP client, and a dependency injection system. You write in TypeScript by default.

Prerequisites

You need Node.js 18+ and npm installed. Then install the Angular CLI globally:

npm install -g @angular/cli
ng version

Creating a Project

ng new my-app
cd my-app
ng serve

ng new asks two questions: whether to add routing (say yes) and which stylesheet format to use (pick CSS). It generates the project, installs dependencies, and you're ready.

Project Structure

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts       # Root component class
│   │   ├── app.component.html     # Root template
│   │   ├── app.component.css      # Root styles
│   │   ├── app.component.spec.ts  # Unit tests
│   │   └── app.module.ts          # Root NgModule
│   ├── main.ts                    # Bootstrap entry point
│   └── index.html                 # Shell HTML
├── angular.json                   # CLI config
└── tsconfig.json

What Each File Does

• app.component.ts — defines the component class, selector, and metadata.
• app.module.ts — declares every component, directive, and pipe the app uses. Imports feature modules.
• main.ts — bootstraps AppModule to kick off the application.
• index.html — the single HTML file. The <app-root> tag is where Angular mounts.

The Root Component

Every Angular app starts from a root component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

The @Component decorator is what makes a TypeScript class an Angular component. selector is the HTML tag you use to include it; templateUrl points to the template file.

The HTML it generates renders into the browser like any normal HTML. Here's what a minimal Angular component output looks like:

CLI Commands You'll Use Daily

ng generate (alias ng g) is the fastest way to add pieces to your app — it wires up the module declarations automatically.