RAZVOJ SPLETNE APLIKACIJE SPA Z OGRODJEM ANGULARJS · Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 5 3 ANGULARJS AngularJs je trenutno eno izmed najboljših ogrodij SPA

Rene Cimerlajt

RAZVOJ SPLETNE APLIKACIJE SPA Z

OGRODJEM ANGULARJS

Diplomsko delo

Maribor, december 2014

Fakulteta za elektrotehniko,

računalništvo in

informatiko

I

II

Diplomsko delo visokošolskega strokovnega študijskega programa

RAZVOJ SPLETNE APLIKACIJE SPA Z

OGRODJEM ANGULARJS

Študent: Rene Cimerlajt

Študijski program: Računalništvo in informacijske tehnologije (VS)

Smer: \

Mentor: dr. Milan Ojsteršek

Maribor, december 2014

III

ZAHVALA

Zahvaljujem se mentorju dr. Milanu

Ojsteršku za pomoč in vodenje pri

opravljanju diplomskega dela.

Iskreno se zahvaljujem staršem, ki so me

podpirali in spodbujali tekom celotnega

študija.

II

Razvoj spletne aplikacije SPA z ogrodjem AngularJS

Ključne besede: računalništvo, razvoj spletnih aplikacij, JavaScript, AngularJS, SPA,

aplikacija na eni spletni strani

UDK: 004.774.6(043.2)

Povzetek

Uporaba spletnih aplikacij se iz dneva v dan povečuje in posledično se spreminjajo tudi

zahteve po novih in boljših načinih njihove implementacije. V diplomski nalogi se bomo

osredotočili na spletne aplikacije, ki se izvajajo znotraj ene spletne strani (angl. single page

applications; kratica: SPA). Omogočajo nam tekoče prehode med stranmi v aplikaciji,

zagotavljajo odzivnejšo in boljšo uporabniško izkušnjo ter procesiranje podatkov na

odjemalcu. Za gradnjo takšnih spletnih aplikacij lahko uporabimo različna ogrodja. Med

njimi najbolj izstopa AngularJS, ki s svojo arhitekturo in načinom uporabe prekaša

konkurenco. V diplomskem delu je predstavljen princip delovanja aplikacij SPA, ki temelji

na uporabi Javascript ogrodja AngularJS. Zajeti so osnovni koncepti SPA ter podroben opis

ogrodja. Njegovo uporabo smo predstavili na praktičnem primeru spletne aplikacije za

prikaz vremenskih podatkov.

III

Development of single page applications with AngularJS

framework

Key words: computer science, web application development, JavaScript, AngularJS, SPA,

Single Page Application

UDK: 004.774.6(043.2)

Abstract

Due to an increasing use of web applications, there are new requirements for better ways of

their implementation. In this thesis, we will focus on web applications that are implemented

within a single web page (Single page applications - SPA). These applications allow for fluid

transitions between pages in an applications and ensure a more responsive and better user

experience as well as data processing on the client. We can use different frameworks to write

these web applications. Among others, AngularJS stands out with its architecture and

performance. This thesis presents the operating principles of SPA web applications which is

based on the AngularJS JavaScript framework. Basic concepts of SPA and a detailed

description of the framework are included. A web application for displaying weather data is

used to present the practical use of the framework.

IV

VSEBINA 1 UVOD ............................................................................................................................ 1

2 SINGLE PAGE APPLICATION .................................................................................. 3

3 ANGULARJS ................................................................................................................ 5

3.1 Predloga na strani odjemalca .................................................................................. 5

3.2 Povezovanje podatkov ............................................................................................ 6

3.2.1 Doseg ............................................................................................................... 7

3.3 Modul ...................................................................................................................... 8

3.4 Krmilnik .................................................................................................................. 8

3.5 Injiciranje odvisnosti ............................................................................................. 11

3.6 Ponudniki storitev ................................................................................................. 12

3.6.1 Value .............................................................................................................. 12

3.6.2 Factory ........................................................................................................... 13

3.6.3 Service ........................................................................................................... 14

3.6.4 Provider ......................................................................................................... 15

3.6.5 Constant ......................................................................................................... 15

3.7 Filter ...................................................................................................................... 16

3.8 Prevajalnik HTML ................................................................................................ 17

3.9 Direktiva ............................................................................................................... 18

3.9.1 ngApp ............................................................................................................ 19

3.9.2 ngModel ......................................................................................................... 19

3.9.3 ngRepeat ........................................................................................................ 20

3.9.4 ngShow, ngHide in ngIf ................................................................................ 21

3.9.5 Ustvarjanje lastnih direktiv ............................................................................ 21

4 APLIKACIJA VREMENSKA NAPOVED ................................................................ 24

5 SKLEP ......................................................................................................................... 29

V

VIRI IN LITERATURA ...................................................................................................... 30

VI

KAZALO SLIK

Slika 2.1: Klasična komunikacija med odjemalcem in strežnikom ....................................... 3

Slika 2.2: Komunikacija odjemalec - strežnik v SPA aplikaciji............................................ 4

Slika 3.1: Enkratno vezenje podatkov ................................................................................... 6

Slika 3.2: Obojestransko povezovanje podatkov ................................................................... 7

Slika 3.3: Injiciranje odvisnosti ........................................................................................... 11

Slika 3.4: Postopek avtomatske inicializacije aplikacije ..................................................... 19

Slika 4.1: Domača stran aplikacije Vremenska napoved .................................................... 24

Slika 4.2: Domača stran aplikacije po spremenjeni temi .................................................... 25

Slika 4.3: Stran s podrobnostmi o vremenski napovedi in graf ........................................... 26

Slika 4.4: Stran s šestnajst dnevno vremensko napovedjo .................................................. 26

Slika 4.5: Stran s priljubljenimi lokacijami ......................................................................... 27

Slika 4.6: Stran na kateri je mogoče iskati lokacije ............................................................. 28

VII

Kazalo primerov kode

Primer kode 3.1: Predloga ..................................................................................................... 5

Primer kode 3.2: Primer deklaracije in uporabe modulov ..................................................... 8

Primer kode 3.3: Definicija krmilnika brez notacije za varno minimizacijo......................... 9

Primer kode 3.4: Definicija krmilnika z notacijo za varno minimizacijo ........................... 10

