PRISTOP SPA ZA IZGRADNJO SPLETNIH STRANIKey Words: SPA, Microsoft, JavaScript, AngularJS,...

Sebastijan Štefanič

PRISTOP SPA ZA IZGRADNJO SPLETNIH

STRANI

Diplomsko delo

Maribor, avgust 2014

PRISTOP SPA ZA IZGRADNJO SPLETNIH

STRANI

Diplomsko delo

Študent: Sebastijan Štefanič

Študijski program: Visokoškolski strokovni študijski program prve

stopnje Informatika in tehnologije komuniciranja

Smer: Razvoj informacijskih sistemov

Mentor: Viš. pred. mag. Boštjan Kežmah

Somentor: Asist. Mitja Krajnc

Lektorica: mag. Nataša Koražija

Pristop SPA za izgradnjo spletnih strani

i


ii

ZAHVALA

Zahvaljujem se mentorju in somentorju

za pomoč in vodenje pri pisanju

diplomskega dela ter za njihovo

strokovno svetovanje.

Posebna zahvala velja staršem, ki so mi

omogočili študij.


iii


Ključne besede: SPA, Microsoft, JavaScript, AngularJS, Backbone.js, Ember.js, MVC,

MVVM

UDK: 004.774.6(043.2)

Povzetek

V diplomskem delu je raziskan postopek razvoja SPA aplikacij (enostranskih spletnih

aplikacij). Razloženi so koncepti, ki jih je treba razumeti, ter ozadje in osnovni pojmi

razvoja spletnih strani. Na začetku se osredotočamo na sam pomen besede »SPA« ter na

arhitekturo SPA aplikacij. Raziskane so ene od najbolj aktualnih ogrodjih in knjižnic, ki se

uporabljajo za razvoj SPA aplikacij, na koncu pa se nahaja še kratek primer, pri katerem

se je uporabila AngularJS knjižnica.


iv

SPA approach to building web sites

Key Words: SPA, Microsoft, JavaScript, AngularJS, Backbone.js, Ember.js, MVC,

MVVM

UDK: 004.774.6(043.2)

Abstract

The thesis studied the process of developing SPA (Single Page Application) applications.

The concepts that need to be understood, background and basic concepts of web are

explained. At the beginning, we focus on the actual meaning of the word »SPA«, as well as

the architecture of SPA applications. One of the most current frameworks and libraries

that are used fort he development of SPA applications are researched and at the end of the

thesis is a brief example in which we use AngularJS library to create small SPA

application.


v

KAZALO VSEBINE

1. UVOD ................................................................................................................................. 1

1.1. Opredelitev problema .................................................................................................. 1

1.2. Predpostavke in omejitve ............................................................................................. 1

1.3. Kompozicija dela ......................................................................................................... 1

2. OZADJE IN OSNOVNI POJMI ......................................................................................... 3

2.1. Kaj je spletna stran? ..................................................................................................... 3

2.2. Kaj je spletno mesto? ................................................................................................... 3

2.3. Označevalni jezik HTML5 .......................................................................................... 4

2.4. Stilske predloge CSS ................................................................................................... 4

2.5. Skriptni jezik JavaScript .............................................................................................. 5

2.6. Format za izmenjavo podatkov JSON ......................................................................... 6

2.7. Arhitektura REST ........................................................................................................ 7

2.8. Knjižnica jQuery .......................................................................................................... 7

2.9. Vzorec MVC ................................................................................................................ 7

2.10. Microsoftove tehnologije za izgradnjo spletnih strani ............................................. 9

3. Enostranske spletne aplikacije .......................................................................................... 14

3.1. Kaj je SPA? ................................................................................................................ 14

3.2. Arhitektura SPA ......................................................................................................... 15

3.3. Podatkovna raven SPA aplikacije .............................................................................. 17

3.4. Logična raven SPA aplikacije .................................................................................... 17

3.5. Predstavitvena raven SPA aplikacije ......................................................................... 17

4. AKTUALNE KNJIŽNICE IN OGRODJA ....................................................................... 18

4.1. Knjižnica Backbone.js ............................................................................................... 18

4.2. Knjižnica Ember.js ..................................................................................................... 20

4.3. Knjižnica AngularJS .................................................................................................. 23

4.4. Ostale knjižnice in ogrodja ........................................................................................ 27

5. KONKRETNI PRIMER .................................................................................................... 29

5.1. Opis aplikacije ........................................................................................................... 29

5.2. Struktura projekta ...................................................................................................... 29

5.3. Podatkovna in logična raven aplikacij ....................................................................... 32

5.4. Predstavitvena raven aplikacije (SPA) ...................................................................... 33

6. ZAKLJUČEK .................................................................................................................... 47


vi

7. VIRI, LITERATURA ....................................................................................................... 48

KAZALO SLIK

Slika 1: Več spletnih strani tvori spletno mesto ......................................................................... 4

Slika 2: Gradniki MVC vzorca in komunikacija med njimi ...................................................... 8

Slika 3: MVVM vzorec .............................................................................................................. 9

Slika 4: .NET ogrodje ............................................................................................................... 10

Slika 5: Kategorizacija ASP.NET ogrodja ............................................................................... 11

Slika 6: Primer vnosa C# kode neposredno v datoteko s HTML kodo .................................... 11

Slika 7: Primer Razor sintakse ................................................................................................. 12

Slika 8: Arhitektura SPA aplikacije ......................................................................................... 16

Slika 9: Primer Backbone.js modela ........................................................................................ 18

Slika 10: Primer uporabe Backbone.View modula .................................................................. 19

Slika 11: Primer dogodka in njegovega proženja ..................................................................... 20

Slika 12: Interakcija med Ember.js koncepti ........................................................................... 21

Slika 13: Primer Ember.js predloge ......................................................................................... 21

Slika 14: Primer preprostega Ember.js usmerjevalnika ........................................................... 22

Slika 15: Primer Ember.js modela ............................................................................................ 22

Slika 16: Primer preprostega AngularJS modula ..................................................................... 24

Slika 17: Primer preproste AngularJS direktive ....................................................................... 25

Slika 18: Primer uporabe AngularJS direktive ......................................................................... 25

Slika 19: Primer AngularJS krmilnika ..................................................................................... 26

Slika 20: Primer uporabe AngularJS krmilnika in lastnosti »$scope« objekta v HTML kodi. 26

Slika 21: Primer AngularJS storitve, tovarne in ponudnika ..................................................... 27

Slika 22: Struktura projekta ...................................................................................................... 30

Slika 23: Aplikacijske nastavitve v »Web.config« datoteki. »webpages:Enabled«

spremenjeno iz »false« na »true«. ............................................................................................ 31

Slika 24: Metoda za tako imenovano »Zvijanje« JavaScript datotek. ..................................... 31

Slika 25: Model opravila .......................................................................................................... 32

Slika 26: Pogovorno okno za izdelavo Web API krmilnika .................................................... 33

Slika 27: »Index.cshtml« datoteka ........................................................................................... 34

Slika 28: »app« modul- Prvi del ............................................................................................... 35


vii

Slika 29: »app« modul- Drugi del ............................................................................................ 35

Slika 30: Definicija modula »services« in storitve »TodosService« ........................................ 37

Slika 31: »AuthService« storitev .............................................................................................. 37

Slika 32: »UrlService« storitev................................................................................................. 38

Slika 33: Krmilnik za prijavo ................................................................................................... 38

Slika 34: Krmilnik za odjavo .................................................................................................... 39

Slika 35: Pogled za delo z opravili - Prvi del ........................................................................... 39

Slika 36: Pogled za delo z opravili - Drugi del......................................................................... 40

Slika 37: Pogled za delo z opravili - Tretji del ......................................................................... 40

Slika 38: Definiranje modula »TodoListCtrl« in metoda za pridobivanje vseh opravil iz

strežnika .................................................................................................................................... 42

Slika 39: »$watchCollection« metoda ...................................................................................... 42

Slika 40: »addTodo« metoda .................................................................................................... 43

Slika 41: »delete« metoda......................................................................................................... 43

Slika 42: »deleteAll« metoda ................................................................................................... 43

Slika 43: »deleteCompleted« metoda ....................................................................................... 44

Slika 44: »completeAll« metoda .............................................................................................. 44

Slika 45: »update« metoda ....................................................................................................... 45

Slika 46: »steviloPreostalih« in »steviloOpravljenih« metode................................................. 45

Slika 47: Metode in lastnost za filtriranje opravil .................................................................... 46

KAZALO TABEL

Tablica 1: Nekatere prednosti in slabosti JavaScript jezika ....................................................... 6

Tablica 2: Ostala ogrodja in knjižnice za izdelavo SPA aplikacij ............................................ 28

SEZNAM UPORABLJENIH KRATIC

ADO.NET – ActiveX Data Objects .NET

API – Application Programming Interface

ASP – Active Server Pages

CGI – Common Gateway Interface

CLR – Common Language Runtime

CORBA – Common Object Request Broker Architecture


viii

CSS – Cascading Style Sheet

DOM – Document Object Model

DPP – Distributed Data Protocol

FCL – Framework Class Library

HMVC – Hierarchical Model–View–Controlle

HTML – HyperText Markup Language

HTTP – HyperText Transfer Protocol

JSON – JavaScript Object Notation

JSP – JavaServer Pages

LINQ – Language-Integrated Query

MVA – Model-View-Adapter

MVC – Model-View-Controller

MVP – Model-View-Presenter

MVVM – Model-View-ViewModel

REST – Representational State Transfer

SOAP – Simple Object Access Protocol

SPA – Single Page Application

SQL – Structured Query Language

URL – Uniform Resource Locator

XHTML – Extensible HyperText Markup Language

XML – Extensible Markup Language


1

1. UVOD

1.1. Opredelitev problema

S hitrim razvojem računalniških tehnologij in strojne opreme se povečujejo tudi

pričakovanja uporabnikov. S pojavom dinamičnih spletnih strani je uporaba klasičnih

statičnih spletnih strani postala zastarela. Uporabniki pričakujejo čim hitrejše pridobivanje

informacij in opravljanje opravil preko spleta. Danes je prišlo do še ene težave, in sicer, da

spletni brskalniki na osebnih računalnikih več niso edini odjemalci. Pojavile so se mobilne

naprave, tablice in računalniki v različnih hišnih napravah, s pomočjo katerih je

omogočeno brskanje spleta na enak način, kot je to na osebnih računalnikih. S tem je prišlo

do potrebe zmanjševanja prometa med strežniki in odjemalci. Pojavile so se enostranske

spletne aplikacije (angleško Single Page Application) (SPA). SPA aplikacije so aplikacije,

pri katerih se večina spletnega mesta naloži na odjemalca pri njegovem prvem obisku. Ko

