Miesięcznik informatyków i menedżerów IT sektora publicznego

Paweł Ziółkowski

Framework Angular w nowej wersji

Od 2016 r. Google udostępnia framework Angular2 z nowymi funkcjami i architekturą. Do końca ubiegłego roku pojawiły się następne cztery wersje rozwiązania. W artykule opisujemy najnowszą, siódmą odsłonę tej platformy programistycznej.

Schemat przedstawia wszystkie omawiane w artykule wiązania. Strzałkami zostały oznaczone kierunki przepływu danych oraz sposób użycia. Szablon komponentu przedstawiono jako DOM, a klasę komponentu (plik ts) jako COMPONENT.

W nowym frameworku posługujemy się przygotowanym przez Microsoft językiem Type­Script (nadzbiór JavaScript), co stanowi nowość w porównaniu z AngularJS, czyli pierwszą wersją platformy. Jeżyk ten daje programiście więcej możliwości i pomaga pisać kod z mniejszą liczbą błędów. Za pomocą nowej składni uzyskujemy szybsze działanie aplikacji i sprawniejsze zarządzanie kodem, a ponadto możemy wykorzystywać to samo narzędzie do pisania aplikacji na różne platformy.

Instalacja frameworka

Aby rozpocząć pracę z Angularem, należy pobrać jego składniki, z których będziemy budowali aplikację. Angular został zbudowany z wielu modułów dostępnych do pobrania przez m.in. menedżera pakietów npm (dostępny z Node.js). To z modułów będziemy pobierać (importować) wymagane elementy do pracy, np. funkcje, właściwości, dekoratory itd. Cały framework składa się z głównych (wymaganych) oraz dodatkowych modułów. Wszystkie wymagane elementy wymienione są na stronie itwa.pl/ei. Dodatkowe moduły znajdują się przede wszystkim w bibliotece rxjs (Reactive Extensions Library for JavaScript), która służy do pracy z obiektami (obser­vables) „emitującymi” dane oraz polyfillami (emulują brakujące funkcje w starszych przeglądarkach). Wymienione elementy znajdują się w sekcji Dependencies pliku package.json menedżera.

Instalację przez npm możemy wykonać na dwa sposoby – pobrać wszystkie moduły w jednym pliku lub pobrać przygotowany plik package.json i zainstalować pakiety poleceniem npm install. Dokumentacja frameworka odradza jednak korzystanie z tych metod i zaleca użycie oficjalnego narzędzia, które wykona za nas całą pracę. Angular Command-Line Interpreter (Angular CLI) jest pakietem instalowanym przez npm (itwa.pl/ej) do zarządzania projektem Angular. Należy otworzyć terminal (wszystkie prace będą wykonywane w edytorze Visual Studio Code; więcej na ten temat w artykule „Nowoczesne kodowanie z JavaScript”, „IT w Administracji” 2018, nr 11) i wykonać polecenie npm install -g @angular/cli (flaga g oznacza global, czyli instalację dostępną z każdego miejsca przez terminal). Po tym kroku możemy używać narzędzi przez polecenie ng nazwaPolecenia (pełna lista poleceń dostępna jest na stronie itwa.pl/ek).

Pierwszym krokiem z nowym narzędziem jest utworzenie tzw. Angular workspace, czyli folderu roboczego, i pobranie wymaganych plików. Wykonujemy to przy użyciu komendy ng new itwa-ng (itwa-ng to nazwa projektu, ng to skrót nazwy Angular). Nasz nowy folder itwa-ng po instalacji będzie miał objętość ok. 250 MB. Najwięcej miejsca zajmują pobrane moduły w folderze node_modules. W pliku package.json znajdziemy opis projektu wraz z zainstalowanymi pakietami. Większość z nich to moduły Angulara (z prefiksem @angular) oraz dodatkowe narzędzia wymagane tylko przy pisaniu kodu (devDependencies).

Aby zobaczyć, jak wygląda nasza nowa aplikacja, musimy uruchomić serwer, zapewniający dostęp do wszystkich wymaganych plików. CLI dostarcza nam również serwer (Angular Live Development Server), który uzyskamy poleceniem ng serve wykonanym w folderze projektu. Po zakończeniu przygotowania plików otrzymamy informacje o powstałych plikach i adresie, pod którym dostępna jest strona. Domyślnie znajduje się ona pod adresem http://localhost:4200. Serwer będzie działał w trybie watch, czyli każda zmiana w plikach źródłowych wywoła odświeżenie strony w przeglądarce. Najlepiej w tym celu mieć otwarty dodatkowy terminal dla tego procesu. Powstała strona zawiera stały szkielet dostarczany przez CLI. Na razie nasz wkład w zawartość to jedynie tytuł strony.

Edycja kodu

Wszystkie wymagane dla programisty pliki zostały umiejscowione w folderze src/app. Plik index.html znajduje się poza tym folderem, rzadko będziemy go jednak edytować. Możemy w nim zauważyć, że został wstawiony dodatkowy element HTML app-root. To właśnie tu będzie się znajdować cała aplikacja. Definicję, czym jest element app-root, znajdziemy w pliku src/app/app.component.ts we właściwości selector:

import { Component } from \
'@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'itwa-ng';
}

Rozwinięciem elementu, czyli tym, co zostanie wstawione w jego miejsce w pliku index.html, gdzie został użyty, jest templateUrl – plik, w którym definiujemy kod HTML. Przedstawiony kod jest kodem komponentu App, czyli zamkniętą częścią kodu HTML wraz z jego zachowaniem i wyglądem. Składa się on z trzech plików: ts, css oraz html. Komponent w Angularze to klasa z dekoratorem @Component, który zapisywany jest bezpośrednio nad definicją klasy. Dekorator to dodatkowe informacje o opisywanym elemencie, czyli metadane klasy. Słowo export służy do wskazania, co ma być widoczne z tego pliku dla innych elementów w kodzie. Zarówno dekorator @Component, jak i słowo kluczowe export nie należą do kodu JavaScript, ale do TypeScript.

[...]

Autor jest absolwentem Uniwersytetu Ekonomicznego we Wrocławiu, pracuje jako informatyk w Urzędzie Gminy w Miękini.

Pełna treść artykułu jest dostępna w papierowym wydaniu pisma. Zapraszamy do składania zamówień na prenumeratę i numery archiwalne.
 
 

Polecamy

Biblioteka Informacja Publiczna

Specjalistyczne publikacje książkowe dla pracowników administracji publicznej

więcej