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.

1@Component({
2  selector: 'app-samurai',
3  standalone: true,
4  template: \`<div class="samurai">{{ name }}</div>\`
5})
6export class SamuraiComponent {
7  name = 'Musashi';
8}

2. Modules (藩 - Han/Clans)

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

1@NgModule({
2  declarations: [],
3  imports: [CommonModule],
4  exports: []
5})
6export 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.

1@Injectable({
2  providedIn: 'root'
3})
4export class KatanaService {
5  forge(): string {
6    return 'A new katana has been forged!';
7  }
8}

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

1┌─────────────────────────────────────────┐
2│              AppComponent               │
3│  (Shogun - supreme commander)           │
4├─────────────────────────────────────────┤
5│  ┌──────────────┐  ┌──────────────┐     │
6│  │ HeaderComp   │  │ SidebarComp  │     │
7│  │ (General)    │  │ (Advisor)    │     │
8│  └──────────────┘  └──────────────┘     │
9│  ┌──────────────────────────────────┐   │
10│  │        MainContentComponent      │   │
11│  │  ┌────────────┐ ┌────────────┐   │   │
12│  │  │ ListComp   │ │ DetailComp │   │   │
13│  │  │ (Squad)    │ │ (Samurai)  │   │   │
14│  │  └────────────┘ └────────────┘   │   │
15│  └──────────────────────────────────┘   │
16└─────────────────────────────────────────┘

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