🅰️ Angular Framework Architecture

What Is Angular?

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is developed and maintained by Google and is a complete reimagining of the original AngularJS (1.x). Where a library like React hands you one piece of the puzzle and lets you assemble the rest, a framework like Angular gives you the whole box — routing, forms, HTTP, testing, and build tooling — all designed to fit together.

💡 A useful analogy: If web development were construction, Angular is a full building system with standardized, prefabricated parts, its own tools, and detailed blueprints. You get everything to go from foundation to roof, with clear rules for how the pieces snap together. That structure is a burden on a tiny project and a lifesaver on a huge one.

Angular is deliberately opinionated. It ships a recommended way to structure code, fetch data, handle forms, and route between screens. On a solo weekend project that can feel like overkill. On a 40-person enterprise app that must stay maintainable for a decade, those shared conventions are exactly what keep the codebase coherent.

How Angular Got Here

Understanding a little history explains why Angular looks the way it does today — and why some tutorials you find online are dangerously out of date.

Two changes matter most for a learner in 2026:

• Standalone components (Angular 14–17): components no longer need to be registered in an NgModule. You can build entire apps without writing a single module. This is now the default when you generate a new project.
• Signals (Angular 16+): a new, fine-grained reactivity system that tracks exactly which values a template reads, so Angular can update only what actually changed instead of re-checking the whole component tree.

Angular vs Vue vs React

All three tools solve the same problem — keeping a user interface in sync with changing data — but they make different trade-offs. Knowing where each shines helps you choose (and helps you answer the interview question).

Crucially, the concepts transfer. Once you understand components, one-way data flow, reactive state, and dependency injection here, you will recognize the same ideas — under different names — in Vue and React.

The Core Building Blocks

An Angular application is a tree of components that lean on services for shared work, all wired together by dependency injection. Here is how the pieces relate:

Components

A component controls a patch of screen called a view. It bundles three things: a template (the HTML), styles (the CSS), and a class (the TypeScript that holds state and behavior). Modern Angular components are standalone — they declare their own dependencies through imports and need no surrounding module.

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

@Component({
  selector: 'app-hero-detail',
  standalone: true,
  template: `
    <h2>{{ hero().name }} details</h2>
    <button (click)="rename()">Rename</button>
  `,
})
export class HeroDetailComponent {
  // signal() creates a reactive value the template tracks automatically
  hero = signal({ id: 1, name: 'Windstorm' });

  rename(): void {
    this.hero.update(h => ({ ...h, name: 'Magneta' }));
  }
}

💡 Analogy: A component is a specialized worker at a station. The template is the blueprint it follows, the styles are its uniform, and the class is the know-how that tells it what to do.

Templates

A template is HTML enhanced with Angular's binding syntax and the new built-in control flow. It is the declarative description of what the view should look like for the current state.

<div class="hero-detail">
  <h2>{{ hero().name | uppercase }} Details</h2>
  <label>
    Name:
    <input [value]="hero().name" (input)="onNameInput($event)" />
  </label>

  @if (hero().active) {
    <p>This hero is on active duty.</p>
  } @else {
    <p>This hero is resting.</p>
  }
</div>

We cover binding and control flow in depth in the next two lessons. For now, notice the shape: {{ }} shows data, [value] pushes data into an element, (input) listens for events, and @if conditionally renders markup.

Services

A service is a plain class with a focused job — fetching data, logging, caching — that is not tied to any one view. Marking it @Injectable({ providedIn: 'root' }) makes it a singleton available anywhere in the app.

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface Hero { id: number; name: string; }

@Injectable({ providedIn: 'root' })
export class HeroService {
  private http = inject(HttpClient);
  private heroesUrl = '/api/heroes';

  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl);
  }
}

💡 Analogy: Services are the utility companies of your app — water, power, waste collection. Any building (component) can plug into them without having to generate its own electricity.

Signals & Reactivity

The heart of a modern Angular app is reactivity: when a value changes, the view that depends on it updates automatically. Angular's newest answer to this is the signal — a wrapper around a value that remembers who is reading it.