uporabnik zahteva dodatne podatke, se mu oni pošiljajo v čim manjši obliki, tako da se

promet med odjemalcem in strežnikom precej zmanjša. Poleg boljše ekonomičnosti pa

SPA aplikacije nudijo uporabnikom tudi boljšo izkušnjo. S pojavom SPA aplikacij je izraz

»dinamični splet« dobil novi pomen, saj se šele zdaj samo podatki res dinamično

spreminjajo.

1.2. Predpostavke in omejitve

Za razlaganje strežniške strani SPA aplikacije se bomo omejili na Microsoftove

tehnologije. Vse primere bomo izdelali s pomočjo Visual Studio 2013 integriranega

razvojnega okolja, na strežniški strani pa bomo uporabili C# programski jezik. Pri

razlaganju konkretnega primera se bomo osredotočili predvsem za odjemalsko stran

aplikacije, ki jo bomo izdelali s pomočjo AngularJS knjižnice.

1.3. Kompozicija dela

Diplomsko delo je sestavljeno iz šestih poglavjih. Prvo poglavje je uvod, v katerem se

nahaja opredelili problematike, ki jo diplomsko delo rešuje, določene so osnovne

predpostavke in omejitve, na koncu poglavja pa je opisana kompozicija dela.


2

V drugem poglavju je razloženo ozadje razvoja spletnih strani. V tem poglavju so razloženi

osnovni pojmi, za katere se od bralca pričakuje, da jih v do neke mere že pozna. Razložena

je razlika med spletnimi strani in spletnimi mesti, ter izrazi, kot so: HTML5, CSS,

JavaScript ter MVC. Na koncu poglavja se nahaja še kratek pregled Microsoftovih

pristopov izgradnje spletnih strani.

Nato sledi poglavje o SPA aplikacijah. V poglavju je na začetku razložen pomen izraza

»enostranske spletne aplikacije«, nato pa je razložena arhitektura takih aplikacij, ki je

zgrajena iz večjega števila ravni. Vsaka raven je raziskana posebej.

Naslednje poglavje je poglavje o aktualnih ogrodjih, knjižnicah in tehnologijah, ki se

uporabljajo za razvoj SPA aplikacij. Osredotočili se bomo predvsem na tri, in sicer na

Backbone.js, Ember.js in AngularJS. Vsaka tehnologija je posebej na kratko raziskana v

svojem podpoglavju. V zadnjem podpoglavju pa so naštete in na kratko opisane še

nekatere od ostalih tehnologij za razvoj SPA aplikacij.

Predzadnje poglavje je poglavje, kjer je analiziran in razložen postopek izgradnje enega

preprostega primera s pomočjo AngularJS knjižnice in Microsoft ASP.NET MVC

tehnologije v ozadju.

Zadnje poglavje je zaključek in sklep diplomskega dela. V tem poglavju se nahaja

povzetek pridobljenih rezultatov.

Na koncu diplomskega dela se nahajajo še viri in literatura, ki je bila v pomoč pri njegovi

izdelavi naloge.


3

2. OZADJE IN OSNOVNI POJMI

2.1. Kaj je spletna stran?

Spletna stran je dokument, najpogosteje napisan v HTML jeziku, ki je dostopen prek

interneta ali drugega omrežja z uporabo brskalnika. Spletna stran je naložena v brskalnik z

vnosom URL naslova in lahko vsebuje besedilo, grafiko in povezave do drugih spletnih

strani in datotek. Prvo spletno stran je izdelal Tim Barners-Lee v CERN-u leta 1991. [6]

Spletne strani so gradniki svetovnega spleta (World Wide Web). Spletne strani so lahko

statične ali dinamične. Statične strani se prenesejo na odjemalca točno take, kot so

shranjene na strežniku in prikazujejo enako vsebino vsem uporabnikom v vsakem

kontekstu. Njihovo vsebino je možno spremeniti samo ročno na strežniku. Vsebina

dinamičnih strani pa je odvisna od konteksta in uporabnika, ki dostopa do nje. Te strani so

običajno napisane v skriptnih jezikih, kot so PHP, Perl, ASP ali JSP. Skripte na straneh

zaganjajo funkcije na strežniku, ki vračajo stvari, kot so podatki iz podatkovne baze, slike

ali delčki HTML kode. Vsa ta vsebina je vrnjena v obliki HTML kode, ki jo nato brskalnik

prevede in prikaže.

2.2. Kaj je spletno mesto?

Spletno mesto je niz sorodnih spletnih strani, ki se običajno nahajajo na eni spletni domeni

(Slika 1). Spletno mesto se nahaja običajno na vsaj enem spletnem strežniku in je dostopno

preko omrežja, kot je internet ali zasebnega lokalnega omrežja preko URL-ja. Vsa javno

dostopna spletna mesta so gradniki svetovnega spleta. Spletna mesta imajo veliko funkcij

in se lahko uporabljajo v različne namene. Obstajajo osebna spletna mesta, komercialna

spletna mesta, vladina spletna mesta ter spletna mesta neprofitnih organizacij. Spletna

mesta so lahko delo posameznika, podjetja ali neke druge organizacije in so običajno

namenjena za določeno funkcijo. Katero koli spletno mesto lahko vsebuje hiperpovezave

do katerega koli drugega spletnega mesta. [31]


4

Slika 1: Več spletnih strani tvori spletno mesto

2.3. Označevalni jezik HTML5

HTML5 je najnovejša verzija HTML (angleško Hyper Text Markup Language) jezika, ki

je jezik za označevanje in opisovanje spletnih strani. Ko pravimo, da je jezik

»označevalni«, to pomeni, da je sestavljen iz nabora označevalnih značk, ki opisujejo

vsebino spletnega dokumenta (spletne strani). [16] Prejšnja različica HTML-ja, HTML

4.01, je prišla na trg leta 1999. Od takrat se je svetovni splet bistveno spremenil. HTML5

je bil zasnovan kot zamenjava za HTML4, XHTML in HTML DOM ravni 4. Bil je

posebno zasnovan za zagotavljanje bogatih vsebin, brez potrebe po dodatnih vtičnikih.

Sedanja različica prinaša nove gradnike, kot so animacije in grafika ter glasba in filmi in se

lahko uporablja tudi za izgradnjo zapletenih spletnih aplikacij. HTML5 je tudi podprt na

večjem številu platform tako, da deluje na računalnikih, tabletah, pametnih telefonih in

pametnih televizorjih. [17]

2.4. Stilske predloge CSS

CSS (angleško Cascading Style Sheet) se je začel razvijati leta 1997 kot orodje, ki

omogoča spletnim razvijalcem definiranje izgleda in občutka njihovih spletnih strani.

Namen CSS-a je ločevanje vsebine od izgleda, tako da lahko HTML opravlja več

funkcionalnosti, za katere je bil prvotno namenjen – označevanje vsebine, brez skrbi o


5

postavitvi elementov in njihovem izgledu. CSS ima preprosto sintakso in uporablja veliko

angleških ključnih besed za navajanje imen različnih lastnosti. CSS dokument je sestavljen

iz niza pravil. [23] Vsako pravilo ali nabor pravil je sestavljeno iz enega ali več selektorjev

in deklaracijskega bloka. S selektorji označujemo dele HTML kode, za katere se bodo v

deklaracijskem bloku nahajale lastnosti.

2.5. Skriptni jezik JavaScript

JavaScript je dinamičen računalniški programski jezik. Najpogosteje se uporablja za

pisanje odjemalskih skript, ki se zaganjajo v spletnem brskalniku in se uporabljajo za

interakcijo z uporabnikom, nadzor brskalnika, pošiljanje asinhronih sporočil na strežnik ter

spreminjanje vsebin dokumenta, ki se prikazuje. Uporablja se tudi za programiranje

omrežij na strežniški strani, v razvoju računalniških iger in za ustvarjanje namiznih in

mobilnih aplikacij. [25]

Uporaba JavaScript jezika na strani odjemalca je najbolj pogosta. JavaScript skripta mora

biti vključena v HTML dokument, ali se on mora sklicevati nanjo, da bi brskalnik kodo, ki

je zapisana v njej, izvedel. Ko na spletno stran, dodamo JavaScript kodo, HTML stran več

ni statična. Ona vsebuje programe, ki komunicirajo z uporabnikom, nadzorujejo brskalnik

in dinamično ustvarjajo HTML kodo. JavaScript mehanizmi vsebujejo mnoge prednosti

pred tradicionalnimi CGI odjemalskimi skriptami. Na primer, z JavaScript kodo lahko

preverjamo, če je uporabnik vnesel pravilen elektronski naslov v vnosno polje. JavaScript

koda se izvede, ko uporabnik predloži (angleško submit) obrazec. Samo če so vsa vnosna

polja pravilno izpolnjena, bo obrazec poslan na strežnik. JavaScript koda se lahko

uporablja tudi za opazovanje uporabnikovih akcij ter proženje določenih delov kode, če

uporabnik sproži določene dogodke, kot so klik gumba miške ali tipke na tipkovnici. Kot

vsak programski jezik ima tudi JavaScript ima mnoge prednosti in slabosti. (Error!

Reference source not found.) [15]

Dobre karakteristike Slabe karakteristike

Manj interakcije s strežnikom – Lahko

preverjamo uporabnikov vnos, preden

podatke pošljemo na strežnik, s tem pa

dobimo manj obremenitve na strežniku.

Z JavaScript kodo ni možno branje ali

pisanje v datoteke, ki so na odjemalcu. To je

onemogočeno zaradi varnostnih razlogov.


6

Takojšnja povratna informacija

uporabnikom – uporabniki ne morajo čakati

na osvežitev strani, da bi videli, ali so kaj

napačno vnesli.

JavaScript nima večnitne in večprocesorske

zmogljivosti.

Povečanje interaktivnosti vmesnikov –

Lahko ustvarimo vmesnike, ki se odzivajo,

ko uporabnik na primer pride z miško na

neki gradnik, ali pritisne določen gumb na

tipkovnici.

Ne obstaja podpora za izgradnjo sistemskih

mrežnih aplikacij z uporabo JavaScript

jezika.

Bogatejši vmesniki – JavaScript se lahko

uporablja za dodajanje različnih »drag-and-

drop« komponent ter drsnikov, ki dodajajo

bogatejši uporabniški vmesnik za

obiskovalce spletne strani.

Uporabnik lahko JavaScript popolnoma

izklopi, s tem pa lahko pride tudi do

varnostnih težav.

Tabela 1: Nekatere prednosti in slabosti JavaScript jezika

JavaScript je prvotno razvijal Brendan Eich, ko je delal za Netscape Communication

