Przewodnik ten, krok po kroku przeprowadzi Cię przez instalację Angular na komputerze oraz utworzenie i uruchomienie nowego projektu.
Krok 1: Instalacja Node.js i npm
1.1. Pobierz Node.js:
- Otwórz przeglądarkę i wejdź na stronę https://nodejs.org/.
- Pobierz wersję LTS (Long Term Support), która zawiera stabilne funkcje, oraz npm (Node Package Manager).
1.2. Zainstaluj Node.js:
- Uruchom pobrany plik i przejdź przez kreatora instalacji, używając domyślnych ustawień.
- Po instalacji Node.js będzie dostępny wraz z npm.
1.3. Sprawdź instalację:
- Otwórz terminal lub PowerShell i wpisz komendy:
node -v
npm -v
Powinieneś zobaczyć wersje Node.js i npm. Jeśli tak, wszystko działa poprawnie.
Krok 2: Instalacja Angular CLI (jednorazowa instalacja)
2.1. Zainstaluj Angular CLI:
W terminalu (PowerShell lub wiersz polecenia) wpisz:
npm install -g @angular/cli
-g oznacza, że Angular CLI zostanie zainstalowany globalnie i będzie dostępny dla wszystkich projektów na komputerze.
2.2. Sprawdź instalację Angular CLI:
Wpisz komendę:
ng version
Powinieneś zobaczyć szczegóły dotyczące Angular CLI, jeśli instalacja się powiodła.
Krok 3: Tworzenie Nowego Projektu Angular
3.1. Stwórz nowy projekt:
Wybierz folder, w którym chcesz utworzyć projekt, lub przejdź do odpowiedniego katalogu w terminalu. Wpisz komendę:
ng new my-app
Zamień „my-app” na dowolną nazwę projektu.
3.2. Podczas tworzenia projektu odpowiadaj na pytania:
Czy chcesz dzielić dane dotyczące użycia?: Możesz wpisać no lub yes, zależnie od preferencji.
Jaki format arkusza stylów chcesz użyć?: Wybierz CSS (naciśnij Enter).
Czy chcesz włączyć SSR i SSG?: Wybierz N (No), jeśli dopiero zaczynasz.
3.3. Przejdź do katalogu projektu:
Po utworzeniu projektu wpisz:
cd my-app
Krok 4: Uruchomienie Aplikacji Angular
4.1. Otwórz projekt w Visual Studio Code:
W terminalu wpisz:
code .
Jeśli Visual Studio Code nie otworzy się automatycznie, uruchom je ręcznie i otwórz folder projektu.
4.2. Uruchom aplikację Angular:
W Visual Studio Code otwórz terminal (Ctrl + ~).
W terminalu wpisz:
ng serve
Po chwili aplikacja powinna działać pod adresem http://localhost:4200. Otwórz przeglądarkę i przejdź do tego adresu, aby zobaczyć działającą aplikację.
Krok 5: Dalsze Prace nad Projektem
Możesz edytować pliki projektu, aby dostosować aplikację. Najważniejsze pliki znajdziesz w katalogu src/app, a szczególnie app.component.ts i app.component.html.
Po każdej modyfikacji zapisuj zmiany – aplikacja automatycznie je odświeży.