Jako, że pozytywnie udało nam się zbudować aplikację wypozyczalni sprzętu wodnego opartą o Laravela, co więcej mając przygotowany zalążek API, możemy wystartować z tworzeniem kodu aplikacji frontendowej. Jak się łatwo domyślić, będzie ona w całości oparta o Angular 4 (w praktyce będziemy już używac wersji 5). Nie przedłużając wstępu zabierzmy się do pracy, czyli spróbujmy zainstalować i przejrzeć startowy kod frameworka.

W odróżnieniu od AngularJS, gdzie wystarczyło dodać odpowiednią bibliotekę JS, nowsze wersje Angulara wprost definiują jak należy je instalować. W tym celu potrzebny nam będzie Node Package Manager, czyli menadżer pakietów. Jego instalacja różni się zależnie od środowiska, w którym pracujemy i tak:

• Dla Windows najprościej bedzie zainstalować całe środowisko NodeJS (które zawiera NPM) – https://nodejs.org/en/download/
• Dla MacOSX możemy użyć HomeBrew (brew install node w terminalu) lub podobnie jak w przypadku Windowsa zainstalować cały NodeJS z linka z góry
• W przypadku Linuxa najlepiej użyć oficjalnej dokumentacji, tam znajdziemy odpowiedni poradnik dla większości dystrybucji (https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)

Poprawność instalacji NPM można potwierdzić poprzez wywołanie polecenia npm w linii poleceń (terminalu). Mając zainstalowany menadżer pakietów przejdźmy dalej – do instalacji samego Angulara. Proces ten nie jest niczym trudnym, ponownie w linii poleceń wywołujemy:
npm install -g @angular/cli

Po chwili Angular CLI (Common Line Interface, czyli linia poleceń Angulara) zostanie zainstalowana, a my będziemy mogli rozpocząć prace nad docelową aplikacją.

W pierwszej kolejności wyszukujemy miejsce, w którym będziemy chcieli umieścić naszą aplikację, a następnie tworzymy nowy projekt i uruchamiamy serwer deweloperski:

I już. Możemy przejść do przeglądarki i wpisać:
localhost:4200
Jeśli wszystko będzie ok, powinniśmy zobaczyć ekran powitalny Angulara:
Oczywiście to w żadnym stopniu nasz nie satysfakcjonuje, szybko wracamy więc do naszego kodu i przyglądamy się wygenerowanym plikom:

Jak widzimy, umyślnie katalog src został rozwinięty, a to ze względu na fakt, iż to w nim będziemy rozwijać naszą aplikację. Zacznijmy jednak od kilku podstawowych zasad dotyczących teorii Angulara:

• Angular w całości opiera się na budowie komponentowej, każdy z najmniejszych elementów aplikacji powinien być oddzielnym komponentem (panel, wyszukiwarka, menu, lista, formularz).
• Angular opiera się na TypeScript, czyli pewnej specyfikacji języka JavaScript. Większość poradników/książek tutoriale rozpoczyna właśnie od zagadnień związanych z TS, ja chciałbym by sam TS wyszedł w praniu, przy tworzeniu docelowego kodu  aplikacji.
• Komponenty można łączyć w moduły.
• Większość początkowo przez nas tworzonych komponentów będzie zawierała plik TS (kod JavaScript), plik specs (plik używany do testów jednostkowych), plik HTML (widok komponentu) i plik CSS (kaskadowy arkusz stylów).
• Komponenty można zagnieżdzać (jeden komponent może składać się z kilku innych)

Idąc dalej musimy zastanowić się, z jakich elementów będzie zbudowany nasz system. Wśród nich wyróżnić można:

• menu górne
• listę pojazdów – tabelkę z listą i informacjami o dostępnych pojazdach
• komponent łączący całą aplikację w całość

Gdy przyjrzymy się strukturze plików, to zauważymy, iż główny komponent aplikacji już mamy – jest on w katalogu app i nosi nazwę app.component. Cofnijmy się jednak wyżej i przyjrzymy się plikowi main.ts. Na samej górze jak łatwo się domyśleć po słowie kluczowym import zobaczyć można zaimportowane moduły i biblioteki. W nich to można dostrzec między innymi:
import { AppModule } from ‘./app/app.module’;

Zapis ten oznacza import modułu app, będącego głównym modułem aplikacji. To plus zapis w 11 linii (platformBrowserDynamic().bootstrapModule(AppModule);) jednoznacznie wskazuje, że kolejne kroki powinniśmy skierować do katalogu app i pliku app.module.ts.

Tu już widzimy bezpośrednią definicję naszego modułu (linia 6 i @NgModule), którą można łatwo rozszyfrować:

• declarations – deklaracja komponentów, na razie mamy główny komponent aplikacji AppComponent
• imports – import wymaganych modułów, będziemy potrzebować BrowserModule
• bootstrap – komponent główny modułu

Naturalnym krokiem będzie pójście za ciosem, skoro głównym modułem aplikacji jest AppModule, a w nim to głównym komponentem jest AppComponent to siłą rzeczy przechodzimy do pliku app.component.ts (jest to główny plik logiki komponentu, jak pisałem wcześniej *.css to style, *.html to widok, natomiast *.spec.ts używany jest do testów).

Zaglądamy do opisywanego pliku i widzimy deklarację komponentu:

Selektorem komponentu będzie app-root, szablonem HTML komponentu będzie plik app.component.html, natomiast arkuszem plik app.component.css.
Jeśli teraz zajrzymy do głównego pliku aplikacji index.html, to całość domknie się automatycznie – zobaczymy bowiem tam
<app-root></app-root>

co będzie jednoznacznie odpowiadało wpisowi selector: ‘app-root’, który przed chwilą zaobserwowaliśmy.
Co dalej? Przydałoby się stworzyć jakieś własne komponenty i je wywołać, czyli użyć w naszym głównym komponencie aplikacji. Będzie to pierwsza czynność jaką wykonamy już w przyszłym odcinku, dziś na zakończenie chciałbym poruszyć temat odpowiedniej struktury aplikacji. Kilka akapitów wyżej udało się nam ustalić, iż cała aplikacja będzie zbudowana z multum różnych, często małych komponentów. Każdy z nich będzie posiadał własną gamę plików. Jak te elementy poprawnie umiejscowić?

Nawiązując bezpośrednio do oficjalnej dokumentacji Angulara można zaproponować poniższą strukturę:

W skrócie przedstawmy główne założenia:

• rzeczy dotyczące działania aplikacji na najwyższym poziomie, niezależnie od komponentu obsługiwane w ten sam sposób, np. obsługa wyjątków umieszczamy w katalogu core
• Pewien fragment naszego systemu, który może być wydzielony jako osobny moduł, który może być ponownie użyty w innej aplikacji, powinien być umieszczony w osobnym katalogu, w opisywanym przypadku takim modułem jest heroes.
• elementy systemu, które są współdzielone pomiędzy komponenetami danego modułu powinny zostać umieszczone w katalogu shared. Zauważmy, iż głowny moduł aplikacji posiada swój katalog shared, natomiast moduł heroes posiada kolejny katalog shared, w którym to umieścimy powtarzający się kod tego modułu.

Tak przygotowani możemy przejść do konkretów – w następnym odcinku postaramy się stworzyć pierwszy nowy komponent, a czynność tą poprzedzimy próbą rozłożenia naszego systemu na mniejsze elementy.