Corporation. Čeprav se je razvijal pod imenom »Mocha«, je jeziku uradno bilo ime

»LiveScript«, ko se je prvič pojavil v beta različici v Netscape navigatorju 2.0 septembra

leta 1995, ampak se je preimenoval v JavaScript, ko je bil izdan za Netscape brskalnike

različice 2.0B3. [25] Do danes, po skoraj dvajsetih letih obstoja, je jezik postal en od

najuporabnejših programskih jezikov na svetu in brez njega ne bi svetovni splet izgledal

kot izgleda danes. S časom so se pojavile številne dodatne knjižice, ki jih razvijajo

komercialne korporacije ali pa posamezniki, ki olajšujejo njegovo uporabo in mu dodajajo

številne dodatne zmožnosti. Razvoj SPA aplikacij bi bil zelo težek, če ne celo nemogoč

brez JavaScript jezika.

2.6. Format za izmenjavo podatkov JSON

JavaScript Object Notation (JSON) je odprtokodni standard, ki uporablja človeku berljiv

format teksta za prenos podatkovnih objektov, ki so sestavljeni iz atributov in vrednosti.

Uporablja se predvsem za prenos podatkov med strežnikom in spletno aplikacijo kot

alternativa XML-ja. [27]


7

2.7. Arhitektura REST

Representation State Transfer (REST) temelji na odjemalec − strežnik komunikacijskih

protokolih brez stanja. Protokol, ki se uporablja, je v skoraj vseh primerih HTTP. REST je

arhitekturni stil za oblikovanje omrežnih aplikacij. Ideja je, da se namesto uporabe

zapletenih mehanizmov, kot so CORBA ali SOAP za povezovanje med stroji, uporabi

HTTP. V mnogih pogledih je možno na svetovni splet, ki temelji na HTTP-ju, gledati kot

REST arhitekturo. RESTful aplikacije uporabljajo HTTP zahteve za objavljanje podatkov

(angleško create/update), branje podatkov (poizvedbe) in brisanje le-teh. Tako REST

uporablja HTTP na vseh štirih CRUD (Create/Read/Update/Delete) operacijah. [11]

2.8. Knjižnica jQuery

jQuery je JavaScript knjižnica, ki ima namen poenostaviti pisanje HTML skript na

odjemalcu. Izdal jo je JohnResig januarja leta 2006. Trenutno jo razvija ekipa razvijalcev,

ki jo vodi Dave Methvin. S tem, da ga uporablja preko 60 % od 10-000 najbolj obiskanih

spletnih strani, je jQuery najbolj priljubljena JavaScript knjižnica v današnji uporabi.

Sintaksa jQueryja je zasnovana, da bi bila navigacija na dokumentih čim lažja za izbiranje

in označevanje DOM elementov, izdelavo animacij, odzivanje na dogodke ter razvoj Ajax

aplikacij. jQuery ponuja tudi zmožnost ustvarjanja vtičnikov. To omogoča razvijalcem

abstrakcijo nizkonivojskih interakcij in animacij ter naprednih efektov. [26] Modularni

pristop jQuery knjižnice omogoča ustvarjanje močnih dinamičnih spletnih strani in spletnih

aplikacij. Mnoge knjižnice za razvoj SPA aplikacij, ki jih bomo spoznali v naslednjih

poglavjih, so odvisne prav od jQuery knjižnice, ki se lahko šteje kod njihov prednik, saj je

razvoj SPA aplikacij možen tudi samo s pomočjo nje (čeprav je to zelo težko, prav v tem

druge knjižnice v veliki meri pomagajo).

2.9. Vzorec MVC

Model-pogled-krmilnik (angleško Model-View-Controller) je arhitekturni načrtovalski

vzorec, ki se uporablja za implementacijo uporabniških vmesnikov. S pomočjo vzorca se

aplikacija razdeli v tri medsebojno povezane dele in je močno sredstvo za ločevanje nalog

v aplikaciji. [28] Vzorec v svoji prvotni obliki ali pa kot eden od njegovih izpeljank se


8

uporablja v številnih ogrodjih in je danes en od principov, na katerih temeljijo številne

knjižnice za razvoj različnih tipov aplikacij. MVC deli aplikacijo v tri glavna dela:

Model – nabor razredov, ki opisujejo podatke, s katerimi delamo, kot tudi poslovna

pravila za spremembo in manipulacijo teh podatkov.

Pogled (angleško View) – definira, kako bo prikazan uporabniški vmesnik.

Krmilnik (angleško Controller) – množica razredov, ki skrbi za komunikacijo med

aplikacijo in uporabnikom, za tok aplikacije ter za logiko aplikacije.

MVC vzorec definira tudi komunikacijo med temi tremi deli (Slika 2). Krmilnik lahko

pošilja ukaze modelu za posodobitev stanja modela, lahko pa komunicira tudi s pogledom,

ki je povezan s tem modelom, in posodobi predstavitev prikazanih podatkov v pogledu na

podlagi modela. Model sporoča o svojem stanju poglede in krmilnike, ki so povezani z

njim. Ta sporočila omogočajo pogledom posodabljati svoje predstavitvene podatke ter

krmilniku spreminjanje nabora dovoljenih ali možnih ukazov. Pogled zahteva podatke od

modela, s katerim je povezan, da lahko generira izhodno predstavitev uporabniku. [28]

Slika 2: Gradniki MVC vzorca in komunikacija med njimi

MVC je pomemben načrtovalski vzorec v računalniški znanosti že mnoga leta. Prvotno

ime, »Thing-Model-View-Editor« iz leta 1979, je bilo kasneje poenostavljeno v »Model-

View-Controller«. [9] Do danes se je iz MVC vzorca razvilo že večje število njegovih

variant, kot so MVA (angleško Model-View-Adapter), HMVC (Hierarhični MVC), MVP

(angleško Model-View-Presenter) ter MVVM (angleško Model-View-ViewModel), ki se pri

ogrodjih za razvoj SPA aplikacij največ pojavlja.


9

MVVM (Slika 3) je načrtovalski vzorec, ki temelji na MVC vzorcu in se pred vsem

uporablja pri platformah za razvoj uporabniških vmesnikov, ki podpirajo programiranje z

dogodki. MVVM vzorec je bil zasnovan za podporo Microsoftovega Windows

Presentation Frameworka (WPF) in Silverlighta, ki so debitirali z .NET 3.0 ogrodjem 21.

novembra leta 2006. Sčasoma so se pojavile številne JavaScript implementacije vzorca, kot

so Knockout.js in Vue.js. Model in pogled sta pri MVVM vzorcu enaka kot pri MVC,

edino zadnja komponenta (krmilnik) je zamenjana z »ViewModel« komponento.

»ViewModel« je model pogleda, kar pomeni, da je abstrakcija pogleda in služi kot

posrednik med pogledom in modelom. Nanj lahko gledamo kot specializirani vidik, ki

spreminja podatke v modelu v podatke v pogledu ter posreduje ukaze iz pogleda modelu.

»ViewModel« izpostavlja javne lastnosti, ukaze in abstrakcije. V modelu je dejansko

stanje podatkov, in ta komponenta je običajno podatkovna baza, »ViewModel« pa podatke

iz modela spremeni v primerno obliko za prikaz in jih hrani v taki obliki, nato pa jih

posreduje pogledu, ki jih prikazuje. [29]

Slika 3: MVVM vzorec

2.10. Microsoftove tehnologije za izgradnjo spletnih strani


10

Skozi zgodovino je Microsoft razvil večje število ogrodij, predlog ter knjižnic, ki se

uporabljajo za razvoj spletnih projektov, kot so spletne strani in aplikacije. Tehnologije, ki

jih bomo pogledali, delujejo s pomočjo .NET ogrodja.

.NET ogrodje je programsko ogrodje, ki ga je razvil Microsoft in deluje predvsem na

Microsoft Windows operacijskih sistemih. Vsebuje veliko razredno knjižnico, znano kot

»Framework Class Library« (FCL), ter zagotavlja interoperabilnost večjega števila

programskih jezikov (vsak jezik lahko uporablja kodo, napisano v drugih jezikih).

Programi, napisani za .NET ogrodje, se izvajajo v programskem okolju, znanem kot

»Common Language Runtime« (CLR). FCL in CLR so sestavni deli .NET ogrodja (Slika

4). [18] Microsoft je .NET ogrodje izdal leta 2002, z njim pa tudi prvo verzijo ASP.NET

odprtokodne platforme, ki omogoča razvijalcem razvoj dinamičnih spletnih strani, spletnih

aplikacij in spletnih storitev ter je naslednik »Active Server Pages« (ASP) tehnologije. [21]

ASP.NET platforma podpira tri tehnologije, s katerimi je možen razvoj spletnih aplikacij:

ASP.NET Web Forms, ASP.NET Web Pages (ASP.NET Razor) in ASP.NET MVC (Slika

5).

Slika 4: .NET ogrodje


11

Slika 5: Kategorizacija ASP.NET ogrodja

ASP.NET Web Forms nam omogočajo ustvarjanje spletnih aplikacij na podoben način, kot

se ustvarjajo Windows Forms aplikacije. Na voljo nam je vmesnik z orodno vrstico z

naborom vseh možnih gradnikov spletne strani, iz katerih oblikujemo videz in razporeditev

njenih elementov. Za vsako stran se izdelata dve datoteki: datoteka z uporabniškim

vmesnikom ter datoteka s »kodo-zadaj« (angleško code-behind). Datoteka z uporabniškim

vmesnikom definira strukturo spletne strani, njen videz ter gradnike, ki se bodo na njej

nahajali. Ta datoteka ima končnico ».aspx«. V drugi datoteki pa je strežniška koda, ki

obravnava dogodke in medsebojno interakcijo med gradniki na strani (ta koda je lahko

vključena tudi v datoteki z uporabniškim vmesnikom, ampak je priporočeno da se loči). Ta

datoteka ima končnico povezano s programskim jezikom, bodisi aspx.cs za C# ali aspx.vb

za VB.NET. Strežniško kodo lahko pišemo tudi neposredno v datoteko z uporabniškim

vmesnikom, tako da jo vključimo s pomočjo »<%=« in »%>« simbolov, ampak je

priporočeno, da se ona loči (Slika 6).

Slika 6: Primer vnosa C# kode neposredno v datoteko s HTML kodo

Z ASP.NET Web Pages je Microsoft klasičnemu ASP.NET-u (Web Forms) dodal Razor.

Razor je predloga označevalne sintakse, ki omogoča lažje pisanje strežniške kode


12

neposredno na spletni strani. S tem se pridobi predvsem na hitrosti izdelave spletnih

aplikacij ter na manjši kompleksnosti takih projektov. Namesto uporabe ASP.NET ».aspx«

