Angular CLI. Szybki start z nowoczesnym angularem.

Dziś pokażę wam bardzo przydatne narzędzie: Angular CLI. Właściwie od początku istnienia angulara w wersji post 1.x, dużym problemem był próg wejścia. Ilość komponentów wymaganych do zainstalowania i skonfigurowania aby móc zacząć tworzyć aplikację, powodował u młodszych oraz starszych deweloperów zawrót głowy.

TypeScript, Kompilator TS, definicje typów, moduły ES6, WebPack, SystemJs… A to lista nawe nie jest pełna rzeczy potrzebnych aby po prostu odpalić apkę, dodajmy do tego narzędzia potrzebne do testów czy preprocesory css ehh… Na szczęście te czasy minęły bezpowrotnie. Dziś mamy narzędzie Angular CLI, które pozwala na błyskawiczne stworzenie nowego projektu w najnowszej wersji Angulara 🙂

Czym jest angular CLI?

Angular CLI to narzędzie wiersza poleceń, stworzone po to aby ułatwić konfigurację nowych projektów tworzonych w najnowszych wersjach angulara. Tak jak napisałem we wstępie, własnoręczne skonfigurowanie wszystkich potrzebnych do pracy narzędzi bywało bardzo żmudne i często prowadziło do frustracji. Właśnie dlatego twórcy angulara stworzyli Angular CLI.

Narzędzie to, przy pomocy jednej komendy tworzy projekt, w którym wszystko co wymagane do stworzenia nowej aplikacji jest już skonfigurowane. W skład wygenerowanego przez Angular CLI projektu wchodzą między innymi Transpilator TS, „Pakowacz” modułów, frameworki testowe a nawet serwer HTTP 🙂

Jak zainstalować Angular CLI?

Angualar CLI instalujemy przez npm’a. Jedyne czego potrzebujemy to w miarę aktualna wersją node.js (w tym, już trochę starym, omawiam podstawy node).

Aby zainstalować Angular CLI, po prostu wywołujemy takie polecenie w konsoli:

W ten sposób narzędzie zainstalowane zostanie globalnie. Od tego momentu w zmiennej PATH systemu pojawi się polecenie ‚ng’, będzie więc dostępne z każdego miejsca na komputerze.

W sumie dlaczego piszę o tym, jak zainstalować moduł z npma? To raczej podstawy… W tym wypadku jednak chciałem to pokazać, ponieważ nazwa narzędzia zmieniła się a wiele źródeł wciąż podaje starą nazwę:

Jeżeli zainstalujemy starą wersję i zorientujemy się za późno, możemy potem mieć problemy, a po co…

Tak jak pisałem, kiedy mamy już zainstalowane narzędzie, możemy korzystać z polecenia ng. Samo z siebie nie robi ono zbyt wiele, potrzebuje dodatkowych komend. Pierwszą jaką polecam użyć każdemu jest help, w konsoli:

Wypluje nam to w konsolę listę wszystkich możliwych parametrów, jest tego dość sporo, na początku większość nie będzie nas interesować. Aby jakoś to ogarnąć, można dodać flagę –short. Tak dostaniemy bardziej czytelne dla człowieka dane. Z taką gotową listą komend dla ng, można zrobić coś jeszcze. Do ng help dopisać dodatkowy parametr, będący nazwą interesującej nas komendy np ng help test. Wtedy wyświetlona zostanie pełna pomoc ale tylko dla danej komendy. Powinno wyglądać to mniej więcej tak:

Na początek polecam zapoznanie się z komendą new, która służy do tworzenia nowego projektu.

Tworzenie projektu przy pomocy Angular CLI

Gdy wyświetlimy help dla komendy new, zobaczymy, że powinniśmy dodać [name] czyli nazwę generowanego projektu oraz ewentualne flagi wypisane poniżej.

Już po samych flagach możemy zobaczyć, że Angular CLI robi za nas bardzo dużo, instaluje pakiety npm, ustawia gita, daje nawet opcję korzystania z niestandardowych plików css (np. scss). Wszystko to oczywiście konfigurowalne. Na początek jednak nie ma co wchodzić w szczegóły, skupmy się na projekcie.

Aby wygenerować projekt o nazwie pierwszyProjekt w konsoli wpisujemy ng new plus wybrana nazwa czyli:

Zobaczymy, że najpierw stworzone zostanie struktura plików i katalogów, a następnie zainstaluje się kilka paczek z npm („kilka”… to może chwilę potrwać 😉 ).

kiedy wszystko już się zainstaluje, przechodzimy do powstałego folderu (nazwa taka sama jak wybrana nazwa projektu) i uruchomić projekt przy pomocy komendy:

flaga –open spowoduje, że projekt automatycznie otworzy się w przeglądarce. Strona główna ma wbite trochę domyślnego kontentu, który można wyrzucić i zastąpić własnym. Generalnie polecam poczytać help dla komendy serve, ma ona sporo przydatnych opcji np –lr, która powoduje, że projekt sam przeładuje się po każdej zmianie.

Na koniec można jeszcze wykonać komendę:

Uruchomi ona zdefiniowane domyślnie testy karmy. W ten sposób zobaczyć można, że wszystkie mechanizmy potrzebne do testowania są już w naszym nowym projekcie zwarte i gotowe 🙂

Na dziś to tyle jeśli chodzi o Angular CLI 🙂 W kolejnych postach przedstawię analizę kodu i struktru projektu wygenerowanego przez narzędzie a w przyszłości jak używać go do generowania nowych komponentów w aplikacji. Jeżeli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem 🙂 .