There are three pieces to the signals toolkit:

• signal(value) — a writable reactive value. Read it with count(); change it with count.set(5) or count.update(n => n + 1).
• computed(fn) — a read-only value derived from other signals, recalculated lazily when its inputs change.
• effect(fn) — a side effect that re-runs whenever the signals it reads change (for logging, syncing to storage, etc.).

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

@Component({
  selector: 'app-cart',
  standalone: true,
  template: `
    <p>Items: {{ count() }}</p>
    <p>Total: {{ total() | currency }}</p>
    <button (click)="add()">Add item</button>
  `,
})
export class CartComponent {
  count = signal(0);
  price = signal(9.99);

  // Recomputes automatically whenever count() or price() changes
  total = computed(() => this.count() * this.price());

  add(): void {
    this.count.update(n => n + 1);
  }
}

Services & Dependency Injection

Dependency Injection (DI) is a design pattern where a class asks for what it needs instead of building it itself. Angular's DI system creates each dependency once and hands the same instance to everyone who requests it.

The modern way to receive a dependency is the inject() function:

import { Component, inject, signal } from '@angular/core';
import { HeroService, Hero } from './hero.service';

@Component({
  selector: 'app-hero-list',
  standalone: true,
  template: `
    <ul>
      @for (hero of heroes(); track hero.id) {
        <li>{{ hero.name }}</li>
      }
    </ul>
  `,
})
export class HeroListComponent {
  private heroService = inject(HeroService);
  heroes = signal<Hero[]>([]);

  constructor() {
    this.heroService.getHeroes()
      .subscribe(list => this.heroes.set(list));
  }
}

💡 Analogy: DI is like the hospitality desk at a conference. Instead of every speaker bringing their own projector, microphone, and water, the organizer provides those resources on request — one shared set for everyone.

The Angular CLI

The Angular CLI is the command-line tool that scaffolds, builds, serves, and tests your app. It enforces a consistent structure so every Angular project feels familiar.

# Install the CLI once, globally
npm install -g @angular/cli

# Create a new standalone app
ng new my-app

# Move in and start the dev server (opens http://localhost:4200)
cd my-app
ng serve

# Generate a standalone component
ng generate component hero-detail   # or: ng g c hero-detail

# Generate a service
ng generate service hero

# Produce an optimized production build
ng build

A freshly generated app has a lean, module-free shape:

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts     # root standalone component
│   │   ├── app.component.html
│   │   ├── app.config.ts        # providers (router, HTTP, ...)
│   │   └── app.routes.ts        # route definitions
│   ├── main.ts                  # bootstrapApplication(AppComponent)
│   ├── index.html
│   └── styles.css
├── angular.json
├── package.json
└── tsconfig.json

The app boots from main.ts with a single call — no root module required:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
  ],
});

Hands-on Exercise

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

interface Bookmark { id: number; title: string; url: string; }

@Component({
  selector: 'app-bookmark-list',
  standalone: true,
  template: `
    <h2>My Bookmarks ({{ count() }})</h2>
    <ul>
      @for (b of bookmarks(); track b.id) {
        <li><a [href]="b.url">{{ b.title }}</a></li>
      } @empty {
        <li>No bookmarks yet.</li>
      }
    </ul>
  `,
})
export class BookmarkListComponent {
  bookmarks = signal<Bookmark[]>([
    { id: 1, title: 'Angular Docs', url: 'https://angular.dev' },
    { id: 2, title: 'MDN', url: 'https://developer.mozilla.org' },
  ]);

  count = computed(() => this.bookmarks().length);
}

Summary & Quiz

📚 Further Reading

• Angular — What is Angular?
• Angular — Signals guide
• Angular — Components overview
• Angular CLI documentation

🚀 What's Next?

Now that you have the map, we'll zoom into how Angular apps are organized — the roles of modules and components, standalone imports, lifecycle hooks, and how components pass data to one another.