Primer kode 3.5: Podatki v obliki JSON ............................................................................. 10

Primer kode 3.6: Uporaba krmilnika ................................................................................... 10

Primer kode 3.7: Uporaba storitve »factory« v krmilniku................................................... 12

Primer kode 3.8:Primer storitve «value« ............................................................................. 13

Primer kode 3.9: Primer storitve «factory« ......................................................................... 13

Primer kode 3.10:Storirev »service« ................................................................................... 14

Primer kode 3.11: Primer storitve »provider« ..................................................................... 15

Primer kode 3.12: Primer storitve konstanta ....................................................................... 16

Primer kode 3.13: Primer filtra, ki pretvarja med valutami ................................................ 16

Primer kode 3.14: Uporaba filtra v predlogi........................................................................ 17

Primer kode 3.15: Direktiva »ngRepeat« ............................................................................ 20

Primer kode 3.16: Direktive »ngShow«, »ngHide«, »ngIf« ................................................ 21

Primer kode 3.17: Primer definicije direktive ..................................................................... 22

Primer kode 3.18: Primer uporabe lastne direktive ............................................................. 23

VIII

UPORABLJENE KRATICE

SPA Single Page Application

SPI Single Page Interface

AJAX Asynchronous JavaScript and XML

SSOT Single Source Of Truth

MVC Model View Controller

HTML Hyper Text Markup Language

URL Uniform Resource Locator

Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 1

1 UVOD

Svetovni splet se je skozi leta močno spremenil. Če pogledamo v preteklost se je vse začelo

leta 1989, ko je Tim Berners-Lee, raziskovalec v CERNU, potreboval način, da bi lahko

raziskovalci na različnih koncih sveta sodelovali in objavljali svoje ideje, raziskovalne

podatke in rezultate raziskav [1]. V začetnem obdobju razvoja spleta so razvijalci spletnih

aplikacij pisali zelo preproste statične spletne strani, ki so vsebovale le nekaj slik in besedilo.

Ker so uporabniki zahtevali bolj interaktivne spletne aplikacije, se je pojavila potreba po

novih tehnologijah in konceptih, ki nam omogočajo lažje razvijanje takšnih aplikacij. Prav

to nam omogoča koncept Single Page Application (SPA).

Aplikacije SPA so spletne aplikacije, ki se izvajajo znotraj ene spletne strani. Omogočajo

nam tekoče prehode med stranmi v aplikaciji, zagotavljajo odzivnejšo in boljšo uporabniško

izkušnjo ter procesiranje podatkov na odjemalcu. Aplikacije SPA uporabljajo klice AJAX,

ki nam omogočajo asinhroni prenos podatkov in osveževanje samo delov spletne strani [2].

Koncept SPA je sprejelo veliko število razvijalcev in začela so se pojavljati različna ogrodja,

ki omogočajo realizacijo tega koncepta. Primer takšnega ogrodja je AngularJS, ki nam

omogoča gradnjo razširljivih, robustnih in odzivnih spletnih aplikacij. AngularJS omogoča

pisanje spletnih aplikacij v skladu z arhitekturo MVC (angl. Model View Controller) in

njihovo enostavnejše testiranje [3].

V diplomskem delu smo predstavili koncept SPA na primeru ogrodja AngularJS, njegove

glavne komponente ter implementirali preprosto spletno aplikacijo s tem ogrodjem.

V drugem poglavju smo opisali glavne koncepte SPA in primerjali delovanje aplikacij SPA

s klasičnimi spletnimi aplikacijami.

V poglavju, ki sledi, smo orisali začetek nastanka ogrodja AngularJS in njegove bistvene

komponente.


V četrtem poglavju smo povzeli osnovne koncepte in primere uporabe testiranja spletnih

aplikacij, kjer smo uporabili dve različni vrsti testov.

V petem poglavju smo predstavili lastno implementacijo aplikacije za pregled vremenske

napovedi.

V zadnjem poglavju smo podali nekaj zaključnih misli in napotkov za nadaljnje delo.


2 SINGLE PAGE APPLICATION

Zahteva po interaktivnih spletnih aplikacijah je iz dneva v dan večja. Prav zaradi tega se je

pojavila zahteva po novem načinu gradnje spletnih aplikacij. Pri klasičnih spletnih

aplikacijah se celotna spletna stran zgradi na strežniku, ki jo nato pošlje odjemalcu. To se

ponovi za vsako stran, ki jo zahteva odjemalec. Pri aplikacijah SPA se samo prva stran zgradi

na strežniku, od strežnika se nato zahtevajo samo deli strani in podatki. Dejansko se celotna

gradnja strani zgodi na strani odjemalca [4].

Slika 2.1: Klasična komunikacija med odjemalcem in strežnikom

Da pravilno razumemo delovanje spletnih strani SPA, moramo dobro razumeti, kaj beseda

»stran« (angl. page) pri kratici SPA sploh pomeni. Pri klasičnih spletnih straneh (Slika 2.1)

beseda »stran« definira vsebino spletne strani, ki se spreminja glede na odjemalčevo zahtevo.

To lahko razumemo tako, da ko odjemalec pošlje zahtevo po novi spletni strani, mu strežnik

ponovno pošlje celotno stran [5].


Pri spletnih straneh na eni strani (SPA) pa temu ni tako, saj je kot »stran« definirana celotna

spletna aplikacija, ki jo odjemalec v celoti prejme od strežnika ob začetku izvajanja

aplikacije, z vsako novo zahtevo pa prejme le nove podatke in ne nove strani (Slika 2.2) [5].

V aplikacijah SPA so pogledi tisto, kar bi v klasični spletni aplikaciji poimenovali »stran«.

Pogledi se v »stran« vstavljajo dinamično in s tem pridobimo na hitrosti in na lepših prehodih

med pogledi ter zmanjšamo količino podatkov, ki se morajo prenesti med odjemalcem in

strežnikom [5].

Slika 2.2: Komunikacija odjemalec - strežnik v SPA aplikaciji

Strežnik s tem občutno razbremenimo, kajti vse kar strežnik mora narediti je, da vrne

vstopno stran nato pa gole podatke, ki jih zahteva odjemalec. Generiranje strani prevzame

odjemalec.

