Od pustej folderu do działającej aplikacji: konfiguracja nowoczesnego projektu Angular 22
Zainstaluj Node.js i Angular CLI, utwórz aplikację Angular 22 za pomocą polecenia ng new, zapoznaj się z strukturą plików w trybie standalone oraz uruchom ją lokalnie z możliwością natychmiastowej ponownej kompilacji.
Zanim będziesz mógł nauczyć się komponentów, szablonów, usług lub routingu w Angular, potrzebujesz projektu, który faktycznie działa na twoim komputerze. Aby to osiągnąć, wymagane są kilka narzędzi, polecenie do tworzenia szkieletu projektu oraz struktura folderów zupełnie inna od tej, którą pokazują wiele starszych tutoriali. Ten przewodnik poprowadzi cię od czystego komputera do działającego aplikacji Angular 22, wyjaśni, jakie funkcje pełni każde narzędzie, oraz pokaże, w jaki sposób generowane elementy łączą się ze sobą, aby reszta frameworka miała gdzie funkcjonować.
Czego potrzebujesz przed rozpoczęciem
Lokalna konfiguracja Angular opiera się na czterech elementach: Node.js, Angular CLI, edytorze kodu (często wybierany jest Visual Studio Code) oraz terminalu. Nie ma potrzeby osobnego instalowania TypeScript – tworząc projekt, Angular, TypeScript oraz wszystkie inne niezbędne pakiety są pobierane automatycznie.
Kompatybilność wersji jest istotna. W chwili pisania tego tekstu lista referencyjna dotycząca kompatybilności wersji Angular wskazuje Node.js v22.22.3 lub nowszą jako minimalną wersję dla Angular 22, obok nowszych wersji obsługiwanych przez ten framework. Te zakresy zmieniają się między różnymi wersjami Angular, dlatego przed zainstalowaniem czegokolwiek sprawdź aktualną tabelę kompatybilności na stronie angular.dev.
Krok 1: zainstaluj Node.js i npm
Angular tworzy aplikacje przeglądarkowe, więc można się zastanawiać, dlaczego potrzebny jest silnik działający po stronie serwera. Odpowiedzią są narzędzia. Node.js umożliwia uruchamianie JavaScripta poza przeglądarką, a Angular CLI, kompilator, serwer rozwojowy oraz narzędzia do testowania to wszystko programy napisane w JavaScriptu, które od niego zależą. Node.js zawiera również npm – menedżera pakietów, którego Angular używa do instalowania zależności projektu.
Pobierz program instalacyjny z oficjalnej strony Node.js. Gdy proces się zakończy, otwórz terminal (lub Command Prompt w systemie Windows) i upewnij się, że ścieżka do środowiska wykonawczego jest dostępna:
node --version
Wynik powinien być łańcuchem z wersją w takim formacie:
v22.22.3
Następnie sprawdź, czy npm również jest dostępny:
npm --version
Jeśli oba polecenia wyświetlą numer wersji, to podstawy są już ustanowione. Unikaj chęci pozostawienia starej wersji Node.js tylko dlatego, że starszy tutorial z nią działał. Każda główna wersja Angular ma swoje własne dopuszczone zakresy wersji Node.js, a niezgodność często objawia się mylącymi błędami podczas instalacji lub kompilacji, zamiast wyraźnego komunikatu. Narzędzia takie jak nvm lub fnm ułatwiają zmianę wersji Node.js dla poszczególnych projektów, jeśli są one wymagane.
Krok 2: zrozumienie funkcji Angular CLI
Następnym narzędziem jest Angular CLI (interfejs linii poleceń). To główne narzędzie do tworzenia i zarządzania aplikacjami Angular: tworzy szkielety nowych projektów, generuje komponenty i usługi, uruchamia serwer rozwojowy, tworzy wersje do produkcji, wykonywa testy i zajmuje się wieloma innymi rutynowymi zadaniami. Zamiast ręcznie tworzyć dziesiątki plików i konfigurować proces budowania, możesz pozwolić CLI stworzyć gotowy, standardowy punkt wyjścia, a następnie rozwijać dalej na jego bazie.
Krok 3: zainstaluj Angular CLI globalnie
Zainstaluj CLI za pomocą npm:
npm install -g @angular/cli@22
Każda część polecenia ma określone zadanie. npm install instaluje pakiet. Flaga -g umożliwia jego instalację globalnie, dzięki czemu polecenie jest dostępne z dowolnej folderu, a nie tylko w obrębie jednego projektu. Sufiks @22 fiksuje instalację na wersji Angular 22, więc otrzymujesz interfejs linii poleceń zgodny z wersją frameworku, którą zamierzasz używać.
Gdy instalacja zostanie zakończona, sprawdź ją:
ng version
To wyświetla szczegóły dotyczące zainstalowanego interfejsu linii poleceń oraz powiązanych pakietów. Zauważ, że polecenie to nie jest angular, lecz ng – plik wykonywalny, który pakiet CLI umieszcza na Twojej ścieżce systemowej. Będziesz go stale wpisywać:
ng
Praktyczna uwaga: gdy projekt już istnieje, plik package.json zawiera również lokalną kopię interfejsu wiersza poleceń, a uruchomienie ng w folderze projektu wykorzystuje tę lokalną wersję. Instalacja globalna służy głównie do tego, aby można było uruchomić ng new przed utworzeniem jakiegokolwiek projektu.
Krok 4: utworzenie pierwszej aplikacji
Pерейдź do folderu, w którym przechowujesz swoje projekty, na przykład:
cd Desktop
Następnie poproś interfejs wiersza poleceń o utworzenie nowej aplikacji:
ng new my-first-angular-app
Ostatni argument, my-first-angular-app, staje się nazwą projektu i folderu; może to być dowolna ważna nazwa. ng new jest interaktywny, więc może zadać kilka pytań dotyczących konfiguracji projektu, np. o to, jaki format pliku stylów użyć. Dokładne pytania zmieniają się wraz z rozwojem Angular, więc nie dziw się, jeśli twoje będą różnić się od tych pokazanych na ekranie lub w starszych przewodnikach.
Dla pierwszego projektu rozsądnym wyborem jest przyjęcie zalecanych ustawień domyślnych. Obecne ustawienia domyślne tworzą aplikację opartą na standalone API i wykorzystują krótszą, nowoczesną konwencję nazewania plików, którą za chwilę zobaczysz. Po zakończeniu skryptu powstaje nowa folder:
my-first-angular-app/
Wejdź do niego:
cd my-first-angular-app
Krok 5: odkrywanie struktury utworzonych plików
Otwórz folder w swoim edytorze. Świeżo utworzony projekt wygląda mniej więcej tak:
my-first-angular-app/
│
├── .vscode/
│
├── node_modules/
│
├── public/
│
├── src/
│ ├── app/
│ │ ├── app.ts
│ │ ├── app.html
│ │ ├── app.css
│ │ └── app.spec.ts
│ │
│ ├── index.html
│ ├── main.ts
│ └── styles.css
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md
Krótkie wprowadzenie do najważniejszych elementów:
src/main.tsto punkt wejścia, który uruchamia aplikację.src/index.htmlto jedyna strona HTML, którą ładuje przeglądarka; Angular renderuje treść w niej.src/styles.csszawiera globalne style stosowane we całej aplikacji.
src/app/ zawiera komponent korzeniowy, podzielony na app.ts (klasę w TypeScript), app.html (jej szablon), app.css (style’y przypisane do tego komponentu) oraz app.spec.ts (jego test jednostkowy).public/ przechowuje pliki statyczne, które są serwowane bez zmian.angular.json konfiguruje sposób, w jaki CLI buduje, serwuje i testuje projekt.package.json wymienia zależności i skrypty npm; node_modules/ to miejsce, gdzie npm je zainstalował.tsconfig.json konfiguruje kompilator TypeScript.Nie musisz jeszcze rozumieć każdego pliku. Wystarczy wiedzieć, gdzie znajduje się punkt wejścia, komponent korzeniowy oraz pliki konfiguracyjne, aby rozpocząć pracę.
Krok 6: uruchomienie serwera rozwojowego
Z wewnątrz folderu projektu uruchom aplikację:
ng serve
CLI kompiluje aplikację i uruchamia lokalny serwer rozwojowy. Nadzoruje również pliki źródłowe i przekompilowuje je za każdym razem, gdy dojdzie do zmiany. Po zakończeniu kompilacji zobaczysz wynik podobny do tego:
Application bundle generation complete.
Local: http://localhost:4200/
Otwórz tę adresację w swoim przeglądarce:
http://localhost:4200
Powinna pojawić się domyślna strona startowa. Jeśli nie chcesz za każdym razem wpisywać adresu URL, dodaj flagę --open – wtedy CLI uruchomi dla ciebie domyślną przeglądarkę:
ng serve --open
Jeśli port 4200 jest już zajęty przez inny proces, możesz wybrać inny port za pomocą opcji --port.
Krok 7: dokonaj zmiany i obserwuj jej ponowną kompilację
Aby udowodnić, że cały cykl działa poprawnie, edytuj szablon komponentu głównego:
src/app/app.html
Zastąp wszystko w tym pliku krótkim fragmencem kodu markup:
<h1>Hello Angular 22!</h1>
<p>
My first Angular application is running successfully.
</p>
Zapisz zmiany, a następnie wróć do przeglądarki. Strona aktualizuje się sama. Ponieważ serwer rozwojowy monitoruje twoje pliki i odbudowuje je po zmianach, zwykłe edycje kodu źródłowego nigdy nie wymagają zatrzymywania i ponownego uruchamiania ng serve. Wyjątkiem są zmiany w plikach konfiguracyjnych, takich jak angular.json, które zazwyczaj wymagają ponownego uruchomienia.
Wyświetlanie wartości z klasy komponentu
Statyczna marka to tylko połowa historii. Następnie rozszerz szablon, aby pokazywał również wartości pochodzące z komponentu. Podwójne nawiasy klamrowe to miejsca zastępcze, które Angular wypełnia na podstawie klasy:
<div class="container">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<h1>Hello Angular 22!</h1>
<p>
My first Angular application is running successfully.
</p>
</div>
Aby te miejsca zastępcze mogły zostać rozwiązane, klasa komponentu w pliku app.ts musi zawierać odpowiadające jej właściwości. Dekorator @Component informuje Angular, że dana klasa jest komponentem, w który element ma zostać wyrenderowany (app-root, element już obecny w index.html), oraz gdzie znajdują się jego szablony i style:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
title = 'My First Angular 22 App';
message = 'Angular project is running successfully!';
}
Gdy oba pliki zostaną zapisane, strona wyświetla tytuł i komunikat z klasy powyżej treści statycznej. W zależności od dokładnej wersji CLI, wygenerowany plik app.ts może wyglądać nieco inaczej (nowsze szablony czasami używają sygnałów do określania tytułu), ale taka prosta właściwość klasy działa w ten sam sposób do celów edukacyjnych. Jeśli chcesz przeprowadzić eksperymenty przed instalowaniem czegokolwiek, wersja tego przykładu w StackBlitz działa wyłącznie w przeglądarce.
Jak elementy łączą się podczas uruchamiania
Gdy aplikacja jest już uruchomiona, przydatne jest zobaczenie ścieżki od przeglądarki do twojego szablonu:
Browser
│
▼
index.html
│
▼
main.ts
│
▼
App Component
│
┌────────┴────────┐
▼ ▼
app.html app.css
(HTML) (CSS)
Przeglądarka ładuje plik index.html. Zawarte w nim skrypty uruchamiają main.ts, punkt wejścia aplikacji, który inicjuje komponent korzeniowy. Ten komponent łączy swoją klasę z szablonem HTML oraz stylami, renderuje zawartość do elementu app-root, a od tego momentu Angular utrzymuje interfejs użytkownika w synchronizacji wraz ze zmianami danych komponentu. Ten opis jest celowo uproszczony, ale daje podstawową wizję, do której można później odnieść inne tematy.
Minimalny przykład wiązania danych
Oto najprostsza użyteczna wersja tego pomysłu. Klasa komponentu definiuje jedną właściwość:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
title = 'My First Angular App';
}
a szablon odnosi się do niej:
<h1>{{ title }}</h1>
<p>
Welcome to my Angular 22 journey!
</p>
Dwie linie opisują całą koncepcję. W klasie typu TypeScript znajduje się przypisanie właściwości:
title = 'My First Angular App';
a w szablonie znajduje się wyrażenie interpolacyjne:
{{ title }}
Angular odczytuje wartość z klasy i wstawia ją do wyświetlanego HTML. Jest to interpolacja, najprostsza forma powiązania danych w Angular. Jeśli później zmienisz title w odpowiedzi na dane wprowadzone przez użytkownika lub dane z serwera, Angular automatycznie zaktualizuje stronę. Powiązanie właściwości, powiązanie zdarzeń oraz dwukierunkowe powiązanie opierają się na tym samym principie i zasługują na osobne omówienie.
Dlaczego starsze tutoriale wyglądają inaczej
Gdy poszukasz tutoriali o Angular, szybko znajdziesz projekty o innym układzie. Starsze przewodniki zazwyczaj pokazują pliki w takim wyglądzie:
app.component.ts
app.component.html
app.component.css
app.module.ts
podczas gdy projekt utworzony za pomocą dzisiejszego CLI zawiera:
app.ts
app.html
app.css
Często w ogóle nie ma pliku app.module.ts. Framework znacznie się zmienił na przestrzeni lat. Współczesny Angular używa standalone API przez domyślność: komponenty bezpośrednio deklarują swoje własne zależności, więc nowe aplikacje rzadko potrzebują NgModule, aby je zgrupować. Obecny CLI generuje aplikacje standalone i od razu stosuje nowsze, krótsze konwencje nazewnicze.
To nie oznacza, że starszy kod jest błędny. Wiele aplikacji produkcyjnych nadal używa modułów oraz dłuższych nazw plików .component.ts, a oba te style są obsługiwane. Jednak podczas nauki mieszanie tych dwóch podejść jest częstą przyczyną zamieszania. Jeśli tutorial każe ci edytować plik app.module.ts, a w twoim projekcie go nie ma, masz do czynienia ze starszym stylem – w takim przypadku powinieneś poszukać odpowiednika samodzielnie, zamiast tworzyć ten plik ręcznie.
Podsumowanie
Angular CLI przekształca konfigurację projektu w krótką, powtarzalną procedurę. Gdy już to raz zrobisz, cały proces wygląda następująco:
- Zainstaluj wersję Node.js obsługiwaną przez daną wersję Angulara i sprawdź działanie narzędzi
nodeoraznpm. - Zainstaluj CLI za pomocą polecenia
npm install -g @angular/cli@22i potwierdź instalację komendąng version.
ng new, akceptując domyślne ustawienia dla pierwszej aplikacji.main.ts, index.html, pliki typu app.*, angular.json oraz package.json.ng serve (opcjonalnie z flagą --open) i korzystaj z automatycznego ponownego budowania projektu podczas edytowania.NgModule i plikach .component.ts traktuj jako starszy podejście i przenieś je na nowoczesne API.Nie musisz od razu rozumieć każdego utworzonego pliku. Ważne jest, abyś miał działający projekt Angular 22 i wiedział, gdzie znajdują się jego kluczowe elementy – to jest podstawa do dogłębnego nauki komponentów, szablonów oraz wiązania danych.
Literatura pokrewna
- Ustawianie Prisma 7 z PostgreSQL w projekcie TypeScript Node.js — Naprawianie częstych błędów podczas konfiguracji Prisma 7 w TypeScript, od problemów z adresami URL typu string lub undefined po problemy z rootDir, oraz łączenie PostgreSQL za pomocą adaptera sterownika pg.
- Prawdziwa złożoność nowoczesnego JavaScript pochodzi z narzędzi, a nie z języka — Ten artykuł wyjaśnia, jak takie podstawowe funkcje JavaScript jak async/await i optional chaining upraszczają kod, podczas gdy nadmierne narzędzia i zależności wprowadzają niepotrzebną złożoność.