Skip to main content
Angular Architecture

​
Module Overview

Estimated Time: 2-3 hours | Difficulty: Beginner | Prerequisites: HTML, CSS, JavaScript basics
Welcome to Angular! This module covers everything you need to get started with Angular development, from installation to understanding how Angular applications work under the hood. What You’ll Learn:
  • What Angular is and why it’s powerful
  • Setting up your development environment
  • Creating projects with Angular CLI
  • Understanding the project structure
  • TypeScript essentials for Angular
  • How Angular applications bootstrap

​
What is Angular?

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Developed and maintained by Google, Angular provides:

Complete Solution

Routing, forms, HTTP, testing—everything included out of the box

TypeScript First

Built with TypeScript for better tooling and maintainability

Component-Based

Build UIs from reusable, self-contained components

Enterprise Ready

Scalable architecture for large applications

​
Angular vs React vs Vue

FeatureAngularReactVue
TypeFull FrameworkLibraryProgressive Framework
LanguageTypeScriptJavaScript/TypeScriptJavaScript/TypeScript
ArchitectureOpinionatedFlexibleFlexible
Learning CurveSteeperModerateGentle
Best ForEnterprise AppsFlexible ProjectsProgressive Adoption
Maintained ByGoogleMetaCommunity

​
Setting Up Your Environment

​
Prerequisites

  1. Node.js (version 18.x or higher)
  2. npm (comes with Node.js)
  3. Code Editor (VS Code recommended)
# Check Node.js version
node --version  # Should be 18.x or higher

# Check npm version
npm --version   # Should be 9.x or higher

​
Installing Angular CLI

The Angular CLI (Command Line Interface) is the official tool for creating, developing, and maintaining Angular applications. 
# Install Angular CLI globally
npm install -g @angular/cli

# Verify installation
ng version
Pro Tip: If you encounter permission errors on macOS/Linux, consider using nvm (Node Version Manager) or prefix with sudo.

​
VS Code Extensions

Install these extensions for the best Angular development experience: 
// Recommended extensions
{
  "recommendations": [
    "angular.ng-template",          // Angular Language Service
    "bradlc.vscode-tailwindcss",    // Tailwind CSS IntelliSense
    "ms-vscode.vscode-typescript-next", // TypeScript
    "esbenp.prettier-vscode",       // Code formatting
    "nrwl.angular-console"          // Nx Console (optional)
  ]
}

​
Creating Your First Angular App

​
Generate a New Project

# Create a new Angular project
ng new my-first-app

# Navigate into the project
cd my-first-app

# Start the development server
ng serve
During project creation, you’ll be asked:
  1. Would you like to add Angular routing? → Yes
  2. Which stylesheet format? → CSS, SCSS, Sass, or Less
Recommendation: Choose SCSS for more powerful styling capabilities with variables, nesting, and mixins.

​
Project Structure

my-first-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts      # Root component
│   │   ├── app.component.html    # Root template
│   │   ├── app.component.scss    # Root styles
│   │   ├── app.component.spec.ts # Root tests
│   │   ├── app.config.ts         # App configuration
│   │   └── app.routes.ts         # Route definitions
│   │
│   ├── assets/                   # Static assets (images, fonts)
│   ├── index.html               # Main HTML file
│   ├── main.ts                  # Application entry point
│   └── styles.scss              # Global styles
│
├── angular.json                 # Angular CLI configuration
├── package.json                 # Dependencies and scripts
├── tsconfig.json               # TypeScript configuration
└── tsconfig.app.json           # App-specific TS config

​
Understanding Key Files

​
main.ts - Application Entry Point

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

// Bootstrap the application with the root component
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

​
app.config.ts - Application Configuration

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';

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

​
app.component.ts - 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.scss'
})
export class AppComponent {
  title = 'my-first-app';
}

​
TypeScript Essentials for Angular

Angular is built with TypeScript. Here are the key concepts you need:

​
Type Annotations

// Basic types
let name: string = 'Angular';
let version: number = 17;
let isAwesome: boolean = true;
let features: string[] = ['Signals', 'Standalone', 'SSR'];

// Object types
interface User {
  id: number;
  name: string;
  email: string;
  role?: string;  // Optional property
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: '[email protected]'
};

​
Classes and Decorators

// Classes with TypeScript
class UserService {
  private users: User[] = [];
  
  constructor(private http: HttpClient) {}
  
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }
}

// Decorators (heavily used in Angular)
@Component({
  selector: 'app-user',
  template: '<h1>{{ user.name }}</h1>'
})
export class UserComponent {
  @Input() user!: User;
  @Output() selected = new EventEmitter<User>();
}

​
Generics

// Generic function
function wrapInArray<T>(value: T): T[] {
  return [value];
}

// Generic interface
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// Usage
const response: ApiResponse<User[]> = {
  data: [{ id: 1, name: 'John', email: '[email protected]' }],
  status: 200,
  message: 'Success'
};

​
Angular CLI Commands

The CLI provides many useful commands: 
# Development server
ng serve                    # Start dev server at localhost:4200
ng serve --port 3000       # Use custom port
ng serve --open            # Open browser automatically

