klijentske web-aplikacije i angular

46 Pages·2017·0.59 MB·Croatian

Klijentske web-aplikacije i Angular
Grđan, Barbara
Master's thesis / Diplomski rad
2017
Degree Grantor / Ustanova koja je dodijelila akademski / stručni stupanj: University of
Zagreb, Faculty of Science / Sveučilište u Zagrebu, Prirodoslovno-matematički fakultet
Permanent link / Trajna poveznica:https://urn.nsk.hr/urn:nbn:hr:217:083753
Rights / Prava:In copyright / Zaštićeno autorskim pravom.
Download date / Datum preuzimanja:2023-02-03
Repository / Repozitorij:
Repository of the Faculty of Science - University of
Zagreb
ˇ ˇ
SVEUCILISTE U ZAGREBU
ˇ
PRIRODOSLOVNO–MATEMATICKI FAKULTET
ˇ
MATEMATICKI ODSJEK
Barbara Grdan
KLIJENTSKE WEB-APLIKACIJE I
ANGULAR
Diplomski rad
Voditelj rada:
doc. dr. sc. Zvonimir Bujanovic´
Zagreb, rujan 2017.
Ovajdiplomskiradobranjenjedana predispitnimpovjerenstvom
usastavu:
1. ,predsjednik
2. ,cˇlan
3. ,cˇlan
Povjerenstvojeradocijeniloocjenom .
Potpisicˇlanovapovjerenstva:
1.
2.
3.
Hvalamami,tati,bratuizarucˇnikunapodrsˇciistrpljenju.
Sadrzˇaj
Sadrzˇaj iv
Uvod 1
1 UvoduAngular 2
1.1 Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Povijest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Prednosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 ArhitekturaAngular-a 8
2.1 Moduli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2 Komponente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3 Predlosˇci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.4 Metapodaci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5 Vezanjepodataka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.6 Direktive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.7 Usluge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.8 Dependencyinjection . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.9 Usmjeravanje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3 Pripremaokruzˇenjaiosnovnaaplikacija 19
3.1 Instalacija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2 Jednostavnaaplikacija . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4 Razvojslozˇenijewebaplikacije 24
4.1 Opiswebaplikacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.2 Serverskastranaaplikacije . . . . . . . . . . . . . . . . . . . . . . . . . 27
4.3 Klijentskastranaaplikacije . . . . . . . . . . . . . . . . . . . . . . . . . 29
iv
SADRZˇAJ v
Bibliografija 38
Uvod
U svijetu web-aplikacija sve je popularniji trend pomicanja aplikacijske logike na klijent-
sku stranu, uz web-stranice koje simuliraju klasicˇne aplikacije sa stolnih racˇunala. Kod
takvihweb-aplikacija,savkodsedohvac´ajednimzahtjevompremaweb-serveru,adodatni
resursisenastranicuucˇitavajuidodajudinamicˇki,obicˇnokaoreakcijanaakcijekorisnika.
Ovakav pristup rezultira znatno slozˇenijim kodom na klijentskoj strani web-aplikacije, pa
su se pojavili brojni razvojni okviri koji olaksˇavaju njezinu izradu. Jedan od najpopularni-
jih je Angular, koji kroz koncepte komponenti i modula daje elegantnu tehniku za slozˇene
klijentskeaplikacije.
Cilj ovog diplomskog rada je opisati platformu Angular i istaknuti razliku u dizajnu
web-aplikacija koje prenose aplikacijsku logiku na klijentsku stranu u odnosu na klasicˇne
web-aplikacije. Uz sami Angular, upoznat c´emo se sa programskim jezikom TypeScript,
jezikom u kojem je Angular napisan, te c´emo istaknuti neke razlike izmedu njega i jezika
odkojegjenastaoiukojegseprevodi–JavaScript-a.
Moguc´nostiAngular-ademonstriratc´eseizradomweb-aplikacijezaprikazvremenske
prognoze. Aplikacija c´e sa servera dohvac´ati podatke o vremenskim prognozama koji su
prethodnodohvac´enisavisˇerazlicˇitihwebservisa,azatimihusporedivatimedusobnoisa
stvarnimpodacimaovremenu,tenakrajurezultateprikazivatiuoblikugrafa.
1
Poglavlje 1
Uvod u Angular
1.1 Angular
Angularjerazvojniokvir(engl. framework)namijenjenrazvojuklijentskihwebaplikacija.
PisanjeuprogramskomjezikuTypeScript,otvorenogjekoda(engl. opensource),arazvio
gajeGoogle. ZadnjasluzˇbenaverzijaAngular-ajeverzija4.1.x.
Za izradu aplikacija koriste se HTML i TypeScript. Angular aplikacije pisˇu se kom-
ponirajuc´i HTML predlosˇke, pisˇuc´i klase za komponente koje upravljaju tim predlosˇcima,
dodajuc´ilogikuaplikacijeuuslugeipakirajuc´ikomponenteiuslugeumodule. Aplikacija
se pokrec´e tako da se pokrene njezin glavni modul. Angular zatim prezentira sadrzˇaj apli-
kacije u internet pregledniku i reagira na interakcije korisnika pratec´i instrukcije koje su
mudane.
1.2 Povijest
PrvaverzijaAngular-abilajeAngularJS.AngularJSdostupanjeod2010. godine,azadnja
verzija iz 2017. je verzija 1.6.x. On je pisan u JavaScript-u, a mnoge svjetski poznate web
stranice ga koriste i danas, na primjer Paypal, Netflix, The Guardian i druge. Detaljnije o
AngularJS-umozˇemopronac´ina[9].
Angular 2.0 objavljen je u drugoj polovici 2014. godine. Angular 2.0 je napisan (pre-
pisan) iz pocˇetka, koristec´i TypeScript. AngularJS i Angular 2.0 nisu kompatibilni, pa
se zato pod nazivom Angular podrazumijeva svaka verzija Angular-a vec´a od 2.0. Na taj
nacˇin izbjegavaju se zabune i jasnije se razlikuje AngularJS od Angular-a. Alpha i beta
verzijeAngular-a2.0objavljivanesukroz2015. godinu,aurujnu2016. godineobjavljena
jeprvasluzˇbenaverzija. SluzˇbenawebstranicaAngular-aje: https://angular.io/.
Vec´ krajem 2016. godine najavljen je Angular 4. Verzija 3 je preskocˇena, kako bi
se izbjegli nesporazumi povezani s nekim paketima cˇija verzija je vec´ bila objavljena kao
2
POGLAVLJE1. UVODUANGULAR 3
v3.3.0. PosljednjadostupnaverzijaAngular-aje4.1.0,objavljenautravnju2017. godine.
Iako se skok sa verzije 2 na verziju 4 cˇini velik, u Angular-u 4.0 nema tako drasticˇnih
promjena kao sˇto je bilo u Angular-u 2.0, u odnosu na AngularJS. Politika verzioniranja
je takva da, zbog brzine izlaska novih verzija, svaku novu verziju Angular-a (4.0, 5.0, ...)
zapravomozˇemogledatikaopodverzije(1.4,1.5,...).
Izlazak Angular verzije 5.0 planira se u rujnu 2017. godine, a verzije 6.0 i 7.0 vec´ su
najavljenezaozˇujakirujan2018. godine. BitnojenapomenutidasusveverzijeAngular-a
vec´e od 2.0 kompatibilne s prethodnim verzijama (do verzije 2.0), a taj princip planira se
slijeditiidalje.
Uovomraduproucˇavatc´emoizraduweb-aplikacijakoristec´iverzijuAngular-a2.0.
1.3 Prednosti
Web aplikacije
Angularkoristimoguc´nostimodernihwebplatformikakobiwebstraniceprikazaouobliku
aplikacija, a za razvoj samih aplikacija nije potreban pristup mrezˇi, dok se instalacija po-
trebnogsoftveraobavljaujednomkoraku.
Generiranje programskog koda
Angular iz predlozˇaka generira programski kod koji je optimiziran za danasˇnje JavaScript
virtualne strojeve. Na taj nacˇin dobivaju se sve prednosti rucˇno pisanog koda, uz visoku
produktivnostkojupruzˇarazvojniokvir.
Univerzalan
Angular aplikacije pokrec´u se na posluzˇiteljima node.js, .NET, PHP i drugim, a iscrtavaju
seuweb-preglednikukoristec´isamoHTMLiCSS.
Dijeljenje koda
Aplikacije u Angularu koriste automatsko dijeljenje programskog koda, sˇto omoguc´ava
korisniku da ucˇita samo one dijelove koda koji su mu potrebni za iscrtavanje trenutnog
dijelaaplikacije.
POGLAVLJE1. UVODUANGULAR 4
Razvojne okoline
Razvoj aplikacije u nekoj od popularnih razvojnih okolina (WebStorm, Visual Studio ili
Angular IDE) donosi prednosti kao sˇto su prijedlozi programskog koda, trenutni prikaz
gresˇkiiostalepovratneinformacije.
Predlosˇci
Brzo stvaranje dijelova korisnicˇkog sucˇelja koristec´i jednostavnu, ali moc´nu sintaksu pre-
dlozˇaka.
1.4 TypeScript
TypeScript je besplatan jezik otvorenog koda, razvijen i odrzˇavan od strane Microsoft-a.
Sintaksa mu je strogi nadskup JavaScript-a. TypeScript podrzˇava pisanje programskog
koda u JavaScript-u, korisˇtenje biblioteka za JavaScript i pozivanje TypeScript koda iz
samog JavaScript-a. Drugim rijecˇima, svaki JavaScript program je zapravo i TypeScript
program. TypeScript se pomoc´u specijalnog programa, tzv. transpiler-a prevodi u cˇisti
i jednostavan JavaScript programski kod koji se lako pokrec´e u bilo kojem internet pre-
gledniku i na bilo kojem JavaScript pokretacˇu (engl. engine) koji podrzˇava standard EC-
MAScript3ilinoviji. TypeScriptsekoristizarazvojklijentskihJavaScriptaplikacija,alii
serverskih(Node.js)aplikacija.
Glavne prednosti programskog jezika TypeScript su to sˇto je objektno orijentiran i to
sˇto su tipovi svih varijabli poznati u vrijeme prevodenja. Na taj nacˇin prevoditelj (engl.
transpiler) mozˇe otkriti velik broj trivijalnih pogresˇaka vec´ u najranijim fazama razvoja.
Ova svojstva olaksˇavaju razvoj srednjih i velikih aplikacija. S obzirom da je JavaScript
podskup TypeScript-a, programeri dobivaju dodatne moguc´nosti kombiniranjem eleme-
nata ta dva programska jezika. TypeScript takoder donosi mnoge moguc´nosti standarda
ECMAScript,kaosˇtosulambdafunkcije,moduliiklase.
PromotrimojedanjednostavanprimjerkodauTypeScript-u,kakobismoustanoviliraz-
likeuodnosunaJavaScript:
1 class Person {
2 name: string ;
3 constructor (message: string ) {
4 this .name = message;
5 }
6 printName() {
7 return ”Hello , ” + this .name;
8 }
9 }