9 mar 2017

Jak postawić stronę w Angular 2 w 5 minut

Pora w końcu napisać bardziej techniczny post. Na pierwszy ogień idzie frontend. Tak naprawdę samego kodu nie będzie zbyt wiele, bo dziś opiszę jak postawić działający szkielet witryny i uruchomić go lokalnie. Tytuł nie jest przesadzony i naprawdę można to zrobić w 5 minut, co zaraz się okaże.

Żeby zacząć się bawić Angularem potrzebujemy przede wszystkim Node.js. Pobrany ze strony, zainstalowany. Do wygenerowania angularowej aplikacji użyję Angular CLI, zatem zgodnie z instrukcją na stronie wykonuję w konsoli polecenia
npm install -g @angular/cli
ng new retirement-savings-ui
sprawdzam czy aplikacja działa
cd retirement-savings-ui
ng serve
wszystko jest w porządku (a czemu miałoby nie być, w końcu jeszcze nie grzebałem w kodzie), konsola zgłasza

a strona widoczna pod http://localhost:4200/ radośnie oznajmia
app works!

No i w tym momencie mógłbym skończyć - szkielet aplikacji działa, dodane są testy jednostkowe oraz end-to-end. Ale skoro już jestem przy frontendzie, to tworzę jeszcze komponent który będzie zajmował się wykresami.
ng generate component chart
oraz instaluję gotowy komponent wykresów, którego będzie używał powyższy
npm install ng2-charts --save
npm install chart.js --save
Na początek wystarczy, pora teraz na postawienie backendu który dostarczy dane do wyświetlenia na wykresie - ale to już w kolejnym wpisie.

0 komentarze:

Prześlij komentarz