INSTALACJA

OMÓWIĘ:

- instalacja środowiska niezbędnego do pracy z Angularem
- instalcja Angular CLI
- jak stworzyć pierwszy projekt
- jak odpalić projekt

instalacja

Aby rozpocząć przygodę z Angularem niezbędne będzie zainstalowanie kilku rzeczy.

Pierwszym narzędziem, a raczej całym środowiskiem niezbędnym do pracy będzie NodeJS. Środowisko zawiera w sobie NPM czyli managera pakietów, który jest jest kluczowy przy pracy z Angularem. NPM jest odpowiednikiem Maven/Gradle dla Javy.

Dla Windows oraz MacOSX najprościej zainstalować NodeJS z oficjalnej strony 

– https://nodejs.org/en/download/

W przypadku Linuxa najlepiej użyć oficjalnej dokumentacji 

– https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions

Instalację należy wykonać przy defaultowych ustawieniach.

Aby sprawdzić czy instalacja przebiegła prawidłowo wpisz w terminalu komendę:

npm -v

Jeżeli wszystko jest w porządku powinieneś zobaczyć wersję NPM’a.

Angular CLI

Kolejnym krokiem jaki musisz wykonać to zainstalowanie narzędzia Angular CLI.

Angular CLI to narzędzie, które ułatwi Ci konfiguorwanie oraz tworzenie szkieletu aplikacji. W Springu sporą ilość czasu trzeba było poświęcać na konfigurację przy rozpoczynaniu pracy z projektem. Aby przyspieszyć proces startowania projektu i umożliwić niemal natychmiastowe rozpoczęcie pracy, powstał Spring Boot oraz https://start.spring.io/. Angula CLI jest właśnie takim odpowiednikiem. Dostajesz możliwość genrowania projektu poprzez wpisanie: ng new <nazwa-projektu> oraz np. tworzenie komponentów poprzez wpisanie: ng g c <nazwa-komponentu>.

Aby zainstalować Angular CLI wpisz w konsoli:

npm install -g @angular/cli

Jeżeli zainstalowałeś NodeJs oraz Angular CLI to posiadasz już niezbędne narzędzia aby rozpocząć pracę z Angularem.

tworzenie projektu

Przejdźmy zatem do utworzenia pierwszego projektu. 

Przejdź do katalogu w którym chcesz utworzyć swój pierwszy projekt. 

W moim przypadku jest to ścieżka: C:\szkolaangulara

W konsoli wpisz:

ng new first-project

gdzie first-project to nazwa projektu (ng new <nazwa-projektu>)

Zostaniesz zapytany czy chcesz dodać routing do aplikacji. W chwili obecnej nie będzie Ci to potrzebne więc proponuję wpisać:

Would you like to add Angular routing? N

Kolejne pytanie będzie dotyczyło formatu stylowania jakiego chcesz użyć. Proponuję wybrać za pomocą strzałek na klawiaturze SCSS.

Gratuluję! Właśnie stworzyłeś swój pierwszy projekt w Angularze. 

Dzięki temu, że zainstalowałeś Angular CLI był to dosyć szybki i bezbolesny proces.

odpalanie aplikacji

W tym kroku pokażę Ci jak odpalić projekt. Przejdź w konsoli do projektu:

cd .\first-project\ 

Wpisz polecenie:

npm start

Następnie w przeglądarce podaj adres: localhost:4200

Jeżeli wszystko poszło dobrze powinieneś zobaczyć następujący widok