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

Paweł Ziółkowski

Budowanie aplikacji z frameworkiem AngularJS 1.x

Stronę WWW możemy utworzyć z wykorzystaniem języka HTML i stylów kaskadowych CSS. Jeśli jednak dodamy do niej JavaScript, będzie ciekawsza. Najlepiej do tego celu wykorzystać gotowy framework AngularJS.

itwa.pl/extra
itwa.pl/extra

Współczesna strona internetowa to aplikacja, która w sposób ciągły komunikuje się z serwerem, przetwarzającym dane. Coraz częściej wykorzystywane są też animacje i zarządzanie widokami. Za pomocą JavaScript możemy też dodać pewną architekturę do naszego kodu, a także implementować wzorce i stosować sprawdzone zasady. Reguły te ułatwią nam późniejsze zarządzanie kodem. Te i wiele innych rozwiązań znajdziemy we frameworku AngularJS.

Otwarty framework

AngularJS to framework działający po stronie klienta, stworzony i rozwijany przez pracowników Google’a. Bazuje na architekturze MVC (Model-View-Controller), wspiera także tworzenie stron SPA (Single Page Applications). SPA nie wymagają odświeżenia całej strony przy zmianach, lecz tylko jej części, wykorzystując do tego technologię AJAX (Asynchronous JavaScript and XML). Wzorzec MVC implementuje zasadę podziału odpowiedzialności (SoC – Separation of Concern) przez podział aplikacji na trzy części: model, widok i kontroler. Model to zbiór danych. Kontroler odpowiada za interakcję z użytkownikiem i aktualizację stanu modelu, czyli jego wartości. Zadaniem widoku jest pobranie danych z modelu i wyświetlenie ich użytkownikowi. W Angularze widokiem jest DOM (Document Object Model – drzewo tworzone na podstawie dokumentu HTML przez przeglądarkę), do którego będziemy dodawać kod frameworka. Modelem będą dane, zmienne, obiekty, a kontrolerem – odpowiednie funkcje. Zarówno widoków, jak i kontrolerów zazwyczaj jest wiele, a ich interakcja zmienia stan modelu.

Przygotowanie środowiska

Naukę rozpoczniemy od napisania prostej strony WWW i dodania kodu Angulara. Strona będzie tylko wyświetlała wprowadzany przez nas tekst do pola input. Uwaga! Kod aplikacji znajduje się pod aresem itwa.pl/js1. Do uruchomienia wymagana jest instalacja pakietów npm install w katalogu projektu.

Na początku tworzymy serwer z wykorzystaniem NodeJS. Na maszynie wirtualnej przechodzimy do katalogu /var/www i tworzymy (jako root) folder: mkdir angular. W nowym katalogu inicjujemy nowy projekt poleceniem npm init, a następnie przez wiersz polecenia instalujemy framework ExpressJS: npm install express –save. W nowym pliku index.js umieszczamy kod:

(function() {

const express = require(‘express’);

const server = express();

// dwie metody pośrednie, serwujące pliki statyczne

server.use(express.static(‘public’));

server.use(‘/js’, express.static(‘public/js’)); //

server.listen(8080); //zacznij nasłuchiwać na porcie 8080

})();

Teraz należy się zająć stroną klienta. W /angular tworzymy folder public, a w nim folder js. Z kolei w katalogu public tworzymy plik index.html, który będzie domyślnie wysyłany do klienta przez serwer. W pliku umieszczamy kod (wyróżnione zostały elementy frameworka):

<!DOCTYPE html>

<html lang="pl" ng-app="app">

<head>

<meta charset="utf-8">

<title>AngularJS 1</title>

<script src="https://ajax.googleapis.com/ajax/libs/

angularjs/1.6.1/angular.min.js"></script>

<script src="/js/app.js"></script>

</head>

<body>

<div ng-controller="appKontroler">

<input type="text" ng-model="imie"></input>

<h2>Witaj {{imie}}</h2>

</div>

</body>

</html>

W pliku html, oprócz zdefiniowania widoku, pobieramy również dwa skrypty js: framework AngularJS (wersja 1.6.1) i nasz skrypt app.js. Framework pobierany jest z zewnętrznej lokalizacji (CDN – Content Delivery Network) wskazanej na stronie projektu. Jak widzimy, Angular rozszerza zwykły HTML o własne elementy.

[...]

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