# Generate code
ng generate component user  # or: ng g c user
ng generate service data   # or: ng g s data
ng generate pipe currency  # or: ng g p currency
ng generate directive highlight  # or: ng g d highlight
ng generate guard auth     # or: ng g g auth

# Build
ng build                   # Development build
ng build --configuration production  # Production build

# Testing
ng test                    # Run unit tests
ng e2e                     # Run end-to-end tests

# Linting
ng lint                    # Lint your code

​
Component Generation Options

# Generate a component with inline template and styles
ng g c user --inline-template --inline-style

# Generate without test file
ng g c user --skip-tests

# Generate in a specific directory
ng g c features/user/user-profile

# Flat (no folder)
ng g c shared/button --flat

​
How Angular Apps Bootstrap

Understanding the bootstrap process helps you debug issues and configure your app correctly. 
┌─────────────────────────────────────────────────────────────────────────┐
│                    Angular Bootstrap Process                             │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   1. Browser loads index.html                                            │
│         │                                                                │
│         ▼                                                                │
│   2. index.html loads main.ts via <script>                              │
│         │                                                                │
│         ▼                                                                │
│   3. main.ts calls bootstrapApplication(AppComponent, appConfig)        │
│         │                                                                │
│         ▼                                                                │
│   4. Angular creates the root injector with providers from appConfig    │
│         │                                                                │
│         ▼                                                                │
│   5. Angular instantiates AppComponent                                   │
│         │                                                                │
│         ▼                                                                │
│   6. Angular renders AppComponent's template into <app-root>            │
│         │                                                                │
│         ▼                                                                │
│   7. Zone.js starts monitoring for async events                         │
│         │                                                                │
│         ▼                                                                │
│   8. Application is ready for user interaction!                          │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

​
index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyFirstApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <!-- Angular will render AppComponent here -->
  <app-root></app-root>
</body>
</html>

​
Your First Component

Let’s create a simple component to understand the basics: 
ng generate component hello-world
This creates: 
src/app/hello-world/
├── hello-world.component.ts
├── hello-world.component.html
├── hello-world.component.scss
└── hello-world.component.spec.ts

​
Component Code

// hello-world.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  standalone: true,
  imports: [],
  templateUrl: './hello-world.component.html',
  styleUrl: './hello-world.component.scss'
})
export class HelloWorldComponent {
  name = 'Angular';
  
  greet() {
    alert(`Hello from ${this.name}!`);
  }
}

<!-- hello-world.component.html -->
<div class="greeting">
  <h1>Hello, {{ name }}!</h1>
  <p>Welcome to your first Angular component.</p>
  <button (click)="greet()">Say Hello</button>
</div>

/* hello-world.component.scss */
.greeting {
  padding: 2rem;
  text-align: center;
  
  h1 {
    color: #DD0031;
  }
  
  button {
    background: #DD0031;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    
    &:hover {
      background: #C3002F;
    }
  }
}

​
Using the Component

// app.component.ts
import { Component } from '@angular/core';
import { HelloWorldComponent } from './hello-world/hello-world.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HelloWorldComponent],  // Import the component
  template: `
    <main>
      <app-hello-world></app-hello-world>
    </main>
  `
})
export class AppComponent {}

​
Angular DevTools

Install the Angular DevTools browser extension for debugging:
  1. Install from Chrome Web Store or Firefox Add-ons
  2. Open Chrome DevTools (F12)
  3. Look for the “Angular” tab
Tip: Angular DevTools only works with development builds. Production builds have debugging disabled.

​
DevTools Features

  • Component Explorer: Inspect component tree and properties
  • Profiler: Analyze change detection performance
  • Router: Debug routing state

​
Practice Exercise

Exercise: Create a Counter App

Create a simple counter application with:
  1. A display showing the current count
  2. Increment button (+)
  3. Decrement button (-)
  4. Reset button
Bonus: Add a maximum value of 10 and minimum of 0
// counter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <div class="counter">
      <h2>Count: {{ count }}</h2>
      <div class="buttons">
        <button (click)="decrement()" [disabled]="count <= 0">-</button>
        <button (click)="reset()">Reset</button>
        <button (click)="increment()" [disabled]="count >= 10">+</button>
      </div>
    </div>
  `,
  styles: [`
    .counter {
      text-align: center;
      padding: 2rem;
    }
    .buttons {
      display: flex;
      gap: 1rem;
      justify-content: center;
    }
    button {
      padding: 0.5rem 1rem;
      font-size: 1.2rem;
      cursor: pointer;
    }
    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  `]
})
export class CounterComponent {
  count = 0;
  
  increment() {
    if (this.count < 10) {
      this.count++;
    }
  }
  
  decrement() {
    if (this.count > 0) {
      this.count--;
    }
  }
  
  reset() {
    this.count = 0;
  }
}

​
Summary

In this module, you learned:
1

What Angular Is

A complete platform for building web applications maintained by Google
2

Environment Setup

How to install Node.js, Angular CLI, and configure VS Code
3

Project Creation

Using ng new to scaffold projects and understanding the file structure
4

TypeScript Essentials

Types, interfaces, classes, and decorators used in Angular
5

Bootstrap Process

How Angular applications start and render components

​
Next Steps

Next: Components Deep Dive

Learn about component architecture, data binding, and communication patterns