označevalne sintakse (<%= in %>) za označevanje bloka s kodo v Razorju označimo blok

kode z znakom @ in ga ne rabimo zapreti (Slika 7). [22]

Slika 7: Primer Razor sintakse

Tretja tehnologija je ASP.NET MVC, ki je Microsoftova implementacija MVC

načrtovalskega vzorca. Aplikacija je s tem razdeljena v tri dele: model, pogled in krmilnik.

V pogledih je še vedno možno uporabljati strežniško kodo, napisano v C# ali Visual Basic

jeziku.

Čeprav je datoteke spletnih aplikacij možno pisati s pomočjo popolnoma preprostih

urejevalnikov besedil, kot je Notepad, bodo primeri iz diplomskega dela izdelani s

pomočjo Microsoftovega Visual Studio razvojnega orodja.

V nadaljevanju so naštete in na kratko opisane še nekatere Microsoftove tehnologije, s

katerimi je, ko izdelujemo spletne aplikacije v ASP.NET platformi, srečanje skoraj

neizogibno.

ADO.NET (angleško ActiveX Data Objects .NET) je sestavni del .NET ogrodja, ki

omogoča dostopanje do podatkov shranjenih v relacijskih podatkovnih bazah, XML

datotekah in drugih podobnih virov.

Entity Framework je nabor tehnologij v ADO.NET, ki omogočajo razvoj

podatkovno usmerjenih aplikacij. Razvijalcem omogočajo delo s podatki v obliki

domensko specifičnih predmetov in lastnosti, brez potrebe ukvarjanja s tabelami in

stolpci v podatkovni bazi, kjer so shranjeni ti podatki. Z ogrodjem lahko razvijalci

delajo na višji ravni abstrakcije. [19]


13

LINQ (angleško Language Integrated Query) dodaja olajšano poizvedovanje po

naborih podatkov v sintakso C# in Visual Basic jezikov. Tehnologija uvaja vzorce

za poizvedovanje in posodabljanje podatkov in se lahko razširi, da podpira

potencialno kakršnokoli zbirko podatkov. [12]


14

3. Enostranske spletne aplikacije

3.1. Kaj je SPA?

Enostranska spletna aplikacija je spletna aplikacija ali spletno mesto, ki se nahaja v celoti

na eni spletni strani, njen cilj pa je zagotoviti bolj mobilno uporabniško izkušnjo, ki

spominja na namizno aplikacijo. [30] SPA je taka spletna aplikacija, pri kateri imamo

stran, ki podaja pravila razporeditve elementov (angl. layout), potem pa lahko vanjo

nalagamo več posameznih pogledov. Pri SPA aplikacijah se večina aplikacijske logike

nahaja na odjemalski strani. Pri prvem odjemalčevem obisku se celotna spletna stran ali

mesto prenese k njemu, nato pa se, odvisno od njegovih akcij, dinamično in asinhrono

zamenjujejo in prenašajo samo delčki take aplikacije. Stran se nikoli ne osveži v celoti.

Za pojav SPA aplikacij je odgovoren hiter razvoj JavaScript programskega jezika in novih

knjižnic, brez katerih bi bil njihov razvoj zelo težek.

V današnjem času postajajo take spletne strani vse večji in večji trend. Ob njihovi uporabi

uporabnik dobi občutek, kot da uporablja klasično namizno aplikacijo, kar pripomore k

tem, da je interakcija veliko hitrejša.

Izraz »Single Page Application« je prvi uporabil Steve Yen leta 2005, čeprav se je koncept

pojavil že vsaj leta 2002. [30]

Moderni brskalniki, ki lahko obdelujejo (angleško parsajo) HTML5, so razvijalcem

omogočili prenos uporabniškega vmesnika in aplikacijske logike iz spletnega strežnika na

odjemalca. Zrele odprtokodne knjižnice omogočajo gradnjo SPA aplikacij brez potrebe

poznavanja in bojevanja s tehničnimi težavami.

Nekatere od glavnih karakteristik SPA aplikacij so:

Večina aplikacijske logike se nahaja na odjemalcu, ne pa na strežniku, kot smo

vajeni spletni razvijalci. [10]

Veči del aplikacije je napisan v JavaScript jeziku. [10]

Aplikacija izmenjuje podatke s strežnikom preko web API-ja, ki običajno temelji

na REST principih. [10]

Aplikacija podaja uporabniško izkušnjo, kot je tista pri uporabi namiznih aplikacij.

[10]


15

Stvari se dogajajo asinhrono in na podlagi dogodkov ne pa asinhrono preko zahtev

in odgovorov. [10]

Trganje (angleško Chunking) – Spletna stran je zgrajena z nakladanja HTML

koščkov in JSON podatkov namesto prejemanja popolnega HTML dokumenta s

spletnega strežnika z vsako zahtevo. [30]

Krmilniki – JavaScript koda, ki obravnava zapleten DOM in podatkovno

manipulacijo, aplikacijsko logiko in AJAX klice, se nadomesti s krmilniki, ki

ločujejo poglede in modele, ki uporabljajo MVC ali MVVM vzorec. [30]

Predloge (angleško Templates) – Kodiranje uporabniškega vmesnika in DOM

manipulacije se nadomesti z deklarativno vezavo podatkov v HTML predloge. [30]

Usmerjanje (angleško Routing) – Izbor pogledov in navigacij (brez ponovnega

nalaganja strani), ki ohranja stanje elementov in podatkov. [30]

Komunikacija v realnem času – Dvosmerna komunikacija odjemalske aplikacije in

spletnega strežnika nadomeščajo zahteve v eno smer od brskalnika. [30]

Lokalno shranjevanje – Zmogljivost shranjevanja podatkov na odjemalcu zaradi

boljše odzivnosti in offline dostopa zamenjuje piškotke in podatkovno intenzivne

obremenitve iz spletnega strežnika. [30]

3.2. Arhitektura SPA

Ko govorimo o arhitekturi SPA aplikacij, lahko imamo dva pogleda na arhitekturo: na

arhitekturo aplikacije v celoti (odjemalska stran + strežniška stran) ali arhitekturo same

»SPA« aplikacije, ki se nahaja na odjemalski strani (Slika 8).


16

Slika 8: Arhitektura SPA aplikacije

1. Arhitektura celotne aplikacije

Celotna aplikacija je sestavljena iz večjega števila ravni (običajno trinivojska arhitektura).

Na strežniški strani arhitekture se običajno nahaja podatkovna raven z bazo ter logična

raven (običajno REST API), ki podatke iz baze na osnovi zahtev pošilja odjemalcu. Pri

prvem obisku spletne strani se prenese na odjemalca celotna stran (HTML, CSS), vključno

z JavaScript kodo, ki zna na podlagi uporabnikovih akcij delčke te strani spreminjati.

JavaScript koda zahteve strežniku pošilja asinhrono, nato pa na podlagi pridobljenih

rezultatov dinamično spreminja uporabniški vmesnik spletne strani.

2. Arhitekture odjemalske strani

Odjemalska stran SPA aplikacije je predstavitvena raven celotne aplikacije. V tem nivoju

se nahaja celotna logika SPA aplikacije. Način zgradbe aplikacije je predvsem odvisen od

knjižnice katera se uporablja za njen razvoj. Trenutno aktualne knjižice uporabljajo

različne načrtovalske vzorce za razvoj SPA aplikacij, kot so MVC, MVVM in MVP.

Običajno se podatki pridobijo iz strežnika v JSON formatu, nato pa se shranijo v obliki

JavaScript objektov, ki se povežejo s HTML kodo. Odvisno od knjižice pa se uporabljajo

še različni gradniki, ki narekujejo logiko, po kateri je aplikacija zgrajena, kot so krmilniki,

servisi, tovarne, direktive, moduli ipd.


17

3.3. Podatkovna raven SPA aplikacije

Podatkovna raven SPA aplikacije, ki se nahaja na strežniku, je v največjem številu

primerov relacijska podatkovna baza (MySQL, MS SQL, Oracle …), iz katere se podatki

berejo v logičnem nivoju. Baza se lahko nahaja na enakem strežniku, na katerem se nahaja

aplikacija, ali pa se ona nahaja na nekaterem drugem (ali celo več njih). Čeprav so podatki

v večini primerov hranjeni v podatkovni bazi, to ni nujno. Za SPA aplikacije je pomembno

zagotoviti, da so podatki hitro dostopni in jih je možno hitro dostaviti do odjemalca. Vir

podatkov je lahko tudi XML datoteka, neka statična datoteka na strežniku ali pa podatek,

ki se preko servisov pridobi iz nekega tujega strežnika.

3.4. Logična raven SPA aplikacije

Največji delež logične ravni SPA aplikacije so metode, ki obdelujejo podatke in jih

spreminjajo v primerno obliko za uporabo na odjemalcu. Običajno je to REST API, ki na

podlagi HTTP zahtev vrača podatke v JSON formatu. Na podlagi odjemalčevih zahtev

logična raven pridobi podatke iz podatkovne ravni in jih nato spremeni v primerno obliko.

Na primer, če pride od odjemalca zahteva po seznamu artiklov, logični nivo te podatke

prebere iz podatkovne ravni (npr. relacijske podatkovne baze), ampak jih ne vrne v obliki,

v kateri jih je pridobil, temveč iz njih zna filtrirati samo podatke, ki bo jih odjemalec

potreboval za svoje delovanje. V logični ravni je treba poskrbeti tudi za varnostne

mehanizme aplikacije.

3.5. Predstavitvena raven SPA aplikacije

Predstavitvena raven je raven, ki se popolnoma nahaja na odjemalcu. Na predstavitveno

raven aplikacije lahko gledamo kot na celoto, ki je aplikacija sama po sebi. Predstavitvena

raven SPA aplikacije je običajno implementirana s pomočjo enega od MV* vzorcev

(odvisno od uporabljene knjižnice ali ogrodja). Običajno gre za eno spletno stran, ki se

skupaj z JavaScript kodo prenese na odjemalca. Z JavaScript kodo pa je implementirana

celotna logika prikaza te spletne strani ter v bistvu celotna logika aplikacije. JavaScript

koda na podlagi odjemalčevih interakcij pošilja strežniku asinhrone zahteve po podatkih, ki

jih nato prikazuje na tej spletni strani. Celotne spletne strani nikoli ne osveži v celoti, saj se

spreminjajo samo njeni delčki.


18

4. AKTUALNE KNJIŽNICE IN OGRODJA

Dandanes obstajajo na trgu mnoge JavaScript knjižice in ogrodja, s katerimi je možen

razvoj SPA aplikacij, ki imajo svoje prednosti in slabosti pred drugimi. V tem poglavju si

bomo na kratko pogledali nekatere od teh knjižic.