Pri klasični spletni aplikaciji se spletni naslov preslika v dejansko stran na strežniku. Pri

spletnih aplikacijah SPA pa ne, ker imamo le eno stran. Da bi omogočili isti način navigacije,

torej preko naslovov URL, se v SPA uporablja tako imenovan usmerjevalnik, ki poskrbi za

prehode med različnimi pogledi ter za spremembo naslova URL v brskalniku [6].


3 ANGULARJS

AngularJs je trenutno eno izmed najboljših ogrodij SPA. Leta 2009 sta ga začela razvijati

Miško Havery in Adam Abrons v podjetju Tech LCC, kot ogrodje za njuno poslovno idejo.

Čez čas sta se odločila in prekinila posel ter izdala AngularJS kot odprtokodno rešitev.

Kasneje se je Miško Havery, ki dela pri Googlu, odločil nadaljevati z razvojem, Adam

Abrons pa je zapustil projekt [3].

3.1 Predloga na strani odjemalca

Predloga (angl. template), je neke vrste recept, ki definira, kako se naj podatki prikažejo.

Model definira podatke, predloga pa jih prikazuje. Predloga je zadnja stopnja obdelave

podatkov, preden jih vidi uporabnik oz. preden se predloga pretvori v pogled. V AngularJS

so predloge kar deli kode v HTML, z razširjenim naborom funkcionalnosti. Razširjen nabor

funkcionalnosti imenujejo »direktive« [7].

Primer kode 3.1: Predloga

Osnovni gradniki pri predlogah AngularJS so enaki kot pri HTML. Da se stran prikaže kot

predloga AngularJS, je ključnega pomena direktiva »ng-app«. Ta direktiva pove AngularJS,

<!DOCTYPE html>

<html>

<body ng-app="">

<div>5 + 5 = {{5 + 5}}</div>

<script src="angular.min.js"></script>

</body>

</html>


da naj stran prevede kot AngularJS predlogo in ne kot navadno stran HTML. Če bi izpustili

direktivo »ng-app« bi se stran prikazala kot navaden HTML in bi se prikazalo »5 + 5 = {{5

+ 5}}«, v nasprotnem primeru pa se izpiše »5 + 5 = 10« (Primer kode 3.1).

Dvojni zaviti oklepaji v AngularJS predstavljajo »izraz« (angl. expression). Vsebina izraza

se ovrednoti in izpiše. V izraz lahko zapišemo osnovne matematične operacije, logične

operacije (večje, manjše, enako) in spremenljivke ter filtre.

3.2 Povezovanje podatkov

Povezovanje podatkov je postopek povezave med modelom, predlogo in pogledom. V

klasičnih predlogah se prenos zgodi samo enkrat.

Podatke, ki se nahajajo v modelu, je potrebno poslati do predloge. Povezovanje podatkov,

nam omogoča enostaven način prenosa podatkov iz modela do predloge in iz pogleda do

modela (Slika 3.1). Prenos podatkov, ki poteka v obe smeri, se imenuje obojestransko

povezovanje podatkov (angl. two-way data binding).

Slika 3.1: Enkratno vezenje podatkov


Obojestransko povezovanje ima prednost pred klasičnim povezovanjem v tem, da sledi

principu »Single Source of Truth« (SSOT). SSOT sledi dobri praksi definiranja modela in

struktur tako, da je vsak podatkovni element shranjen samo enkrat (Slika 3.2) [8].

Slika 3.2: Obojestransko povezovanje podatkov

3.2.1 Doseg

Doseg (angl. scope) je v AngularJS posebna spremenljivka. Njena naloga je, da služi kot

povezava med krmilnikom in predlogo. Modele izpostavimo predlogi s pomočjo dosega.

Doseg uporablja prototipno dedovanje. V veliki večini spletnih aplikacij imamo več dosegov

na en pogled (tudi do več deset v večjih aplikacijah). Vsaka aplikacija ima natanko en

korenski doseg (angl. root scope), vsi nadaljnji dosegi dedujejo od korenskega dosega ali od

očetovskega dosega. Prototipnega dedovanja ne smemo enačiti z objektnim dedovanjem, saj

so med njima bistvene razlike [9].


3.3 Modul

Modul je v AngularjJS vrsta zbiralnika, v katerega vključujemo različne gradnike aplikacije

(Primer kode 3.2). Pomaga nam pri ustvarjanju kode, ki jo je mogoče večkrat uporabiti.

Moduli, katerih imena se začnejo z »ng«, so moduli, ki so rezervirani s strani AngularJS. Iz

tega sledi pravilo dobre prakse, da imen lastnih modulov ne začnemo z »ng«. Priporočljivo

je, da na začetku imena modula definiramo začetnico našega podjetja oziroma organizacije,

saj tako ločimo lastne module od tujih [9].

Potrebno je še omeniti, da moduli ne rešujejo problema, ko imata na primer dve storitvi

enako ime, in sta v ločenih modulih, saj se bo uporabila storitev, ki je bila zadnja naložena

[10].

Primer kode 3.2: Primer deklaracije in uporabe modulov

3.4 Krmilnik

Krmilnik (angl. Controller) je konstruktor v JavaScriptu. Naloga krmilnika je, da pripravi

podatke in funkcije, ki jih bo potreboval pogled. Krmilniki so vezani na predlogo, saj ko se

predloga inicializira, AngularJS ustvari nov krmilni objekt, s pomočjo definiranega

konstruktorja.

Krmilnik ima možnost, da mu injiciramo odvisnosti (angl. dependency injection). To nam

omogoča definiranje poslovne logike v ponudnikih storitev (angl. service providers), zato

nam ni potrebno iste kode pisati na več mestih, kar pripomore k čistejši implementaciji in

lažjemu vzdrževanju ter razširjanju funkcionalnosti [11], [12].

//Definiranje modula s pripadajočimi odvisnostmi:

angular.module('mojaAplikacija', ['ngRouter']);

//Definiranje modula brez odvisnosti:

angular.module('mojaAplikacija', []);

//Pridobivanje obstoječega modula:

angular.module('mojaAplikacija');


Krmilnike je možno definirati na več načinov. Glavna dva sta sledeča:

- Definiranje krmilnika brez notacije za varno minimizacijo.

- Definiranje krmilnika z notacijo za varno minimizacijo.

