Cześć,

W tym wpisie uruchomimy i skonfigurujemy środowisko umożliwiające do pisania frontu w ng2. Na początku myślałem o generatorze typu Yeoman, jednak doszedłem do wniosku że fajnie wiedzieć jak to działa pod spodem. Dodatkowo zamiast npm warto używać Yarn który jest po prostu szybszy niż NPM.

Do dzieła!

angular-cli

Do stworzenia projektu użyjemy angularowego CLI (Command Line Interface).

1.Zacznijmy od instalacji angular-cli globalnie:

npm i -g @angular/cli

2. Tworzymy projekt używając przełącznika style z atrybutem scss. Jak nietrudno się domyślić umożliwi nam to pisanie styli używając scss.

ng new selfreview --style=scss

3. Po wpisaniu w konsole ‚npm start’ (lub ‚yarn start’ jeżeli jest zainstalowany), projekt startuje i pod adresem: localhost:4200 mamy napis ‚App works’.

Jednak po każdych zmianach np w pliku app.component.scss strona się odświeża. Biorąc pod uwagę że angular-cli używa webpacka, to możemy użyć HMR (Hot Module Replacement) do wstrzykiwania modułów do naszej strony przez co odświeżenie nie jest wymagane. Żeby to zrobić odsyłam do tej strony gdzie mamy wszystko jasno wyjaśnione jak taki moduł uruchomić.

4. W tym miejscu zmieniłem także port na 3000. Konfiguracja taska z włączonym HMR wygląda tak:

"scripts": {
    "ng": "ng",
    "start": "ng serve --hmr -e=hmr --port 3000",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
}

5. Zainstalujmy normalize.scss do zunifikowania naszych styli css:

yarn add normalize.scss

To nam automatycznie doda normalize.css do package.json.

6. Zaimportujmy go w głównym module styli czyli w pliku src/style.scss:

/* You can add global styles to this file, and also import other style files */
@import '../node_modules/normalize.scss/normalize.scss';

Poprzez ten zabieg mamy już sensownie zresetowane style przeglądarek i możemy zacząć pracować nad naszą aplikacją.

Kod źródłowy jest pod adresem: https://github.com/paweljurczynski/selfreview 

W kolejnym wpisie poruszę temat dodawania przykładowego serwisu i pobierania danych z REST API.