Install the Angular CLI

The Angular CLI scaffolds projects, generates code, and runs the dev server.

  npm install -g @angular/cli
ng version

Create a new application:

  ng new my-angular-app
# Choose routing: Yes
# Stylesheet format: CSS (or SCSS)
cd my-angular-app
ng serve

Open http://localhost:4200. The dev server reloads automatically when you save files.

Project Structure 

  my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts       # Root component class
│   │   ├── app.component.html     # Root template
│   │   ├── app.component.css      # Root styles
│   │   ├── app.config.ts          # App-level providers
│   │   └── app.routes.ts          # Route definitions
│   ├── assets/                    # Static files (images, icons)
│   ├── index.html                 # Single HTML shell
│   ├── main.ts                    # Bootstrap entry point
│   └── styles.css                 # Global styles
├── angular.json                   # Workspace configuration
├── package.json
└── tsconfig.json                  # TypeScript settings

Bootstrap Entry Point

src/main.ts bootstraps the application:

  import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

src/app/app.config.ts registers global providers:

  import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes)
  ]
};

Root Component 

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

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

Useful CLI Commands 

  ng serve              # Dev server at localhost:4200
ng build              # Production build → dist/
ng test               # Run unit tests (Karma/Jasmine)
ng generate component hero   # Create a new component
ng generate service api      # Create a new service

Shorthand for generate:

  ng g c hero    # component
ng g s api     # service
ng g m shared  # module (legacy; prefer standalone)

Folder Organization (Growing Apps) 

  src/app/
├── core/           # Singleton services, guards, interceptors
├── shared/         # Reusable components, pipes, directives
├── features/       # Feature modules or route folders
│   ├── dashboard/
│   └── users/
└── models/         # TypeScript interfaces and types

Environment Configuration

Angular uses angular.json for build targets. For API URLs, use environment files or runtime config:

  // src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

You’re ready to build components and templates in the next chapter.