Struktura projektu w Angularze

Struktura projektu w Angularze jest starannie zaprojektowana, aby zapewnić organizację, modularność i łatwość zarządzania nawet bardzo złożonymi aplikacjami. Po utworzeniu nowego projektu Angular przy użyciu Angular CLI, otrzymujesz szereg katalogów i plików konfiguracyjnych, które stanowią podstawę Twojej aplikacji. Oto wyjaśnienie kluczowych elementów struktury projektu Angular:

Katalog główny projektu

• /e2e/: Katalog zawierający testy end-to-end dla aplikacji. Używa Protractor do symulacji interakcji użytkownika i weryfikacji, że aplikacja działa zgodnie z oczekiwaniami.
• /node_modules/: Folder zawierający wszystkie pakiety Node.js, które są zależnościami projektu, zainstalowane przez npm lub yarn.
• /src/: Główny katalog źródłowy aplikacji, zawierający kod źródłowy, szablony, style, grafiki i inne zasoby.

W katalogu /src/

• /app/: Katalog zawierający komponenty, moduły, usługi, dyrektywy i pipe’y twojej aplikacji. To serce twojej aplikacji Angular.
  • /app.component.{ts,html,css,spec.ts}: Pliki głównego komponentu aplikacji, w tym logika TypeScript, szablon HTML, style CSS i testy jednostkowe.
• /assets/: Katalog na zasoby statyczne takie jak obrazy, pliki JSON i inne pliki, które można bezpośrednio skopiować do katalogu wynikowego dist/ podczas budowania aplikacji.
• /environments/: Zawiera pliki konfiguracyjne dla różnych środowisk, takich jak produkcja i rozwój. Umożliwia określenie różnych ustawień, np. URL-i do API, dla różnych wersji aplikacji.
• favicon.ico: Ikona strony, która jest wyświetlana na karcie przeglądarki.
• index.html: Główny plik HTML twojej aplikacji, który jest szablonem dla Angulara. Angular wstrzykuje dynamicznie skompilowane komponenty do tego pliku.
• main.ts: Główny plik wejściowy aplikacji Angular, który inicjalizuje uruchomienie aplikacji przez kompilację głównego modułu aplikacji (AppModule).
• polyfills.ts: Plik zawierający polyfills niezbędne dla obsługi starszych przeglądarek.
• styles.css: Globalne style dla twojej aplikacji.
• test.ts: Główny plik wejściowy dla testów jednostkowych, konfiguruje środowisko testowe Angulara.

Pliki konfiguracyjne w katalogu głównym

• .angular-cli.json lub angular.json: Plik konfiguracyjny dla Angular CLI, określający opcje kompilacji, budowania, serwowania i testowania projektu.
• package.json: Plik zawierający metadane projektu oraz listę zależności pakietów npm.
• tsconfig.json: Plik konfiguracyjny TypeScript, określający opcje kompilatora i ścieżki dla projektu.
• tslint.json: Konfiguracja dla TSLint, narzędzia służącego do analizy statycznej kodu TypeScript w celu wykrywania błędów i niezgodności ze standardami kodowania.

Rozumienie tej struktury plików i katalogów jest kluczowe dla efektywnej pracy z Angular i pozwala na lepsze zarządzanie złożonością aplikacji, zachowując przy tym czystość i organizację kodu. Angular CLI oferuje również dodatkowe polecenia do generowania nowych komponentów, modułów, usług itp., które automatycznie integrują się z tą strukturą, utrzymując konsekwencję projektu.