4.1. Knjižnica Backbone.js

Backbone.js je JavaScript knjižnica z RESTful JSON vmesnikom in temelji na Model-

View-Presenter (MVP) paradigmi. MVP vzorec se razlikuje od MVC vzorca v tem, da je

krmilnik zamenjan s tako imenovanim voditeljem (angleško Presenter), ter v tem, da tukaj

pogled ne more dobiti podatkov neposredno iz modela. Pri MVC vzorcu ima pogled neko

inteligenco in lahko poizveduje po modelu neposredno, pri MVP vzorcu pa je pogled

popolnoma pasiven in vsaka interakcija z modelom mora iti preko voditelja. [4]

Celotna knjižnica je izgrajena iz večjega števila modulov, najpogosteje pa se uporabljajo

Model, Collection, View in Events.

Backbone.Model je modul, ki vsebuje interaktivne podatke in njihovo logiko (»getterje« in

»setterje«, privzete vrednosti, podatke za inicializacijo, pretvorbe …). Model je možno

razširiti z lastnimi lastnosti in funkcionalnostmi s pomočjo »extend« funkcije (Slika 9).

Slika 9: Primer Backbone.js modela

Backbone.Collection je modul za delo s kolekcijami (nabor zaporednih modul objektov).

Modul nam omogoča opazovanje sprememb ter aktiviranje določenih dogodkov v

kolekcijah, v uporabo pa nam podaja tudi številne funkcije za delo z njimi, kot so: »max«,

»min«, »find«, »forEach«, »size«, »add«, »remove«, »pop«, »push«.


19

Backbone.View je podoben krmilniku pri MVC ogrodjih. Pogled ne vsebuje HTML

oznake za našo aplikacijo, temveč procesira podatke in jih poveže s predlogami. Na tak

način lahko pogled opazuje podatke v modelu. Če pride pri njih do kakršne koli

spremembe, ustrezno spremeni tudi HTML predlogo. Na naslednji sliki se nahaja primer

uporabe Backbone.View modula ter njemu pripadajoče predloge (Slika 10) [3].

Slika 10: Primer uporabe Backbone.View modula

Backbone.Events je modul, ki lahko kakršnemu koli objektu doda možnost vezanja in

proženja poljubno poimenovanih dogodkov. Dogodki ne morajo biti deklarirani, preden se

povežejo z objekti in jim je možno podati poljubno število parametrov. Na naslednji sliki

se nahaja objekt, kateremu mu je dodana funkcija, ki se bo sprožila, ko se dogodi dogodek

»obvesti«. (Slika 11)


20

Slika 11: Primer dogodka in njegovega proženja

Največja prednost knjižnice pred drugimi je njena velikost. Celotna knjižnica se nahaja v

eni datoteki, ki ni večja od 70 kb [2], edina knjižnica, od katere je odvisna, pa je

Underscore.js (v Underscore.js se nahajajo različne pomožne funkcije, ki jih Backbone.js v

svojem delovanju uporablja). Zaradi svoje velikosti je Backbone.js popularen v razvoju

preprostih, hitrih in manjših SPA aplikacij, uporablja pa se tudi za razvoj samo delov in

modulov spletnih strani. Čeprav je knjižnica zelo preprosta in lahka za uporabo, začetniki

(brez naprednejšega znanja JavaScript programskega jezika) pogosto padajo v pasti. Ena

od takih pasti je ponavljanje enake kode na več mestih. Backbone.js zahteva ročno

implementacijo dosti stvari, ki so v drugih knjižnicah že implementirane (npr. tako

imenovan »data-binding«); ravno zaradi tega ni primeren za razvoj kompleksnih večjih

projektov.

Nekatere od aplikacij, zgrajene s pomočjo Backbone.js knjižnice, so: TryRuby, Khan

Academy, Groupon Now, Stripe, Hulu, Quartz, Earth, Wordpress.com, Pitchfor, Spin,

Walmart Mobile, Basecamp ipd. [2] [5]

4.2. Knjižnica Ember.js

Ember.js je odprtokodno JavaScript ogrodje za izdelavo spletnih aplikacij, ki temelji na

MVC načrtovalskem vzorcu. Ogrodje je razvil Yehuda Katz leta 2011, ki je sodeloval tudi

v razvoju jQuery, Ruby on Rails in SproutCore tehnologij. [24]

Ember.js ima definirane osnovne koncepte, na podlagi katerih funkcionira in se jih zelo

tesno drži. Ti koncepti so: Model, Route, Controller, View in Template. Spodnji diagram

prikazuje, kako ti koncepti komunicirajo med sabo (Slika 12). [13]


21

Slika 12: Interakcija med Ember.js koncepti

Predloge opisujejo uporabniški vmesnik aplikacije. V ozadju vsake predloge se nahaja

model, in če se ta model spremeni, se zna samodejno prilagoditi tudi predloga. Predloge se

izdelujejo s pomočjo Handlebars programskega jezika za izdelavo predlog in se

uporabljajo za gradnjo HTML strukture ter njeno dinamično spreminjanje. Na spodnji sliki

je prikazana dinamična HTML predloga, ki je s pomočjo Handlebars sintakse (znaki »{« in

»}«), povezane z modelom, v ozadju (Slika 13).

Slika 13: Primer Ember.js predloge

Usmerjevalnik (angleško Router) (Slika 14) je temeljni koncept Ember.js-ja, ki poudarja

pomen URL-ja pri upravljanju stanja aplikacije. En objekt poti ustreza enem URL-ju in v


22

bistvu predstavlja trenutno stanje aplikacije. Poti so definirane v Router objektu edincu

(angleško Singleton). [24]

Slika 14: Primer preprostega Ember.js usmerjevalnika

Model je objekt, ki hrani stanje podatkov v aplikaciji. Predloge so odgovorne za prikaz

modela uporabniku, tako da podatke, shranjene v njem, spremenijo v HTML. Čeprav ni

pomembno, katera tehnologija za dobavo podatkov se nahaja na strežniku, se v mnogih

aplikacijah podatki dobijo preko HTTP JSON API-ja. [7] Modele izdelujemo tako, da

izdelamo podrazred razreda »DS.Model«, atribute pa mu dodamo s pomočjo »DS.attr«

(Slika 15).

Slika 15: Primer Ember.js modela

Krmilniki dodajajo modelom logiko prikaza. Predloga lahko z modelom vsebuje tudi

krmilnik (ni obvezno) in komunicira tudi z njim. Če ne izdelamo krmilnika med vsako

predlogo ali pogledom in modelom, jih bo ogrodje Ember.js izdelalo samo. [13]

Pogledi se uporabljajo za dodajanje sofisticiranega ravnanja z dogodki, ki jih proži

uporabnik, grafike, ki je ni možno ustvariti s CSS-om, za JavaScript animacije in

obnašanja na predloge.

Našteti koncepti so v veliko pomoč razvijalcem, ki lahko s pomočjo njih pišejo boljšo

kodo, olajšujejo pa tudi delo med različnimi razvijalci, ki delajo na istem projektu. Ker je


23

poln močnih konceptov, veliko stvari lahko naredi namesto nas. Največja prednost

Ember.js pred ostalimi je v njegovem poudarku na usmerjanje in upravljanje URL-jev.

Velikost samega Ember.js ogrodja je okrog 300 Kb, kar je tudi ena od njegovih

pomanjkljivosti. Dokumentacija na njegovi uradni strani je polna napak, kar otežuje

njegovo učenje. Čeprav je dokumentacije na spletu ogromno, se veliko uporabnikov

pritožuje, da je učenje in razumevanje ogrodja zelo težko za začetnike.

Nekatere od aplikacij, zgrajenih z Ember.js ogrodjem, so naslednje: MHElabs, Yapp,

TILDE, Yahoo!, zendesk, Square, kohactive, captain train, Funding Gates …[8]

4.3. Knjižnica AngularJS

AngularJS je odprtokodno ogrodje za izdelavo spletnih aplikacij. Vzdržuje ga Google in

skupnost, ki pomaga pri ustvarjanju single-page aplikacij in one-page spletnih aplikacij, ki

na strani odjemalca rabijo samo HTML, JavaScript in CSS. Cilj AngularJS ogrodja je

bogatenje spletnih aplikacij z model-pogled-krmilnikom (MVC) zmožnostmi, v

prizadevanju, da bi bili razvoj in testiranje lažji. [20]

Knjižnica prebere HTML, ki vsebuje dodatne, prilagojene značke in atribute, potem pa

izvaja direktive, ki so povezane z njimi. Knjižnica se uporablja tudi za povezovanje

vhodnih in izhodnih delov strani z modelom, predstavljenim s standardnimi JavaScript

spremenljivkami. Vrednosti teh spremenljivk so lahko nastavljene ročno ali pa so

pridobljene iz statičnih ali dinamičnih JSON virov. [20]

AngularJS knjižnica podpira določene koncepte, ki se uporabljajo pri gradnji aplikacij s

pomočjo nje, kot so: moduli, krmilniki, storitve, filtri, direktive, izrazi. Glavni koncept je

»modul«. V korenu HTML dokumenta ali na delu, kjer želimo, da se SPA aplikacija začne,

moramo določiti, kateri modul bo uporabljen za njeno izvajanje. Ko brskalnik prebere

modul, se zažene AngularJS knjižnica. Od tega dela naprej se HTML procesira s pomočjo

nje. Na module pri AngularJS aplikaciji lahko gledamo kot na imenske prostore pri C# ali

Java jezikih. Vsakem modulu lahko podamo druge module, ki se bodo uporabljali v njem.

Na tak način se lahko uporabljajo komponente iz teh drugih modulov, podobno, kot to

storimo v C# jeziku s ključno besedo »using«. Moduli pomagajo tudi pri ponovni uporabi

kode. Priporoča se, da se različne komponente, kot so servisi ali krmilniki, ločijo v različne

module, saj jih je s tem možno uporabiti v popolnoma ločenih delih aplikacije ali pa celo v


24

drugi aplikaciji. V svoji najpreprostejši obliki je modul nabor blokov kode z nastavitvami

ter tako imenovanih »run« blokov. [1] V bloke z nastavitvami dodamo kodo, ki želimo, da

se izvede, preden je karkoli drugo inicijalizirano, v »run« bloke pa kodo, ki se bo izvedla

pri zagonu aplikacije. Na naslednji sliki je preprost primer modula s imenom »app«, ki

vsebuje »config« in »run« bloke kode. (Slika 16)

Slika 16: Primer preprostega AngularJS modula

»ng« modul je modul, ki ga knjižnica privzeto sproži na samem začetku izvajanja. Modul

vsebuje najpomembnejše komponente, brez katerih AngularJS aplikacija ne bi mogla