Prvi način definiranja konstruktorja je njegovo definiranje brez notacije za varno

minimizacijo (Primer kode 3.3). Minimizacija je proces, pri katerem skrajšamo imena

spremenljivk, odstranimo presledke in nove vrstice. To pripomore k manjši velikosti

datoteke in posledično vpliva na hitrejši zagon aplikacije [13].

Primer kode 3.3: Definicija krmilnika brez notacije za varno minimizacijo

Drugi način pa je definicija konstruktorja z uporabo notacije za varno minimizacijo (Primer

kode 3.4). Pri tem načinu funkcija sprejme kot drugi argument polje, v katerem navedemo

odvisnosti in konstruktorjeve funkcije. Zakaj je torej pomembno, da dvakrat navedemo isto

ime? Odgovor je preprost. Z uporabo tega načina ne spreminjamo nizov znakov in tako

imena odvisnosti ostanejo nespremenjena. Notacija za varno minimizacijo ni izključno

namenjena le za krmilnike, temveč za vse AngularJS komponente, ki se poslužujejo

injiciranja odvisnosti [12].

// Definicija konstruktorja za krmilnik,

// brez notacije za varno minimizacijo.

angular.module('mojaAplikacija').controller('MojKrmilnik',

function($scope, $http){

$http.get('uporabniki/uporabnik_1.json')

.success(function(uporabnik){

$scope.uporabnik = uporabnik;

});

}

);


Primer kode 3.4: Definicija krmilnika z notacijo za varno minimizacijo

Primer kode 3.5: Podatki v obliki JSON

Izvajalniku kode AngularJS je potrebno povedati, kje naj uporabi krmilnik. To storimo s

pomočjo direktive »ng-controller« tako, da direktivi podamo ime krmilnika (Primer kode

3.6). Sedaj lahko v predlogi dostopamo do podatkov, ki smo jih naložili v krmilniku s

pomočjo storitve »$http«.

Primer kode 3.6: Uporaba krmilnika

// Definicija konstruktorja za krmilnik,

// z notacijo za varno minimizacijo.

angular.module('mojaAplikacija').controller('MojKrmilnik', [

'$scope', '$http',

function($scope, $http){

$http.get('uporabniki/uporabnik_1.json')

.success(function(uporabnik){

$scope.uporabnik = uporabnik;

});

}

]);

{

"ime": "Rene",

"priimek": "Cimerlajt",

"datumRojstva": "26.08.1991",

"student": true

}

<!DOCTYPE html>

<html>

<body ng-app="mojaAplikacija">

<div ng-controller="MojKrmilnik">

<div>Ime: {{uporabnik.ime}}</div>

<div>Priimek: {{uporabnik.priimek}}</div>

<div>Datum rojstva: {{uporabnik.datumRojstva}}</div>

</div>

<script src="angular.min.js"></script>

</body>

</html>


3.5 Injiciranje odvisnosti

V prejšnjem poglavju smo v krmilniku uporabili storitev »$http«, ki nam omogoča prenos

podatkov. Seveda nas sedaj zanima od kot je prišel tale parameter. AngularJS uporablja

načrtovalski vzorec »injiciranje odvisnosti« (angl. dependency injection). Glavni namen

tega vzorca je, da so odvisnosti med različnimi komponentami čim bolj šibke (Slika 3.3). To

nam prinese lažje testiranje posameznih enot aplikacije in enostaven način zamenjave

storitev.

Slika 3.3: Injiciranje odvisnosti


3.6 Ponudniki storitev

Poznamo pet načinov kako ustvariti ponudnika. Ponudniki omogočajo različne načine

ustvarjanja storitev.

Poznano naslednje vrste storitev:

- »value«,

- »factory«,

- »service«,

- »provider« (je najzahtevnejši za implementacijo),

- »constant«.

Potrebno je poudariti da so vse storitve v AngularJS tako imenovani »edinec« (angl.

singleton). Edinec je objekt, ki se ustvari samo enkrat v aplikaciji in se vedno znova kliče

ista instanca objekta [11], [14].

Storitve je mogoče injicirati v krmilnike (Primer kode 3.7), filtre, direktive in druge storitve

z izjemo »value« ter »constant«.

Primer kode 3.7: Uporaba storitve »factory« v krmilniku

3.6.1 Value

Storitev »value« nam omogoči, da v modulu ustvarimo vrednost, ki jo je mogoče injicirati,

njena zaloga so vrednosti primitivnih tipov (Primer kode 3.8). Vrednost je najenostavnejša

vrsta ponudnika [14].

angular.module('mojaAplikacija').controller('UporabnikCtrl' [

'$scope', 'uporabnikFactory'

function($scope, uporabnikFactory){

// Pridobimo trenutnega uporabnika.

// Vsa potrebna logika je v storitvi uporabikFactory.

$scope.uporabnik = uporabnikFactory.getUporabnik();

}

]);


Primer kode 3.8:Primer storitve «value«

3.6.2 Factory

Storitev »factory« je enostavna za uporabo ampak ji manjkajo pomembne funkcionalnosti,

ki jih potrebujemo, ko izdelujemo svoje storitve (Primer kode 3.9). Storitev »factory« lahko

uporablja druge ponudnike ter ima zmožnost kasnejše inicializacije [14].

Primer kode 3.9: Primer storitve «factory«

angular.module('mojaAplikacija').value('uporabnikValue', 'Rene C.');

angular.module('mojaAplikacija').factory('uporabnikFactory', [

function(){

var prijavljenUporabnik = {

ime: 'Rene',

priimek: 'Cimerlajt',

letnicaRojstva: '26.08.1991',

student: true

};

return {

getUporabnik: function(){

return prijavljenUporabnik;

},

setUporabnik: function(uporabnik){

if(angular.isDefined(uporabnik)){

prijavljenUporabnik = uporabnik;

}else{

throw new Error("Uporabnik ni

definiran.");

}

}

};

}

]);


3.6.3 Service

Storitev »service« je podobna storitev kot storitev »factory«. Edina razlika med njima je, da

storitev »service« ustvarja objekte s pomočjo rezervirane besede »new« in tako nam ni

potrebno skrbeti za ustvarjanje objektov (Primer kode 3.10) [14].

Primer kode 3.10:Storirev »service«

angular.module('mojaAplikacija').service('uporabnikService', [

function(){

var prijavljenUporabnik = {

ime: 'Rene',

priimek: 'Cimerlajt',

letnicaRojstva: '26.08.1991',

student: true

};

this.getUporabnik = function(){


};

this.setUporabnik = function(uporabnik){



}else{

throw new Error("Uporabnik ni definiran.");

}

};

}

]);


