Angular 5 – Wstęp

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:

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.