> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/angular/angular/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

<CardGroup cols={2}>
  <Card title="Components" icon="puzzle-piece">
    The fundamental UI building blocks that control views
  </Card>

  <Card title="Templates" icon="code">
    HTML views with Angular-specific syntax and bindings
  </Card>

  <Card title="Services" icon="server">
    Reusable business logic and data access
  </Card>

  <Card title="Dependency Injection" icon="plug">
    A design pattern for providing dependencies to classes
  </Card>
</CardGroup>

## Application Structure

A typical Angular application follows this hierarchical structure:

```typescript theme={null}
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)

<Note>
  Standalone components are the recommended approach for new Angular applications.
</Note>

```typescript theme={null}
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: 'john@example.com' };
}
```

### NgModules (Legacy)

```typescript theme={null}
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.

```typescript theme={null}
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

<Steps>
  <Step title="Component Initialization">
    Angular creates component instances and initializes their properties
  </Step>

  <Step title="Template Compilation">
    Templates are compiled into executable functions
  </Step>

  <Step title="Change Detection">
    Angular checks for changes and updates the DOM
  </Step>

  <Step title="Lifecycle Hooks">
    Component lifecycle hooks are executed at appropriate times
  </Step>
</Steps>

## Dependency Injection System

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

```typescript theme={null}
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;
    });
  }
}
```

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

## 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

<CardGroup cols={2}>
  <Card title="Components" href="/concepts/components">
    Learn about component decorators and lifecycle
  </Card>

  <Card title="Dependency Injection" href="/concepts/dependency-injection">
    Understand Angular's DI system
  </Card>

  <Card title="Templates" href="/concepts/templates">
    Master template syntax and bindings
  </Card>

  <Card title="Services" href="/concepts/services">
    Create reusable services
  </Card>
</CardGroup>