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.
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 2
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.
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 3
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].
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 4
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].
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 5
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>
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 6
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
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 7
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].
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 8
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');
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 9
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;
});
}
);
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 10
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>
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 11
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
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 12
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();
}
]);
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 13
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.");
}
}
};
}
]);
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 14
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(){
return prijavljenUporabnik;
};
this.setUporabnik = function(uporabnik){
if(angular.isDefined(uporabnik)){
prijavljenUporabnik = uporabnik;
}else{
throw new Error("Uporabnik ni definiran.");
}
};
}
]);
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 15
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){
if(angular.isDefined(uporabnik)){
prijavljenUporabnik = uporabnik;
}else{
throw new Error("Uporabnik ni
definiran.");
}
};
this.$get = [
function(){
return {
getUporabnik: function(){
return prijavljenUporabnik;
}
};
}
];
}
);
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 16
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;
}
});
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 17
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>
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 18
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.
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 19
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.
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 20
»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>
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 21
- »$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>
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 22
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);
});
}
};
});
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 23
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>
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 24
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
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 25
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.
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 26
Slika 4.3: Stran s podrobnostmi o vremenski napovedi in graf
Slika 4.4: Stran s šestnajst dnevno vremensko napovedjo
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 27
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.
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 28
Slika 4.6: Stran na kateri je mogoče iskati lokacije
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 29
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.
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 30
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].
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 31
[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].
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 32
[26] W3schools, „HTML5 Web Storage“. [Na spletu].
http://www.w3schools.com/html/html5_webstorage.asp. [Dostopano: 14-sep-2014].
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 33
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 34
Razvoj spletne aplikacije SPA z ogrodjem AngularJS Stran 35