Angular Architecture

Angular's architecture resembles the structure of feudal Japan - it is hierarchical, well-organized, and every element has its role.

Core Architectural Elements

1. Components (武士 - Bushi/Samurai)

Components are the heart of Angular - the basic UI unit, like a samurai in an army.

@Component({
  selector: 'app-samurai',
  standalone: true,
  template: `<div class="samurai">{{ name }}</div>`
})
export class SamuraiComponent {
  name = 'Musashi';
}

2. Modules (藩 - Han/Clans)

Modules group related components, services, and other elements - like clans grouping samurai.

@NgModule({
  declarations: [],
  imports: [CommonModule],
  exports: []
})
export class SamuraiModule { }

Note: Since Angular 17+, Standalone Components without NgModules are preferred!

3. Services (職人 - Shokunin/Craftsmen)

Services contain business logic and are shared between components.

@Injectable({
  providedIn: 'root'
})
export class KatanaService {
  forge(): string {
    return 'A new katana has been forged!';
  }
}

providedIn: 'root' registers the service globally: Angular creates one instance for the whole application and hands it to every component that asks for it.

4. Directives (術 - Jutsu/Techniques)

Directives modify the behavior of DOM elements - like special combat techniques.

5. Pipes (通訳 - Tsuuyaku/Interpreters)

Pipes transform data in templates - like interpreters at the shogun's court.

Data Flow

┌─────────────────────────────────────────┐
│              AppComponent               │
│  (Shogun - supreme commander)           │
├─────────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐     │
│  │ HeaderComp   │  │ SidebarComp  │     │
│  │ (General)    │  │ (Advisor)    │     │
│  └──────────────┘  └──────────────┘     │
│  ┌──────────────────────────────────┐   │
│  │        MainContentComponent      │   │
│  │  ┌────────────┐ ┌────────────┐   │   │
│  │  │ ListComp   │ │ DetailComp │   │   │
│  │  │ (Squad)    │ │ (Samurai)  │   │   │
│  │  └────────────┘ └────────────┘   │   │
│  └──────────────────────────────────┘   │
└─────────────────────────────────────────┘

Data flows top-down through @Input(), and events flow bottom-up through @Output() - like the shogun's orders and the samurai's reports.