Kurs Angular · Moduł 3: Moduły
Organizacja Kodu w Dużych Projektach
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
- Jeden komponent = jeden katalog (z powiązanymi plikami)
- Grupuj według funkcjonalności, nie według typu
- Używaj barrel exports dla czystych importów
- Core dla singletonów, Shared dla reużywalnych elementów
- Lazy loading dla feature modules
- 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. Co to jest 'barrel export' w kontekście organizacji kodu Angular?
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