Univerzitet u Beogradu

Fakultet organizacionih nauka

Laboratorija za elektonsko poslovanje

Angular
Seminarski rad iz Elektronskog poslovanja

Studenti:

Monika Milošević 47/15

Andrea Lazarević 29/15

Beograd, 2018
 Sadržaj

1. Uvod...................................................................................................................................3
1.1. Kako je sve počelo?.....................................................................................................3
1.2. Kada treba koristiti Angular?......................................................................................4
2. Korisnički zahtev................................................................................................................6
3. Naše rešenje i primena.......................................................................................................6
3.1. Stranica krofne............................................................................................................6
3.2 Stranica O nama...........................................................................................................9
3.3. Kontakt stranica.........................................................................................................10
3.4. Stranica Omiljene......................................................................................................11
4. Zaključak..........................................................................................................................12
5. Literatura..........................................................................................................................13

2
 1. Uvod

Angular je front-end framework koji je izgrađen kako bi olakšao izradu

kompleksnijih aplikacija, takođe da bi pojednostavio njihovo organizovanje i
testiranje. On omogućava izradu single page aplikacija. Prva verzija Angular-a
nastala je još 2009. godine i bila je daleko ispred svog vremena. Kada je Angular
prvi put napisan, rešio je dosta problema koji su sada popravljeni na nivou jezika
JavaScript sa oslobađanjem verzije ES2015. Dok je Angular 1 morao da stvori
sopstveno rešenje za module, ES2015 recimo sad obezbeđuje rešenje za to na
nivou jezika.

Sa ovakvim neadekvatnostima na umu Angular tim u Google-u je prepravio u

potpunosti framework i nova i poboljšana verzija je poznata kao Angular 2 i veoma
je obećavajuća. Celokupna ideja međutim nije promenjena – on i dalje pruža
holističko rešenje za pisanje aplikacija. U framework su ugrađeni način za
izvršavanje rutiranja aplikacija, način za komunikaciju sa web serverima i još
mnogo toga. Nisu potrebni nikakvi dodatni paketi za izradu jednostavne a opet
potpuno funkcionalne aplikacije.

1.1. Kako je sve počelo?

Angular je započeo kao projekat sa strane. Miško Hevery i Adam Abrons su 2009.
lansirali projekat pod imenom <angular/> koji će pomoći developerima, kao i
dizajnerima da izrađuju aplikacije korišćenjem jednostavnih HTML tagova. Ime
“Angular” potiče od ugaonih zagrada odnosno <> koje okružuju HTML tagove.

Miško je u jednom intervjuu iz 2013. otkrio ideju koja se krije iza ovog frameworka:
“Želeli smo da vidimo da li možemo da olakšamo Web dizajnerima, ne
neophodno i Web developerima već prvenstveno dizajnerima, da im omogućimo
malo dodatnog HTML-a kojim će statičku formu da pretvore u nešto što zapravo
može da se pošalje mejlom. ”

3
Kako je domen angular.com zauzet – i dan danas jeste – vremenom su
preimenovali biblioteku u GetAngular i napravili maleni sajt koji je govorio o
osobinama frameworka.

Slika 1- Izgled početne stranice Angular sajta u decembru 2009.

Uskoro, nakon što je Miško počeo da radi za Google, i kada je 2010. radio na
projektu zvanom Google Feedback, ubedio je svog menadžera Brad Greena da
svoj projekat preradi koristeći Angular. Vreme koje je na taj način njegov tim
uštedeo je bilo dovoljno da ubedi Google u to koliku zapravo moć nudi Angular.

Ubrzo nakon uspeha prepravke projekta Google Feedback taj isti tim je objavio
open source biblioteku, a zatim i verziju Angular 1.0 u maju 2011. Za samo
nekoliko godina upotreba Angulara je neverovatno skočila i danas Google može
da se ponosi činjenicom da više od million ipo developera koristi Angular.
1.2. Kada treba koristiti Angular?

Tehnički Angular se može koristiti za izradu bilo čega, ali najbolje radi u
netrivijalnim aplikacijama koje uključuju podatke. Ako pogledate razne Angular
aplikacije navedene na sajtu madewithangular.com primeticete obrazac – svaka
od njih prikuplja podatke iz formi i kasnije radi nešto sa tim podacima.

To ne znači da je neophodno imati forme u svojoj aplikaciji za korišćenje Angulara.

Programeri su napravili iznenađujući broj igrica pomoću Angulara, kao i još luđih
stvari kao što su aplikacije virtuelne realnosti. Angular nije ni najmanji ni

4
najjednostavniji Framework, zato je za neke jednostavnije aplikacije jquery
pogodniji.
Angular je takođe pogodan za aplikacije na kojima rade srednji ili veci timovi, kao i
za one koje su predviđene da rade u više razvojnih okruženja.