funkcionirati.

Naslednji pomemben koncept so direktive. Direktive so oznake, ki HTML gradnikom, kot

so elementi ali atributi, dodajajo neka določena obnašanja ali pa jih skupaj s njihovi otroki

v popolnosti spremenijo. AngularJS ima v svojem »ng« modulu že definirano veliko

zalogo uporabnih direktiv, lahko pa ustvarimo tudi poljubne lastne direktive. Nekatere od

direktiv iz »ng« modula bomo spoznali v naslednjem poglavju. V lastnih direktivah lahko

definiramo različne lastnosti, ki bodo narekovale obnašanje HTML gradnika, na kateri

bomo direktivo dodali v HTML dokumentu. Lahko definiramo restrikcijo, s katero

napovemo, na kateri tip gradnika je možno direktivo dodati: na model, ki se bo uporabil v

direktivi, HTML kodo, ki se bo dodala na mestu, na katerem bomo direktivo uporabili, ali

ime datoteke, ki vsebuje to kodo; funkcijo, ki se bo izvedla nad direktivo, ter številne druge

lastnosti. Ko definiramo direktivo, ji definiramo tudi ime ter modul, v katerem bo se

nahajala, ampak ko jo želimo, uporabiti, moramo pred njenim imenom dodati še »ng-«

prefiks. Direktive pomagajo pri izgradnji HTML kode iz večjega števila delov, ki so ločeni

v različnih datotekah. Na tak način lahko na primer neko direktivo prikažemo samo, če je

izpolnjen nek pogoj. Na podlagi takih pogojev aplikaciji dodamo tako imenovana stanja, to


25

pa je velik plus pri gradnji dinamičnih spletnih strani. Na naslednjih dveh slikah se nahaja

preprosta direktiva ter način njene uporabe v HTML kodi (Slika 17, Slika 18).

Slika 17: Primer preproste AngularJS direktive

Slika 18: Primer uporabe AngularJS direktive

Krmilniki (angleško Controller) so koncept, ki se uporablja za dodajanje poslovne logike

aplikaciji. S pomočjo »$scope« objekta, ki ga lahko uporabimo v krmilniku, aplikaciji

narekujemo aplikaciji navodila za povezovanje modela s pogledom. »$scope« objektu

dodamo lastnosti, ki jih lahko uporabimo neposredno v HTML kodi. Na tak način katera

koli sprememba podatkov, ki se nahajajo v $scope objektu, sproti spremeni njihov prikaz v

HTML dokumentu. To velja tudi nasprotno; če uporabnik spremeni vrednost podatka

preko na primer nekega vnosnega polja, se bo ta podatek spremenil tudi v $scope objektu.

Priporoča se, da krmilnik vsebuje samo logiko enega pogleda, saj se s tem zagotovi

granularnost celotne aplikacije. Zaradi tega je treba zagotoviti poseben krmilnik za vsak

pogled aplikacije ter celo za vsako direktivo. S pomočjo »ngController« atributa delu

HTML kode dodamo določen krmilnik, ki ga je možno tudi hierarhično gnezditi. S tem je


26

»$scope« objekt nekega krmilnika dostopen v vseh krmilnikih, ki se nahajajo v hierarhiji

pod njim. AngularJS nam ponuja velik nabor direktiv (ki jih bomo podrobneje spoznali v

naslednjem poglavju), s pomočjo katerih so možne različne manipulacije nad »$scope«

objektom v krmilniku. Naslednje dve sliki prikazujeta krmilnik in njegovo uporabo v

HTML kodi (Slika 19, Slika 20).

Slika 19: Primer AngularJS krmilnika

Slika 20: Primer uporabe AngularJS krmilnika in lastnosti »$scope« objekta v HTML kodi

Storitve (angleško Services) se uporabljajo za organizacijo kode na način, da jo je možno

uporabiti v vseh delih aplikacije. S pomočjo storitev je možno definirati funkcije, ki bodo

dostopne skozi celotno izvajanje aplikacije. Uporabljajo se pa tudi za hranjenje podatkov,

ki morajo biti dostopni v različnih krmilnikih ali direktivah. AngularJS ima definirane tudi

večje število lastnih storitev, katerih ime se običajno začne z znakom »$«. Poleg storitev

obstajajo še tovarne (angleško Factorys) in ponudniki (angleško Providers). Tovarne in

ponudniki se razlikujejo od storitev v tem, da če storitev pošljemo kot vhodni parameter

nekemu drugemu konstruktu, dobimo instanco te storitve, če pa podamo tovarno ali

ponudnika, pa dobimo vrednost, ki jo oni vračajo. Vrednost, ki jo vrača tovarna, je možno

spreminjati, vrednosti ponudnika pa ne. To ne pomeni, da so ponudniki slabši od tovarn in

storitev, saj jih je zaradi tega možno konfigurirati, preden se aplikacija začne izvajati,

storitev in tovarn pa ne. Naslednja slika prikazuje primer definiranja storitve, tovarne in

ponudnika (Slika 21).


27

Slika 21: Primer AngularJS storitve, tovarne in ponudnika

AngularJS je zelo kompleksno orodje, s pomočjo katerega njega je možna izvedba enakih

stvari na več načinov, kar pa je v nekaterih situacijah prednost, v nekaterih pa slabost.

Mnogi koncepti in funkcionalnosti, ki jih podpira, so zelo uporabni pri razvoju različnih

tipov aplikacij (ne samo SPA), zaradi česar je postal eden od najuporabnejših knjižnic; z

dodatnimi moduli, ki se še vedno razvijajo, pa postaja njegova uporabnost še širša. Glavna

slabost knjižnice je njegova velikost ter težka prilagodljivost na že obstoječe projekte, saj

če želimo neko spletno mesto spremeniti v SPA s pomočjo AngularJS-a, moramo

popolnoma prilagoditi celoten HTML.

4.4. Ostale knjižnice in ogrodja

Danes obstajajo mnoge knjižnice, ki se uporabljajo samo za razvoj SPA aplikacij, ali pa se,

čeprav niso ustvarjene v ta namen, lahko uporabijo. Knjižnice, ki smo jih podrobneje

spoznali, so v največji uporabi. To lahko vidimo že po količini dokumentacije in referenc

na spletu.

Nekatera od ostalih knjižnic in ogrodij se nahajajo v naslednji tabeli, skupaj s kratkim

opisom.

Ime Opis

KnockoutJS KnockoutJS temelji na MVVM paradigmi in se uporablja za razvoj bogatih

in dinamičnih uporabniških vmesnikov. S pomočjo knjižnice je možno


28

preprosto manipuliranje DOM elementov, saj podpira vezanje HTML

predlog z modelom v obliki JavaScript objektov. Knjižnico lahko

uporabljamo v popolni neodvisnosti od arhitekture na strežniku in spletne

strani ne rabijo biti izdelane popolnoma z njeno pomočjo, saj se lahko

uporabi samo v delčkih strani. Vezanje med modelom in pogledom je glavna

uporabnost te knjižnice, za druge stvari, ki morajo biti zagotovljene pri SPA

aplikacijah, pa je treba uporabiti dodatne knjižnice.

Durandal Durandal je ogrodje ali predloga, ki združuje različne knjižnice z namenom

izgradnje SPA aplikacij s knjižnicami, s katerimi so razvijalci že seznanjeni.

Cilj tega je čim krajše učenje. Durandal temelji na jQuery, Require.js in

KnockoutJS knjižnicami.

Spine Spine je zelo majhna in preprosta knjižnica, napisana v CoffeScript

programskem jeziku, ki temelji na MVC načrtovalskem vzorcu. Za pisanje

aplikacij s pomočjo te knjižnice lahko uporabimo CoffeScript ali JavaScript

programski jezik. Sami koncepti in vizija knjižnice so zelo podobni

Backbon.js-ju.

Meteor.js Meteor združuje orodja, kot so jQuery, Handlebars, Node.js, websockets,

Mongod podatkovne baze ipd. Izdan je bil leta 2011, temelji pa na DPP

(angleško Distributed Data Protocol).

Batman.js Batman.js temelji na MVC načrtovalskem vzorcu in ima zelo dobro razvito

manipulacijo nad stanji aplikacije.

Tabela 2: Ostala ogrodja in knjižnice za izdelavo SPA aplikacij


29

5. KONKRETNI PRIMER

V tem poglavju bomo prikazali potek razvoja kratke AngularJS SPA aplikacije s pomočjo

Microsoftovega Visual Studia, s tem da bomo strežniški del aplikacije napisali v C# jeziku.

5.1. Opis aplikacije

Aplikacija, s katero bomo prikazali delovanje AngularJS knjižnice ter postopek izgradnje

SPA aplikacij, bo aplikacija, v katero bo se možno prijaviti s fiksnim uporabniškim

imenom in geslom in se bo uporabljala za dodajanje opravil v bazo na strežniku. Z

aplikacijo bomo pokrili večje število različnih zasnov, ki se uporabljajo pri AngularJS

knjižnici. Prikazali bomo, kako je možno preverjati, če je uporabnik prijavljen, in mu

prikazati samo poglede, za katere je avtoriziran. Vsaka sprememba podatkov na odjemalcu

se bo samodejno, asinhrono dogajala tudi na strežniku.

Aplikacija bo imela naslednje funkcionalnosti:

prijava uporabnika,

odjava uporabnika,

dodajanje novega opravila,

brisanje posameznega opravila,

brisanje vseh opravil,

označevanje posameznih opravil kot opravljena,

označevanje vseh opravil kot opravljena,

filtriranje opravil (prikaz samo opravljenih, prikaz samo neopravljenih, prikaz

vseh).

5.2. Struktura projekta

Na začetku je v Visual Studiu treba izdelati nov projekt. Za našo aplikacijo bomo izbrali

ASP.NET MVC 4 tip projekta, ki ga bomo prilagodili namenu izgradnje SPA aplikacije.

Strukturo projekta, ki nam jo izdela Visual Studio privzeto, bomo spremenili in prilagodili.

(Slika 22).


30

Slika 22: Struktura projekta

V mapi »App_Start« se nahajajo razredi in metode, ki se bodo zagnale na samem začetku

aplikacije, kot je na primer razred za tako imenovano zvijanje (angleško bundling), s

pomočjo česa se iz več datotek izgradi ena skupna datoteka. Statične vire, kot so slike in

CSS stili, bomo imeli v mapi »Content«. »Controllers« in »Models« so mape z MVC

krmilniki in modeli. AngularJS aplikacija se nahaja v »Scripts« mapi. Tukaj se nahaja

celotna aplikacija, ki se bo izvajala na odjemalcu, skupaj z vsemi potrebnimi knjižnicami,

