Kurs Angular · Moduł 3: Moduły

Organizacja Kodu w Dużych Projektach

1 min czytania ·
W tej lekcji3

Przy dużych projektach organizacja jest kluczowa - jak w armii shoguna każdy musi znać swoje miejsce.

Barrel Exports (index.ts)

// features/samurai/index.ts
export * from './samurai.component';
export * from './samurai.service';
export * from './samurai.model';
export * from './components/samurai-card.component';

// Użycie - jeden import zamiast wielu
import {
  SamuraiComponent,
  SamuraiService,
  SamuraiCardComponent
} from './features/samurai';

Konwencje Nazewnictwa

feature.component.ts       # Komponent
feature.component.html     # Szablon
feature.component.scss     # Style
feature.component.spec.ts  # Testy

feature.service.ts         # Serwis
feature.guard.ts           # Guard
feature.directive.ts       # Dyrektywa
feature.pipe.ts            # Pipe
feature.module.ts          # Moduł (legacy)
feature.routes.ts          # Routes (standalone)

Dobre Praktyki

  1. Jeden komponent = jeden katalog (z powiązanymi plikami)
  2. Grupuj według funkcjonalności, nie według typu
  3. Używaj barrel exports dla czystych importów
  4. Core dla singletonów, Shared dla reużywalnych elementów
  5. Lazy loading dla feature modules
  6. Maksymalnie 400 linii na plik komponentu

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

  1. 1. Co to jest 'barrel export' w kontekście organizacji kodu Angular?

  2. 2. Która zasada organizacji kodu jest zalecana w dużych projektach Angular?

To 2 z 3 pytań do tej lekcji. Pozostałe rozwiążesz w grze.

Zadania praktyczne w grze

  • Układanie w poziomie

    Ułóż tokeny linii barrel export reeksportującej wszystko z pliku komponentu:

  • Układanie w pionie

    Uporządkuj pliki typowego katalogu komponentu (komponent, szablon, style, testy):

  • Klikanie w kolejności

    Kliknij elementy w kolejności, aby zbudować początek barrel export: export * from

Przydatne artykuły