5
 2. Korisnički zahtev

Naš zadatak je bio da napravimo jednostavan sajt za kompaniju Slatkoteka koja

se bavi prodajom krofni. Korisnički zahtev je bio da sajt sadrzi stranicu sa
asortimanom gde bi potrošači imali uvid u ceo asortiman kako bi mogli da vrše
porudžbine preko telefona. Druga stranica obuhvata nešto više o samoj kompaniji,
usmerena je na potencijalne partnere i investitore, a treća stranica treba da sadrži
osnovne informacije o kontaktu, cenama dostave, adresi poslovnog objekta. Jos
jedan od zahteva jeste da se omogući posetiocima sajta da ostave poruke, ukoliko
imaju nekih ideja, primedbi ili jednostavno žele da se pridruže Slatkoteka timu. 

6
 3. Naše rešenje i primena

Razvojno okruženje koje smo koristili je Visual Studio Code. U nastavku ćemo
prikazati i opisati sve stranice posebno.

3.1. Stranica krofne

Stranica Krofne, koja je ujedno I početna stranica našeg sajta, prikazuje krofne
koje su u ponudi. Klikom na neku od krofni sa leve strane, sa desne strane
korisniku će se prikazati detaljniji opis svake krofne i uvećana slika. Kako bi
korisničko iskustvo bilo potpuno uvećana krofna prati kretanje korisnika po datoj
stranici.

Slika 2- Stranica Krofne, ujedno i početna stranic

7
Slika 3- Ovde bi trebalo da se vidi kako se skrolovanjem ekrana pomera i detaljan opis selektovane krofne

8
 3.2 Stranica O nama

Na ovoj stranici potrošače smo upoznali sa vizijom I misijom kompanije

Slatkoteka, kao I procesom izrade krofni I standardu kojem kompanija Slatkoteka
teži.

Slika 4- Stranica O nama

9
 3.3. Kontakt stranica

Na ovoj stranici nalaze se kontakt podaci I adresa koja se takodje može videti I na
mapi. Sadrži I podatke o cenama dostave u vidu tabele u zavisnoti od zone u kojoj
se potrošači nalaze. Pored toga tu je I kontakt forma koja omogućava potrošačima
da kontaktiraju Slatkoteku kako bi ostavili svoje predloge, sugestije, kontakt
informacije. Onemogućeno je da se forma prosledi ukoliko podaci nisu pravilno
uneti, kako bi se smanjile spam poruke.

Slika 5- Kontakt stranica

10
 3.4. Stranica Omiljene

Stranica Omiljene je dinamička forma koja omogućava potrošačima da sami

kreiraiju svoju listu sa njihovim najomiljenijem proizvodima. To mogu učiniti na dva
načina, tako što će kliknuti na sliku ili naziv krofne sa leve strane ili tako što sami
unesu naziv I zatim kliknu na dugme dodaj. Ukoliko se predomisle ili slučajno
pogreše podrazumeva se da imaju mogućnost da obrišu element iz liste, a to
mogu uraditi na dva načina, tako što će kliknuti na element liste a zatim na dugme
obriši ili tako što će ukucati naziv elementa koji žele da obrišu a zatim kliknuti na
već pomenuto dugme obriši.

Slika 6 - Omiljene stranica

11
 4. Zaključak

Angular nije najjednostavniji framework i potrebno je vreme za razumevanje nekih

njegovih najsloženijih koncepata, međutim jednom kada se razume, toliko stvari je
moguće uraditi sa veoma malo koda. Još jedna od prednosti je to što je
dokumentacija neverovatno dobra, testiran je i koriste ga milioni developera.
Angular zajednica je ogromna pa je pomoć lako dostupna preko Google
pretraživanja, Stack Overflow-a i širom interneta.

Od toga da omogućava timovima da prave sjajne aplikacije njegove prednosti idu

do toga da osnažuje developere da prave aplikacije za različite platforme. Takođe
početna struktura je ista za svaku komponentu što obezbeđuje konzistenciju kada
više ljudi radi na razvoju neke aplikacije. Pored toga veoma je bitno što ovaj
Framework iza sebe ima veoma posvećen tim koji konstantno radi na njegovom
održavanju.

12
 5. Literatura

[1] https://www.codeschool.com/beginners-guide-to-web-development/single-page-
applications, 21.1.2021.
[2] https://developer.telerik.com/topics/web-development/what-is-angular/ , 21.1.2021.
[3] https://en.wikipedia.org/wiki/Angular_(application_platform)#History, 21.1.2021.
[4] https://en.wikipedia.org/wiki/AngularJS , 21.1.2021.

13