Opis projektu Angular


Główne Foldery i Pliki

  1. node_modules/ – Katalog, w którym znajdują się wszystkie zależności projektu (biblioteki i moduły) pobrane przez npm na podstawie konfiguracji w package.json. Nie należy edytować plików w tym folderze.
  2. public/ – Katalog, który może zawierać pliki statyczne, takie jak obrazy lub inne zasoby, które będą bezpośrednio dostępne w aplikacji. Jest wykorzystywany głównie, jeśli dodajesz SSR (Server-Side Rendering).
  3. src/ – Główny katalog aplikacji. To tutaj znajduje się kod źródłowy aplikacji Angular. Najważniejsze pliki i foldery w tym katalogu to:
    * app/ – Katalog główny dla komponentów aplikacji. Znajdziesz tutaj plik app.component.ts, który jest głównym komponentem aplikacji.
    * main.ts – Plik, który jest punktem wejścia dla aplikacji Angular. To tutaj aplikacja jest bootstrapowana (inicjalizowana).
    * main.server.ts – Jest to punkt wejścia dla części serwerowej aplikacji Angular, wykorzystywany podczas renderowania aplikacji na serwerze. Gdy SSR jest włączone, Angular nie tylko renderuje aplikację po stronie klienta (w przeglądarce), ale także generuje wstępnie załadowane strony HTML po stronie serwera, co może przyspieszyć wyświetlanie aplikacji i poprawić SEO. 
    * index.html – Główna strona HTML aplikacji. Zawiera <app-root>, co jest miejscem, gdzie Angular wstawia główny komponent.
    * styles.css – Plik dla globalnych stylów CSS, które mają zastosowanie do całej aplikacji.

Pliki konfiguracyjne

  1. .editorconfig – Plik konfiguracyjny edytora kodu, który ustawia zasady formatowania kodu (np. wielkość wcięć), co pomaga w utrzymaniu spójności kodu niezależnie od używanego edytora.
  2. .gitignore – Plik, który określa, które pliki i foldery nie powinny być uwzględniane przez Git w repozytorium. Typowo ignorowane są node_modules/ oraz inne pliki tymczasowe.
  3. angular.json – Główny plik konfiguracyjny Angular CLI, który definiuje ustawienia budowania, serwowania, testowania i innych procesów w aplikacji Angular.
  4. package.json – Plik konfiguracyjny npm, który zawiera metadane o projekcie, takie jak jego nazwa, wersja, zależności oraz skrypty. Tutaj definiujesz, jakie pakiety (biblioteki) są wymagane w projekcie.
  5. package-lock.json – Plik automatycznie generowany przez npm, który zapisuje dokładne wersje wszystkich zainstalowanych pakietów i ich zależności, aby zapewnić spójność między instalacjami.
  6. README.md – Plik zawierający opis projektu, często z instrukcjami dotyczącymi instalacji i użytkowania aplikacji. Używany szczególnie w projektach współdzielonych, by inni użytkownicy wiedzieli, jak uruchomić aplikację.
  7. server.ts – Plik, który jest używany do konfiguracji serwera, szczególnie przy wdrażaniu aplikacji z SSR (Server-Side Rendering). Pozwala na renderowanie aplikacji na serwerze przed wysłaniem jej do przeglądarki.
  8. tsconfig.json – Główny plik konfiguracyjny TypeScript dla projektu Angular. Definiuje ustawienia kompilatora TypeScript, takie jak cele kompilacji, ścieżki do plików oraz zasady kompilacji.
  9. tsconfig.app.json – Plik konfiguracyjny TypeScript używany tylko dla kodu aplikacji (bez testów). Jest to część głównego pliku tsconfig.json, ale dotyczy tylko kompilacji aplikacji.
  10. tsconfig.spec.json – Plik konfiguracyjny TypeScript dla testów jednostkowych aplikacji. Definiuje, jakie ustawienia TypeScript są używane podczas testowania.

Folder .vscode

  1. .vscode/ – Folder zawierający konfiguracje specyficzne dla Visual Studio Code. Ułatwia pracę z projektem Angular w tym edytorze, automatycznie dodając pewne ustawienia.
    * extensions.json – Plik sugerujący rozszerzenia Visual Studio Code, które są zalecane do pracy z projektem.
    * launch.json – Konfiguracja uruchamiania debugowania dla aplikacji w Visual Studio Code.
    * tasks.json – Konfiguracja zadań automatyzacji, które mogą być używane do uruchamiania zadań takich jak kompilacja lub testowanie aplikacji.