Objaśnienie struktury projektu
Poznaj pliki generowane przez CLI.
Objaśnienie struktury projektu to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Wyjaśnienie struktury projektu
Workspace Angulara ma przewidywalny układ. Znajomość najważniejszych plików i folderów ułatwia poruszanie się po każdym projekcie.
Folder src
Folder src/ zawiera kod źródłowy aplikacji: punkt wejścia, kod aplikacji oraz globalne zasoby, takie jak index.html i styles.
main.ts
src/main.ts jest punktem wejścia aplikacji. Inicjalizuje komponent główny za pomocą bootstrapApplication.
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig);index.html
src/index.html jest jedyną stroną HTML. W elemencie body znajduje się selektor komponentu głównego, w którym Angular renderuje aplikację.
<!-- inside body -->
<!-- <app-root></app-root> -->Folder app
src/app/ zawiera komponenty, serwisy, trasy i konfigurację. Nowy projekt obejmuje app.component, app.config.ts oraz app.routes.ts.
Pliki app.component
Komponent główny zazwyczaj składa się z klasy .ts, szablonu .html i arkusza stylów .css (lub .scss), a także testu w pliku .spec.ts.
app.config.ts
app.config.ts eksportuje ApplicationConfig z tablicą providers używaną podczas inicjalizacji, na przykład dla routera i klienta HTTP.
app.routes.ts
app.routes.ts eksportuje tablicę definicji tras używaną przez provideRouter.
import { Routes } from '@angular/router';
export const routes: Routes = [];angular.json
W katalogu głównym workspace plik angular.json konfiguruje CLI: cele kompilacji, ścieżki wyjściowe, zasoby, style i opcje serwera dla każdego projektu.
package.json i tsconfig
package.json zawiera listę zależności i skryptów npm. Pliki tsconfig.json konfigurują kompilator TypeScript dla aplikacji i testów.
public lub assets
Pliki statyczne (obrazy, czcionki i favicon) znajdują się w folderze public lub assets i zgodnie z konfiguracją w angular.json są kopiowane do wynikowego katalogu kompilacji.
Szybkie sprawdzenie: struktura
Wskaż punkt wejścia.
Podsumowanie: struktura
Przeanalizowali Państwo workspace: src/ zawiera kod źródłowy, main.ts jest punktem wejścia, index.html pełni funkcję strony hostującej, app/ zawiera komponenty i konfigurację, a angular.json — konfigurację CLI. Następnie poznają Państwo generowanie kodu za pomocą CLI.
Często zadawane pytania
Czy lekcja „Objaśnienie struktury projektu” jest bezpłatna?
Tak — pełny tekst „Objaśnienie struktury projektu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Objaśnienie struktury projektu”?
Poznaj pliki generowane przez CLI. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Objaśnienie struktury projektu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Generowanie nowego projektu
- Objaśnienie struktury projektu
- Generowanie kodu za pomocą ng generate
- Budowanie i uruchamianie