Angular Architecture

Understanding the core building blocks and architecture of Angular applications

Angular is a platform and framework for building single-page client applications using HTML, CSS, and TypeScript. Angular applications are built from components organized into NgModules or as standalone components.

Core Building Blocks

Angular applications consist of several key architectural elements:

Components

The fundamental UI building blocks that control views

Templates

HTML views with Angular-specific syntax and bindings

Services

Reusable business logic and data access

Dependency Injection

A design pattern for providing dependencies to classes

Application Structure

A typical Angular application follows this hierarchical structure:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

// Root component
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>{{ title }}</h1>
    <app-header />
    <router-outlet />
  `
})
export class AppComponent {
  title = 'My Angular App';
}

// Bootstrap the application
bootstrapApplication(AppComponent);

Standalone Components vs NgModules

Angular supports two approaches for organizing applications:

Standalone Components (Modern)

Standalone components are the recommended approach for new Angular applications.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'user-profile',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="profile">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
    </div>
  `
})
export class UserProfileComponent {
  user = { name: 'John Doe', email: '[e-mail]' };
}

NgModules (Legacy)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Change Detection

Angular automatically detects when component data changes and updates the view accordingly.

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

@Component({
  selector: 'counter',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

Rendering Pipeline

1. Component Initialization

   Angular creates component instances and initializes their properties

2. Template Compilation

   Templates are compiled into executable functions

3. Change Detection

   Angular checks for changes and updates the DOM

4. Lifecycle Hooks

   Component lifecycle hooks are executed at appropriate times

Dependency Injection System

Angular’s DI system provides dependencies to components and services:

import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'data-display',
  standalone: true,
  template: `<div>{{ data }}</div>`
})
export class DataDisplayComponent {
  private http = inject(HttpClient);
  data: any;

  ngOnInit() {
    this.http.get('/api/data').subscribe(result => {
      this.data = result;
    });
  }
}

Always inject services rather than creating instances manually to ensure proper dependency management and testability.

Compiler Modes

Angular supports two compilation modes:

• AOT (Ahead-of-Time): Compiles during build time (production default)
• JIT (Just-in-Time): Compiles in the browser (development mode)

Best Practices

1. Use standalone components for new applications
2. Keep components focused on presentation logic
3. Move business logic to services
4. Use OnPush change detection when possible for better performance
5. Leverage dependency injection for loose coupling

Next Steps

Components

Learn about component decorators and lifecycle

Dependency Injection

Understand Angular’s DI system

Templates

Master template syntax and bindings

Services

Create reusable services