3.6.4 Provider

Storitev »provider« je najzahtevnejša oblika storitve (Primer kode 3.11). Storitev »factory«

in storitev »service« sta grajeni na osnovi storitve »provider«. Storitev »provider« ima

posebno lastnost, da jo je mogoče injicirati v fazi konfiguracije, med tem ko to pri ostalih

storitvah ni mogoče [14].

Primer kode 3.11: Primer storitve »provider«

3.6.5 Constant

Storitev »constant« je podobna storitvi »value« a z razliko, da se vrednost storitve

»konstant« ne more spremeniti, ko jo enkrat postavimo in prav tako jo je možno injicirati v

fazi konfiguracije (Primer kode 3.12) [14].

angular.module('mojaAplikacija').provider('uporabnikProvider',

function(){

var prijavljenUporabnik = undefined;

this.setUporabnik = function(uporabnik){



}else{

throw new Error("Uporabnik ni

definiran.");

}

};

this.$get = [

function(){

return {

getUporabnik: function(){


}

};

}

];

}

);


Primer kode 3.12: Primer storitve konstanta

3.7 Filter

S filtri oblikujemo prikaz vsebine uporabniku. Lahko jih uporabimo v predlogah, krmilnikih

ali v storitvah. Uporaba filtrov je preprosta. Slabost filtrov je, da se izvedejo v vsakem ciklu

prikaza vsebine, kar pa lahko pripomore k daljšim odzivnim časom. Tako je priporočljivo

filtre uporabiti v storitvi ali krmilniku, saj imamo tam več nadzora nad izvajanjem le teh. Pri

injiciranju filtra v krmilnik ali storitev najprej navedemo ime nato pa še končnico »Filter«.

Na primer če je ime filtra »datum«, dostopamo do njega z imenom »datumFilter« [9], [15].

Primer kode 3.13: Primer filtra, ki pretvarja med valutami

angular.module('mojaAplikacija').constant('uporabnikConstant',

'vrednost');

angular.module('mojaAplikacija').filter('valuta', function(){

return function(vrednost, valuta){

var fVrednost = '';

vrednost = vrednost || 0;

valuta = valuta || 'eur';

valuta = valuta.toUpperCase();

try{

fVrednost = new Intl.NumberFormat("sl-SI",

{

style: "currency",

currency: valuta

})

.format(vrednost);

}catch(err){

console.warn('Napaka pri formatiranju: %o', err);

}

return fVrednost;

}

});


Filter »valuta«, ki smo ga ustvarili, nam pomaga pri formatiranju vrednosti, ki

predstavljajo denarno vrednost (Primer kode 3.13). Na koncu številske vrednosti doda

pripadajoči simbol valute, tako za »EURO« doda simbol »€«. Sedaj še nas zanima kako ga

uporabimo. V naslednjem primeru je prikazana uporaba filtra »valuta« v predlogi (Primer

kode 3.14).

Primer kode 3.14: Uporaba filtra v predlogi

3.8 Prevajalnik HTML

AngularJS ima lasten prevajalnik HTML, s pomočjo katerega lahko povečamo nabor

elementov HTML in definiramo nove načine interakcije. Prevajanje poteka v dveh fazah:

1. Prevajanje (angl. compile): ta faza potuje po elementih DOM in zbere vse direktive.

Rezultat je povezovalna funkcija.

2. Povezovanje (angl. link): združi direktivo z dosegom. Tako postane direktiva

aktivna.

Faza prevajanja se izvede za vsako direktivo samo enkrat na stran. Povezovalna faza se

izvede za vsako kopijo direktive. Na ta način se izboljša učinkovitost delovanja, saj ni

potrebno za vsako novo kopijo ponovno prevajati direktive ampak jo je potrebno samo

povezati.

Prevajanje direktiv poteka v treh fazah. Potrebno še je opomniti, da Angularjev prevajalnik

ne dela nad nizi, kot to počne večina prevajalnikov predlog, temveč nad DOM vozlišči. Tako

AngularJS ne razčleni (angl. parsing) nizov ampak to delo opravi brskalnik, ki je za te

namene optimiziran in tako pripomore k hitrejšemu prevajanju predlog [16], [17].

<!DOCTYPE html>

<html>

<body ng-app="mojaAplikacija">

<div ng-init="cena = 12.99">

<span>{{cena | valuta:'eur'}}</span><br />

<span>{{cena | valuta:'usd'}}</span>

</div>

</body>

</html>


1. Prevajalnik potuje po elementih DOM in išče direktive. Če prevajalnik najde element

DOM, ki se ujema z direktivo, ga doda na seznam direktiv, ki se ujemajo z

elementom DOM. En element se lahko ujema z eno ali več direktiv.

2. Urejanje direktiv po prioriteti za vsak element.

3. Poveže predlogo z dosegom na način, da pokliče združeno povezovalno funkcijo, ki

pa pokliče povezovalni funkciji vsake direktive posebej. V tej fazi se registrirajo

poslušalci.

3.9 Direktiva

Direktive so način, kako dopolnimo HTML z novo funkcionalnostjo. Direktive lahko

predstavimo kot atribut, element, komentar ali razred CSS. V bistvu so direktive značilke na

elementih DOM, ki jih AngularJS prevajalnik HTML uporabi, da doda vedenje specifičnemu

elementu DOM.

Vse manipulacije z drevesom DOM se morajo nahajati znotraj direktiv, saj je to edino mesto

kjer bi se naj manipulacije izvajale, razen redkih izjem.

AngularJS ima obširen nabor, že obstoječih direktiv, ki pokrijejo potrebe za večino

preprostih spletnih aplikacij. Direktive, ki so narejene s strani AngularJS imajo predpono

»ng«.

Vmesnik katerega uporabimo za definiranje direktiv, je zelo obširen. Njegova uporaba lahko

