Architektura Angulara

Architektura Angulara przypomina strukturę feudalnej Japonii - jest hierarchiczna, uporządkowana i każdy element ma swoją rolę.

Podstawowe Elementy Architektury

1. Komponenty (武士 - Bushi/Samurajowie)

Komponenty to serce Angulara - podstawowa jednostka UI, jak samuraj w armii.

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

2. Moduły (藩 - Han/Klany)

Moduły grupują powiązane komponenty, serwisy i inne elementy - jak klany grupują samurajów.

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

Uwaga: Od Angular 17+ preferowane są Standalone Components bez NgModules!

3. Serwisy (職人 - Shokunin/Rzemieślnicy)

Serwisy zawierają logikę biznesową i są współdzielone między komponentami.

@Injectable({
  providedIn: 'root'
})
export class KatanaService {
  forge(): string {
    return 'Nowa katana wykuta!';
  }
}

providedIn: 'root' rejestruje serwis globalnie: Angular tworzy jedną instancję dla całej aplikacji i przekazuje ją każdemu komponentowi, który o nią poprosi.

4. Dyrektywy (術 - Jutsu/Techniki)

Dyrektywy modyfikują zachowanie elementów DOM - jak specjalne techniki bojowe.

5. Pipes (通訳 - Tsuuyaku/Tłumacze)

Pipes transformują dane w szablonach - jak tłumacze na dworze shoguna.

Przepływ Danych

┌─────────────────────────────────────────┐
│              AppComponent               │
│  (Shogun - główny dowódca)              │
├─────────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐     │
│  │ HeaderComp   │  │ SidebarComp  │     │
│  │ (Generał)    │  │ (Doradca)    │     │
│  └──────────────┘  └──────────────┘     │
│  ┌──────────────────────────────────┐   │
│  │        MainContentComponent      │   │
│  │  ┌────────────┐ ┌────────────┐   │   │
│  │  │ ListComp   │ │ DetailComp │   │   │
│  │  │ (Oddział)  │ │ (Samurai)  │   │   │
│  │  └────────────┘ └────────────┘   │   │
│  └──────────────────────────────────┘   │
└─────────────────────────────────────────┘

Dane płyną z góry na dół przez @Input(), a zdarzenia z dołu do góry przez @Output() - jak rozkazy shoguna i raporty samurajów.