ki so v podmapi »Vendor«. Poglede bomo razdelili v dve kategoriji. V mapi »Pages« se

bodo nahajali glavni pogledi, ki se bodo spreminjali skupaj z URL naslovom, v mapi

»Partials« pa so samo datoteke z delčki HTML-ja, ki se bodo uporabljali skupaj z

direktivami, kot je na primer HTML koda za glavni meni aplikacije. Na datoteko

»Index.cshtml« lahko na neki način gledamo kot na »glavno« datoteko. V njej se nahaja

začetna HTML postavitev elementov ter atribut, ki zažene AngularJS knjižnico.

»Index.cshtml« se nahaja v korenu projekta, zaradi česar je v datoteki »Web.config« treba


31

spremeniti privzeto vrednost »webpages:enabled« ključa iz »false« na »true«, ker ta

lastnost preprečuje brskalniku neposreden dostop do ».cshtml« datotek (Slika 23).

Slika 23: Aplikacijske nastavitve v »Web.config« datoteki; »webpages:Enabled«

spremenjeno iz »false« na »true«.

Naslednja stvar, ki jo je treba narediti na samem začetku, je vključitev AngularJS knjižnice

v projekt. To bomo storili s pomočjo orodja NuGet. NuGet je odprtokoden upravljalec

paketov za .NET ogrodje in zagotavlja preprosto dodajanje različnih paketov in vtičnikov v

Visual Studio projekte. AngularJS knjižnico preprosto poiščemo s pomočjo NuGeta in jo

instaliramo. Kot privzeta bo dodana v mapo Scripts, zaradi boljše organizacije pa bomo mi

vse datoteke, ki se nam dodajo, vstavili v mapo »Scripts/Vendor/AngularJS«. Na enak

način bomo vključili še dodatne AngularJS module, ki jih bomo potrebovali.

Zadnja stvar, ki jo moramo narediti, preden se lahko lotimo programiranja same aplikacije,

je, da v datoteki »BundleConfig.cs«, ki se nahaja v mapi »App_Start«, zvijemo AngularJS

datoteke v celoto. Posebej bomo zvili datoteke knjižnice in datoteke, ki jih bomo mi sami

ustvarili (Slika 24).

Slika 24: Metoda za tako imenovano »Zvijanje« JavaScript datotek.


32

5.3. Podatkovna in logična raven aplikacij

Podatkovna baza aplikacije bo zelo preprosta. Sestavljena bo iz ene tabele, ki bo hranila

dodana opravila za enega uporabnika. Bazo nam bo Visual Studio okolje izdelalo samo s

pomočjo tako imenovanega »code-first« pristopa. Na logični ravni se bosta nahajala dva

Web API krmilnika, ki bosta obdelovala RESTful HTTP zahteve. Na začetku bomo dodali

preprost model za opravila, ki bodo imela tri lastnosti: ID, ime in ali je opravilo opravljeno

(Slika 25).

Slika 25: Model opravila

S pomočjo izdelanega modela bo nam Visual Studio okolje izdelalo bazo samo. Preden to

lahko omogočimo, pa moramo dodati tudi kontekst. Kontekst je preslikava vseh entitet v

bazi v C# kodo. Entity Framework (ki smo ga opisali v 2. poglavju) nam bo na tak način

omogočil delo s C# objekti, namesto da se ukvarjamo s tabelami v bazi.

Ko imamo kontekst in model, nam Visual Studio lahko pomaga pri izdelavi Web API

krmilnika s pomočjo »code-first« pristopa, v ozadju pa bo izdelal tudi podatkovno bazo.

Na naslednji sliki (Slika 26) je prikazano pogovorno okno za izgradnjo novega Web API

krmilnika.


33

Slika 26: Pogovorno okno za izdelavo Web API krmilnika

Visual Studio nam izdela krmilnik z novim objektom konteksta z vsemi metodami

(akcijami) nad tem kontekstom. Te akcije se kličejo iz odjemalca (brskalnika) s pomočjo

HTTP zahtev. Ustvarile so se metode: GET (vrne vsa opravila), GET z ID-jem (vrne

opravilo z določenim, vhodnim id-jem), POST (vnese v bazo novo opravilo), PUT (doda

novo opravilo ali ga posodobi, če ta že obstaja v bazi), ter DELETE (izbriše opravilo z

vhodnim ID-jem).

Ker se bomo osredotočili predvsem na način zagotavljanja avtentifikacije in avtorizacije na

odjemalski strani aplikacije, bo metoda za prijavo zelo preprosta. V realnem primeru je

treba poskrbeti za varnost podatkov tudi na strežniku, za to pa se uporabljajo različni

koncepti, kot so piškotki, seje in podobno. V našem primeru bomo enostavno preverili, ali

sta uporabniško ime in geslo, pridobljena z odjemalca, pravilna, in če sta, bomo vrnili

potrditev v JSON formatu.

5.4. Predstavitvena raven aplikacije (SPA)

V predstavitveno raven spada celoten SPA del aplikacija, ki je sestavljena iz JavaScript in

HTML kode. »Index.cshtml« nam bo HTML predloga, v katero bomo vključili CSS stil

aplikacije, JavaScript knjižnice ter sam atribut (ng-app), ki zagotovi, da se AngularJS

knjižnica zažene (Slika 27).


34

Slika 27: »Index.cshtml« datoteka

»top-menu-dir«, »header-dir« in »footer-dir« so mesta, na katera bo AngularJS dodal kodo

iz direktiv, ki jih bomo sami definirali, »ng-view« pa je AngularJS direktiva, ki napove, na

katerem mestu se bodo nahajali pogledi aplikacije. Ko brskalnik prebere »ng-app« atribut,

z njim zažene tudi AngularJS knjižnico, ki pa na podlagi vrednosti atributa zažene podani

modul. V datoteki, kjer smo definirali modul, je treba zagotoviti dve stvari: obravnavanje

URL-jev in preusmerjanje v primeru, da uporabnik ni prijavljen. Vhodni parametri modula

so drugi moduli, ki se bodo uporabljali v njem. Naslednji dve sliki prikazujeta definicijo

modula (Slika 28, Slika 29).


35

Slika 28: »app« modul − prvi del

Slika 29: »app« modul − drugi del


36

V metodi »config()« določimo, kateri krmilnik in predloga se bosta sprožila in pri katerem

URL-ju. Ko v brskalnik vnesemo na primer »{domena}/todoList« naslov, se bo v mojem

primeru sprožil »TodoListCtrl« krmilnik in prikazala se bo predloga, ki se nahaja v mapi

»/Views/Pages/TodoList.html«. Če ne vnesemo enega od podanih naslovov, bomo

preusmerjeni na »TodoList« pogled zaradi »otherwise()« metode. Parameter

»authenticate« se uporablja v metodi »on«, kjer se preverja, če je uporabnik prijavljen,

preden bo preusmerjen na določen pogled. Podatek, če je uporabnik prijavljen, hranimo v

storitvi, postavimo pa ga na »true« s pomočjo prijave.

V aplikaciji potrebujemo 4 storitve, ki jih bomo definirali v posebnem »services« modulu.

Storitev »TodosService« (Slika 30) ima metode za delo s storitvami, ki se bodo asinhrono

prožile in pošiljale HTTP zahteve na strežnik. »AuthService« (Slika 31) se uporablja za

hranjenje podatka o tem, ali je uporabnik prijavljen ali ni. »UrlService« (Slika 32)

potrebujemo, da lahko hranimo podatek o URL-ju pogleda, ki se bo prikazal, preden se

sproži avtentifikacija pri prijavi.


37

Slika 30: Definicija modula »services« in storitve »TodosService«

Slika 31: »AuthService« storitev


38

Slika 32: »UrlService« storitev

Prijava ima posebno definiran krmilnik, v katerem se nahaja model za vnesene podatke in

metoda za prijavo (Slika 33). Metoda pošlje podatke na strežnik, nato pa na podlagi

vrnjenih podatkov preusmeri uporabnika na določen pogled. Če je prijava uspešna, je

uporabnik preusmerjen na pogled, na katerega je na začetku (preden je bil preusmerjen na

prijavo zaradi tega, ker je hotel priti na pogled, ki zahteva avtentifikacijo) hotel priti, če pa

ni, pa je preusmerjen nazaj na pogled za prijavo.

Slika 33: Krmilnik za prijavo


39

Krmilnik za odjavo na podlagi uporabnikovih akcij (če klikne, da želi potrditi odjavo)

nastavi lastnost v »AuthService« storitvi na »false« in preusmeri uporabnika na prijavni

pogled (Slika 34).

Slika 34: Krmilnik za odjavo

Delo z opravili ima najkompleksnejši pogled in krmilnik. Pogled se nahaja na naslednjih

treh slikah (Slika 35, Slika 36, Slika 37), za tem pa je podrobna razlaga.

Slika 35: Pogled za delo z opravili − prvi del


40

Slika 36: Pogled za delo z opravili − drugi del

Slika 37: Pogled za delo z opravili − tretji del

V krmilniku so uporabljene različne direktive, ki jih AngularJS že ima definirane, in te so:

»ng-controller« – direktiva določi, v katerem JavaScript krmilniku se nahaja logika

za izvajanje.

»ng-submit« – direktiva prepreči privzeto pošiljanje (angleško submit) obrazca na

strežnik. Kot vrednost atributa podamo ime funkcije, ki se bo izvedla, ko pride do

pošiljanja obrazca na strežnik, lahko v njej validiramo podatke, ki bodo poslani,

nato pa jih »ročno« pošljemo.


41

»ng-model« – direktiva poveže neko vnosno polje z objektom v JavaScript kodi.

Na tak način kakršnakoli sprememba vrednosti v vnosnem polju spremeni vrednost

objekta in obratno.

»ng-disabled« / »ng-enabled« – preveri vrednost objekta, ki je podan kot vrednost

atributa, in če je ta »true« / »false«, omogoči / onemogoči element, na katerem se

nahaja.

»ng-click« – sproži funkcijo, ki je podana kot vrednost atributa, ko uporabnik

klikne na element na katerem se atribut nahaja.

»ng-change« – sproži funkcijo, ki je podana kot vrednost atributa, ko se spremeni

vrednost vnosnega polja, na katerem se atribut nahaja.

»ng-repeat« – del HTML kode, ki se nahaja znotraj elementa, na katerem se nahaja

atribut, se izpiše toliko krat, kot definiramo v vrednosti atributa. V programskih

jezikih je ekvivalentni gradnik zanka.

»ng-style« – če pogoj v vrednosti atributa vrne »true«, doda podan CSS stil na

element na katerem se atribut nahaja.

»ng-show« – če ima vrednost spremenljivke, ki je podana kot vrednost atributa,