za kompleksne primere postane zelo zahtevna. Prvi argument, ki ga vmesnik prejme je ime

direktive, ki mora biti zapisana v formatu CamelCase. Format CameCase narekuje, da ne

uporabljamo ločil, ampak novo besedo začnemo pisati z veliko začetnico. Drugi argument

je funkcija, ki lahko vrne definicijski objekt ali povezovalno funkcijo (angl. postlink) [7],

[9], [18].

V nadaljnjih podpoglavjih bomo opisal direktive, ki jih je potrebno poznati, za osnovno

delovanje aplikacije napisane s pomočjo ogrodja AngularJS.


3.9.1 ngApp

Prva direktiva, ki jo je potrebno poznati je »ngApp«, ta direktiva nam pomaga pri avtomatski

inicializaciji aplikacije. Ko se AngularJS naloži in brskalnik sproži dogodek

»DOMContentLoaded«, AngularJS prične z iskanjem direktive »ng-app«, ki določa koren

aplikacije. Če AngularJS najde direktivo »ngApp« se zgodijo naslednji koraki (Slika 3.4):

- naloži modul, ki se navezuje na direktivo,

- ustvari injektor, ki skrbi za injiciranje odvisnosti,

- prevede DOM, direktivo »ngApp« obravnava kot koren aplikacije. To nam omogoča

definirati samo del aplikacije kot AngularJS aplikacijo.

Potrebno še je omeniti, da je možno uporabiti direktivo »ngApp« samo enkrat na aplikacijo.

Če bi potrebovali več AngularJS aplikacij, bi mogli ročno zagnati posamezno aplikacijo

[19].

Slika 3.4: Postopek avtomatske inicializacije aplikacije

3.9.2 ngModel

V poglavju 3.2 smo opisali dvosmerno povezovanje podatkov. Direktiva »ngModel« nam

omogoča prirediti vrednost iz pogleda z atributom na dosegu (ang. scope), ki je nato

dosegljiv v krmilniku in obratno. Torej vsaka sprememba v modelu se preslika v pogled.


»ngModel« se veže oziroma uporablja v kombinaciji z obrazci (»input«, »select«,

»textarea«). Direktiva poleg tega, da skrbi za preslikavo vrednosti iz modela v pogled in

obratno, še skrbi za naslednje stvari [20]:

- validacijo podatkov,

- beleženje stanja (ali so podatki spremenjeni, ali so podatki pristni)

- dodajanje razredov CSS glede na stanje:

»ng-valid« - podatki so pristni,

»ng-invalid« - podatki niso pristni,

»ng-dirty« - podatki so spremenjeni ,

»ng-pristine« - podatki niso spremenjeni.

3.9.3 ngRepeat

V praksi se dostikrat pojavi potreba, da moramo izpisati seznam podatkov, ki ima enako

strukturo, le da so podatki drugačni. »ngRepeat« je direktiva, ki nam pomaga pri generiranju

ponavljajočih se izpisov. Njena uporaba je preprosta, kajti sintaksa je podobna zanki »for

each« (slov. za vsak).

Primer kode 3.15: Direktiva »ngRepeat«

Direktivi podamo zapis v naslednji obliki: »b in a«. Kjer a predstavlja izraz ki se ovrednoti,

b predstavlja lokalno spremenljivko, v katero se preslika vsaka vrednost iz izraza a ter »in«,

ki je rezervirana beseda (Primer kode 3.15). »ngRepeat« še ima stranski učinek, da izpostavi

naslednje spremenljivke, ki nam pridejo prav, pri določanju trenutne pozicije v seznamu

[21]:

<div ng-init="uporabniki=['Rene', 'Miha', 'Juliana']">

<ul>

<li ng-repeat="uporabnik in uporabniki">

{{$index + '-' + uporabnik}}

</li>

</ul>

</div>


- »$index« – trenuten indeks [0, dolžina - 1],

- »$first« – če je trenuten element prvi v seznamu,

- »$middle« - če je trenuten element med prvim in zadnjim elementom v seznamu,

- »$last« - če je trenuten element zadnji v seznamu,

- »$even« - če je trenuten element na lihi poziciji v seznamu.

- »$odd« - če je trenuten element na sodo poziciji v seznamu.

3.9.4 ngShow, ngHide in ngIf

Pogosto se znajdemo v položaju, ko želimo del podatkov skriti pred uporabnikom. Na

primer, če ni izpolnil vseh potrebnih podatkov, mu ne prikažemo naslednjih korakov.

Za ta namen obstajajo direktive »ngShow«, »nhHide« in »ngIf« (Primer kode 3.16).

»ngShow« in »ngHide«, delujeta popolno enako, z razliko, da »ngShow« pri pozitivni

vrednosti prikaže podatke, pri negativni pa jih skrije. »ngHide« pa pri pozitivni vrednosti

skrije podatke, pri negativni pa prikaže. »ngShow« in »ngHide« skrivata podatke, v

nasprotju z »ngIf«, ki jih začasno odstrani iz konteksta [22][23][24].

Primer kode 3.16: Direktive »ngShow«, »ngHide«, »ngIf«

3.9.5 Ustvarjanje lastnih direktiv

Ker se direktive uporabljajo za manipuliranje elementov DOM, se bomo hitro srečali s

potrebo po lastni direktivi. Za preproste primere je ustvarjanje direktiv trivialno. Če

potrebujemo zahtevnejšo direktivo, pa postane njena implementacija kompleksna. Za primer

<div ng-init="veljavno=true">

<div ng-show="veljavno">Prikazano</div>

<div ng-hide="veljavno">Skrito</div>

<div ng-if="veljavno">Prikazano</div>

</div>


smo implementirali preprosto direktivo, ki ob prehodu kazalca miške, sproži sporočilo

(Primer kode 3.17).

Primer kode 3.17: Primer definicije direktive

Direktivo smo uporabili na gumbu. Ko se s miškinim kazalcem postavimo na gumb se nam

izpiše sporočilo »AngularJS« (Primer kode 3.18).

Direktivo smo poimenovali »msgMouseOver«, ime je zapisano v »CamelCase« formatu.

Pomembno je, da ime direktive pišemo v tem formatu, kajti Angular ima mehanizem za

prepoznavanje direktiv v šablonah. Da lahko prepozna direktive, jih more pretvoriti v

