Kurs Angular 2 – Pierwszy projekt

Poświęciłem sporo czasu, aby zdecydować, czy w przypadku kursu wykorzystać Angular CLI. Po długim namyśle, kilku zmianach zdania, uznałem, że warto maksymalnie ograniczyć szczegóły dotyczące konfiguracji środowiska, a skupić się na tym, co najważniejsze.

Czym jest Angular CLI?

Rozbudowana aplikacja w Angular 2 oznacza równie rozbudowaną strukturę katalogów. Duże pokrycie kodu testami – zarówno jednostkowymi jak i e2e, to w dzisiejszych czasach podstawowe kryterium do zbudowania porządnego systemu. To tylko przykłady, które składają się na to, że konfiguracja staje się uciążliwa i czasochłonna.

CLI to narzędzie, które udostępnia nam zestaw komend (wykonywanych z poziomu wiersza poleceń) do rozbudowy naszej aplikacji, a dodatkowo większość spraw konfiguracyjnych jest już z góry załatwiona.

Jednak na dzień dzisiejszy Angular CLI jest dostępny jedynie w wersji beta. Na Github możemy przeczytać niezbyt optymistyczne stwierdzenie:

This project is very much still a work in progress.

Finalnie CLI ma stać się częścią Angulara w dużej mierze znacznie upraszczając współpracę z frameworkiem.

Czas start!

Aby rozpocząć, pierwszym krokiem jest zainstalowanie Node.js oraz npm (czytaj więcej). Wymagana minimalna wersja node to 4.x.x, natomiast npm 3.x.x.

Następnie uruchamiamy cmd i wywołujemy polecenie:

npm install -g angular-cli

Prawdopodobnie w trakcie instalacji, waszym oczom ukaże się kilka komunikatów npm WARN – nie przejmujcie się nimi. Kiedy proces się zakończy, CLI powinno być już dostępne globalnie.

Tworzymy pierwszy projekt

Jeżeli proces instalacji się powiódł, z poziomu konsoli musimy przenieść się teraz do folderu, w którym znajdował się będzie nasz projekt (polecenie cd), a następnie wywołujemy:

ng new app_name

Kiedy już projekt zostanie utworzony, możemy uruchomić serwer:

cd app_name
ng serve

Aplikacja powinna być dostępna pod adresem http://localhost:4200/.