vrednost »true«, se element, na katerem se atribut nahaja, prikaže; v nasprotnem pa

se prikrije.

Prikazan pogled je povezan s »TodoListCtrl« krmilnikom, v katerem so definirane metode

za manipulacijo nad prikazanimi podatki. »TodoListCtrl« vsebuje metode za: dodajanje

opravil, brisanje vseh opravil, brisanje opravljenih opravil, spreminjanje opravil, brisanje

posameznih opravil, označevanje opravil kot »opravljena«, filtriranje opravil, funkcijo za

vračanje števila opravljenih opravil ter za vračanje števila neopravljenih opravil. Te

funkcije smo dodali na objekt »$scope«. Na tak način so funkcije povezane s pogledom in

se lahko kličejo iz HTML kode neposredno.

Metoda »GetTodos()« (Slika 38) se sproži na samem začetku izvajanja krmilnika in služi

za pridobivanje vseh opravil iz strežnika s pomočjo »TodosService« storitve. »then« del

pomeni, da bo se telo funkcije izvedlo šele, ko podatki pridejo iz strežnika, »promise« pa

so dejanski podatki v JSON formatu. Ko so podatki pridobljeni, se shranijo v model in se

povežejo s pogledom.


42

Slika 38: Definiranje modula »TodoListCtrl« in metoda za pridobivanje vseh opravil iz

strežnika

S pomočjo »$watchCollection« metode (Slika 39) se opazujejo spremembe nad »todos«

objektom v modelu. Če je število opravil v njem večje od 10, se bo spremenljivka

»maxAdded« postavila na »true«, v nasprotnem pa na »false«. S pomočjo te spremenljivke

se v pogledu preverja, ali je dodano maksimalno možno število opravil, in če je, se vnos

novih onemogoči.

Slika 39: »$watchCollection« metoda

»addTodo« metodo (Slika 40) prožimo iz pogleda, ko vnesemo novo opravilo v vnosno

polje, ona pa na začetku preveri, če je karkoli vneseno. Če je, s pomočjo »TodosService«

storitve pošlje novo opravilo na strežnik, vnosno polje pa sprazni.


43

Slika 40: »addTodo« metoda

Brisanje opravil je možno na tri načine. Možno je izbrisati posamezno opravilo, vsa

opravila ali samo opravljena opravila. Metoda »delete« (Slika 41) izbriše posamezno

opravilo s pomočjo njegovega ID-ja; »deleteAll« (Slika 42) izbriše vsa opravila s pomočjo

zanke; »deleteCompleated« (Slika 43) pa izbriše samo opravila, ki imajo lastnost »Done«

na »true«, nato pa še enkrat pridobi vsa opravila iz strežnika.

Slika 41: »delete« metoda

Slika 42: »deleteAll« metoda


44

Slika 43: »deleteCompleted« metoda

Ko kliknemo na gumb za označevanje vseh opravljenih opravil, se sproži metoda

»completeAll« (Slika 44), ki vsem opravilom spremeni lastnost »Done« na »true«. Za

spremembo lastnosti »Done« na posameznem opravilu ne potrebujemo posebne funkcije,

saj je ta vrednost neposredno povezana s pogledom in se pri vsaki spremembi na pogledu

(klik na gumb) sproži tudi metoda »update« (Slika 45), ki avtomatsko spremeni vrednost

tudi na strežniku. Metoda »update« se uporablja tudi za avtomatsko spremembo imena

lastnosti na strežniku, saj bo se ona sprožila pri kakršnikoli spremembi te lastnosti na

pogledu.

Slika 44: »completeAll« metoda


45

Slika 45: »update« metoda

Metodi »steviloPreostalih« (Slika 46) in »steviloOpravljenih« (Slika 46) vračata število

opravil, ki imajo lastnost »Done« na »true« ali »false« in se uporabljajo samo za prikaz teh

podatkov.

Slika 46: »steviloPreostalih« in »steviloOpravljenih« metode

Spremenljivka »filter« (Slika 47) hrani vrednost, ki določa, katera opravila so trenutno

prikazana. Če je vrednost »vsa«, bodo prikazana vsa opravila, če je vrednost »opravljena«

bodo prikazana samo opravljena opravila, če pa je vrednost »neopravljena«, pa samo


46

neopravljena opravila. Ker je vrednost spremenljivke vezana s pogledom s pomočjo »ng-

model« direktive, jo lahko preprosto spreminjamo s pomočjo klikov na ustrezne gumbe v

pogledu. »showTodo« (Slika 47) metodo kličemo iz »ng-show« direktive. Metoda preveri

vrednost spremenljivke »filter« in vrne »true«, če je dovoljen prikaz podanega opravila, ali

»false«, če ni.

Slika 47: Metode in lastnost za filtriranje opravil

V aplikacijo smo dodali še direktive za HTML dele, ki so definirani v »Index.cshtml«

datoteki (na enak način, kot smo prikazali v prejšnjem poglavju), CSS stil ter dodatne

poglede. S tem je pa tudi preprost primer SPA aplikacije zaključen.


47

6. ZAKLJUČEK

Namen diplomskega dela je bila predstavitev SPA aplikacij, njihovih konceptov ter

tehnologij, ki se uporabljajo v njihovem razvoju. V diplomski nalogi smo pokrili ene od

glavnih pogledov na SPA aplikacije. V prvi polovici smo se seznanili z njihovim

teoretičnim ozadjem, nato pa smo raziskali načine njihove implementacije. Drugo poglavje

ponuja predstavitev tehnologij, ki jih je treba poznavati, preden se je sploh možno lotiti

izdelave SPA aplikacij. Osredotočili smo se na Microsoftovo ozadje. Naslednje poglavje se

ukvarja s teoretičnim ozadjem SPA aplikacij. Na začetku poglavja smo se ukvarjali z

vprašanjem, kaj sploh SPA aplikacije so, nato pa smo si pogledali arhitekturo le-teh. Četrto

poglavje je prikaz funkcionalnosti, konceptov, prednosti in slabosti nekaterih ogrodjih in

knjižnic, ki se uporabljajo za razvoj SPA aplikacij. Osredotočili smo se predvsem na

Backbone.js, Ember.js in AngularJS tehnologije. V petem poglavju pa je za konec prikazan

praktičen preprost primer, ki smo ga izdelali s pomočjo AngularJS knjižnice.

Slovenske literature o SPA aplikacijah je na razpolago zelo malo, saj je to trend, ki se je

začel v veliki meri razvijati v zadnjih petih letih, ampak postaja z vsakim dnevom vse bolj

in bolj popularen. Diplomska naloga je lahko slovenskim razvijalcem vstopna točka za

njegovo spoznavanje.


48

7. VIRI, LITERATURA

[1] AngularJS, What is a Module?, Dostopno na:

https://docs.angularjs.org/guide/module

[2] Backbone.js, Dostopno na:

http://backbonejs.org/

[3] Backbone Tutorials, What is a view?, Dostopno na:

http://backbonetutorials.com/what-is-a-view/

[4] Code Project, Differences between MVC and MVP for Beginners, Dostopno na:

http://www.codeproject.com/Articles/288928/Differences-between-MVC-and-MVP-for-

Beginners

[5] Code School, Angular, Backbone, or Ember: Which is Best for your Build, Dostopno

na: http://blog.codeschool.com/post/85819292538/angular-backbone-or-ember-which-is-

best-for-your

[6] Computer Hope, Web page, Dostopno na:

http://www.computerhope.com/jargon/w/webpage.htm

[7] Emberjs, Core concepts, Dostopno na:

http://emberjs.com/guides/concepts/core-concepts/

[8] Emberjs, Users, Dostopno na:

http://emberjs.com/ember-users/

[9] Galloway J., Haack P., Wilson B., Allen K. S., Professional ASP.NET MVC 3, John

Wiley & Sons, Inc. Indianapolis, Indiana, 2011

[10] Krutisch, J., The Single Page App Jumpstart- Understanding and Mastering

JavaScript Applications, Leanpub, 2013

[11] Learn REST: A Tutorial, Dostopno na:

http://rest.elkstein.org/

[12] Microsoft Developer Network, LINQ (Language-Integrated Query), Dostopno na:

http://msdn.microsoft.com/en-us/library/bb397926.aspx

[13] Smashing Magazine, An In-Depth Introduction To Ember.js, Knebel J., Dostopno na:

http://www.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/

[15] tutorialspoint, JavaScript Overview, Dostopno na:

http://www.tutorialspoint.com/javascript/javascript_overview.htm

[16] w3schools, HTML5 Introduction, Dostopno na:

http://www.w3schools.com/html/html5_intro.asp

[17] w3schools, HTML Introduction, Dostopno na:

http://www.w3schools.com/html/html_intro.asp


49

[18] Wikipedia, .NET Framework, Dostopno na:

http://en.wikipedia.org/wiki/.NET_Framework

[19] Wikipedia, ADO.NET Entity Framework, Dostopno na:

http://en.wikipedia.org/wiki/ADO.NET_Entity_Framework

[20] Wikipedia, AngularJS, Dostopno na:

http://en.wikipedia.org/wiki/AngularJS

[21] Wikipedia, ASP.NET, Dostopno na:

http://en.wikipedia.org/wiki/ASP.NET

[22] Wikipedia, ASP.NET Razor, Dostopno na:

http://en.wikipedia.org/wiki/ASP.NET_Razor_view_engine

[23] Wikipedia, Cascading Style Sheets, Dostopno na:

http://en.wikipedia.org/wiki/Cascading_Style_Sheets

[24] Wikipedia, Ember.js, Dostopno na:

http://en.wikipedia.org/wiki/Ember.js

[25] Wikipedia, JavaScript, Dostopno na:

http://en.wikipedia.org/wiki/JavaScript

[26] Wikipedia, JQuery, Dostopno na:

http://en.wikipedia.org/wiki/JQuery

[27] Wikipedia, JSON, Dostopno na:

http://en.wikipedia.org/wiki/JSON

[28] Wikipedia, Model-view-controller, Dostopno na:

http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

[29] Wikipedia, Model View ViewModel, Dostopno na:

http://en.wikipedia.org/wiki/Model_View_ViewModel

[30] Wikipedia, Single-page application, Dostopno na:

http://en.wikipedia.org/wiki/Single-page_application

[31] Wikipedia, Website, Dostopno na:

http://en.wikipedia.org/wiki/Website

PRISTOP SPA ZA IZGRADNJO SPLETNIH STRANIKey Words: SPA, Microsoft, JavaScript, AngularJS,...

Documents

Transcript of PRISTOP SPA ZA IZGRADNJO SPLETNIH STRANIKey Words: SPA, Microsoft, JavaScript, AngularJS,...