splošno obliko, ta proces se imenuje normalizacija. Normalizacija je potrebna, ker HTML

ne razlikuje med malimi in velikimi črkami. Proces normalizacije je sledeč:

1. Odstrani predpono »x-« in »data-« iz imena elementa ali atributa.

2. Pretvori ime, ki vsebuje naslednje zanke »:«, »-«, ali »_« v »camelCase« format.

V našem primeru to pomeni, da se v šabloni lahko sklicujemo na direktivo

»msgMouseOver« po naslednjih imenih:

- »data-msg:mouse:over«,

- »data-msg-mouse-over«,

- »x-msg:mouse:over«,

- »x-msg-mouse-over«,

- »msg:mouse:over«,

- »msg-mouse-over«.

angular.module('mojaAplikacija').directive('msgMouseOver', function(){

return {

scope: false,

restrict: 'A',

link: function postLink(scope, element, attrs){

element.on('mouseover', function(event){

alert(attrs.msgMouseOver);

});

}

};

});


Kot vidimo se lahko na direktivo sklicujemo na 6 različnih načinov. Čeprav imamo na

razpolago 6 načinov je priporočeno, da uporabljamo le naslednja dva načina:

- »msg-mouse-over«,

- »data-msg-mouse-over«.

»data-« je predpona s pomočjo katere lahko dodamo lastne atribute v HTML in še zmeraj

ostanemo skladni s HTML standardi [18].

Primer kode 3.18: Primer uporabe lastne direktive

<div>

<button msg-mouse-over="AngularJS">Postavi se na mene!</button>

</div>


4 APLIKACIJA VREMENSKA NAPOVED

Najlažji način, da se naučiš in preučiš ogrodje je, da implementiraš aplikacijo z ogrodjem,

ki ga preučuješ. Za ta namen smo implementirali aplikacijo, ki nam omogoča pregled

vremenske napovedi. Uporabili smo zastonjsko storitev, preko katere dostopamo do

potrebnih podatkov o vremenu.

Ko zaženemo aplikacijo v brskalniku, se nam pojavi domača stran (Slika 4.1), ki prikazuje

našo trenutno lokacijo na zemljevidu in trenutno vremensko napoved za našo lokacijo. Med

te podatke spadajo trenutna temperatura, pritisk, vlažnost, minimalna in maksimalna

temperatura. Na dnu strani se prikaže tudi napoved vremena za naslednjih sedem dni.

Trenutno lokacijo je mogoče dodati med priljubljene lokacije ali pogledati še dodatne

podrobnosti o vremenu. Trenutna lokacija je pridobljena s pomočjo lokacijske storitve v

HTML5. Uporabnik mora ob prvem obisku strani dovoliti uporabo lokacijske storitve [25].

Slika 4.1: Domača stran aplikacije Vremenska napoved


Na vrhu strani se nahaja navigacijski meni, s katerim se premikamo po straneh. V

navigacijskem meniju so poti do domače strani, strani na kateri iščemo lokacije in

priljubljene lokacije ter možnost preklopa med stopinjami Celzija in Fahrenheita. Na dnu

strani se nahaja noga, v kateri je mogoče spreminjati teme oziroma izgled strani. Možno je

izbirati med osmimi različnimi temami. Tema se posodobi še v istem trenutku in ni potrebno

ponovno naložiti celotne strani (Slika 4.2). Naš izbor teme se shrani v lokalno shrambo

brskalnika. Lokalna shramba je storitev HTML5, ki nam omogoča trajno hranjenje podatkov

v brskalniku [26].

Slika 4.2: Domača stran aplikacije po spremenjeni temi

Ob kliku podrobnosti se nam odpre nova stran s podrobnostmi o vremenu (Slika 4.3). Na tej

strani se nam prikažejo podatki o trenutni temperaturi, vlažnosti zraka, pritisk, minimalna in

maksimalna temperatura. Izriše se nam tudi interaktiven graf, ki ponazarja podatke o

temperaturi, pritisku, vlažnosti in količini padavin za šest dni. Na spodnjem delu strani je

tabela, ki je v strnjeni obliki. Ob kliku na glavo tabele se tabela razpre in prikaže napoved

vremena za šestnajst dni (Slika 4.4). Podatki, ki so prikazani v tabeli so: temperatura zjutraj,

čez dan in zvečer ter vlažnost, hitrost vetra in padavine.


Slika 4.3: Stran s podrobnostmi o vremenski napovedi in graf

Slika 4.4: Stran s šestnajst dnevno vremensko napovedjo


Na strani s podrobnostmi imamo tudi gumb priljubljeni, ki nam omogoča dodajanje lokacije

med naše priljubljene lokacije (Slika 4.5), kar nam omogoča hiter dostop do vremenskih

napovedi za shranjene lokacije. Priljubljene lokacije se shranijo v lokalno shrambo

brskalnika.

Slika 4.5: Stran s priljubljenimi lokacijami

Aplikacija ponuja iskanje po lokacija (Slika 4.6). Za rezultate iskanja lahko pogledamo

podrobnosti ali pa jih dodamo med priljubljene lokacije. Podatki ki se nam pokažejo pri

iskanju so trenutna temperatura zraka, mesto, kratica države in ikona, ki simbolizira trenutno

vremensko stanje.


Slika 4.6: Stran na kateri je mogoče iskati lokacije


5 SKLEP

V sklopu diplomskega dela smo predstavili nov koncept spletnih aplikacij SPA ter ogrodje,

ki je ta koncept sprejelo, AngularJS. V teoretičnem delu smo predstavili razlike med SPA in

med klasičnim načinom implementacije spletnih aplikacij. Poudarek diplomskega dela smo

namenili predstavitvi ogrodja AngularJS, saj ogrodje zaradi svojih komponent bistveno

pripomore k izgradnji to vrstnih spletnih aplikacij. Zaradi novosti tehnologije in

kompleksnosti ogrodja smo imeli težave pri sami implementaciji končne aplikacije, saj

ogrodje uvaja zelo veliko novih konceptov razvijanja spletnih aplikacij. Še posebej težko je

implementirati kompleksnejše direktive, saj je veliko načinov, kako se lahko same

implementacije lotimo. Prav tako je vmesnik za uporabo direktiv zelo kompleksen.

V sklopu praktičnega dela smo implementirali aplikacijo za pregled napovedi vremena.

Rešitev, ki smo jo implementirali predstavlja vse bistvene koncepte SPA aplikacij in

funkcionalnosti, ki jih ogrodje ponuja.

AngularJS je ogrodje z nenavadno učno krivuljo. Ko mislimo, da smo spoznali ključne

koncepte ogrodja ugotovimo, da stvari niso tako trivialne. V večini ogrodij spoznamo osnove

in nato samo nadgrajujemo svoje znanje. Pri AngularJS pa temu ni tako, saj ima veliko

različnih konceptov, ki se razlikujejo glede na njihovo uporabo. Na srečo nam je na voljo

AngularJS skupnost, ki nam lahko pomaga pri vsakem koraku učenja ter uradna

dokumentacija, ki je vsak dan boljša. Res, da je AngularJS kompleksno ogrodje, v katerega

je na začetku treba vložiti precejšen trud in čas, da ga spoznamo, a ko ga spoznamo, je razvoj

zabaven in produktivnost naraste. AngularJS ima s primerjavo DurandalJS bolj natančno

določeno, kako bi se naj stvari implementirale. Dokumentacija postaja boljša in boljša ter

vedno več razvijalcev se zanima za AngularJS.

Naše mnenje je, da je AngularJS izvrstno ogrodje, ki ima velik potencial za manjše projekte

kot tudi za velike poslovne (angl. enterprise) projekte. S svojo modularno zgradbo je

primeren za razvoj v velikih skupinah.


VIRI IN LITERATURA

[1] D. Raggett, J. Lam, I. Alexander, in M. Kmiec, „Raggett on HTML 4“, 1998. [Na

spletu]. http://www.w3.org/People/Raggett/book4/ch02.html. [Dostopano: 10-sep-

2014].

[2] „Single-page application“. [Na spletu]. http://en.wikipedia.org/wiki/Single-

page_application. [Dostopano: 08-jul-2014].

[3] „AngularJS“. [Na spletu]. http://en.wikipedia.org/wiki/AngularJS.

[4] „Single-page Interface and AJAX Patterns“. [Na spletu].

http://msdn.microsoft.com/en-us/magazine/cc507641.aspx. [Dostopano: 14-sep-

2014].

[5] J. Papa, „SPA and the Single Page Myth“. [Na spletu].

http://www.johnpapa.net/pageinspa/. [Dostopano: 05-avg-2014].

[6] J. Maria Arranz Santamaria, „The Single Page Interface Manifesto“. [Na spletu].

http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php. [Dostopano: 25-jul-

2014].

[7] B. Green in S. Sesbadri, AngularJS.

[8] AngularJS, „Developer Guide: Data Binding“. [Na

spletu].https://code.angularjs.org/1.2.20/docs/guide/databinding. [Dostopano: 01-

sep-2014].

[9] P. Kozlowski in P. B. Darwin, Mastering Web Application Development with

AngularJS. .

[10] AngularJS, „Developer Guide: Modules“. [Na

spletu].https://code.angularjs.org/1.2.20/docs/guide/module. [Dostopano: 15-sep-

2014].

[11] A. Lerner, ng-book. .

[12] AngularJS, „Developer Guide: Controllers“. [Na

spletu].https://code.angularjs.org/1.2.20/docs/guide/controller. [Dostopano: 14-sep-

2014].


[13] „Minification (programming) - Wikipedia, the free encyclopedia“. [Na spletu].

http://en.wikipedia.org/wiki/Minification_(programming). [Dostopano: 15-sep-

2014].

[14] AngularJS, „Developer Guide: Providers“. [Na

spletu].https://code.angularjs.org/1.2.20/docs/guide/providers. [Dostopano: 15-sep-

2014].

[15] AngularJS, „Developer Guide: Filters“.

[Naspletu].https://code.angularjs.org/1.2.20/docs/guide/filter. [Dostopano: 14-sep-

2014].

[16] AngularJS, „Developer Guide: HTML Compiler“. [Na spletu].

https://code.angularjs.org/1.2.20/docs/guide/compiler. [Dostopano: 14-sep-2014].

[17] AngularJS, „API: $compile“. [Na spletu].

https://code.angularjs.org/1.2.20/docs/api/ng/service/$compile. [Dostopano: 01-sep-

2014].

[18] AngularJS, „Developer Guide: Directives“. [Na spletu].

https://code.angularjs.org/1.2.20/docs/guide/directive. [Dostopano: 14-sep-2014].

[19] AngularJS, „Developer Guide: Bootstrap“. [Na spletu].

https://code.angularjs.org/1.2.23/docs/guide/bootstrap. [Dostopano: 13-okt-2014].

[20] AngularJS, „API: ngModel“. [Na spletu].

https://code.angularjs.org/1.2.23/docs/api/ng/directive/ngModel. [Dostopano: 13-

okt-2014].

[21] AngularJS, „API: ngRepeat“. [Na spletu].

https://code.angularjs.org/1.2.23/docs/api/ng/directive/ngRepeat. [Dostopano: 13-

okt-2014].

[22] AngularJS, „API: ngShow“. [Na spletu].

https://code.angularjs.org/1.2.23/docs/api/ng/directive/ngShow. [Dostopano: 13-okt-

2014].

[23] AngularJS, „API: ngHide“. [Na spletu].

https://code.angularjs.org/1.2.23/docs/api/ng/directive/ngHide. [Dostopano: 13-okt-

2014].

[24] AngularJS, „API: ngIf“. [Na spletu].

https://code.angularjs.org/1.2.23/docs/api/ng/directive/ngIf. [Dostopano: 13-okt-

2014].

[25] W3schools, „HTML5 Geolocation“. [Na spletu].

http://www.w3schools.com/html/html5_geolocation.asp. [Dostopano: 14-sep-2014].


[26] W3schools, „HTML5 Web Storage“. [Na spletu].

http://www.w3schools.com/html/html5_webstorage.asp. [Dostopano: 14-sep-2014].




Documents

RAZVOJ SPLETNE APLIKACIJE SPA Z OGRODJEM ANGULARJS · Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 5 3 ANGULARJS AngularJs je trenutno eno izmed najboljših ogrodij SPA