Izdelava spletnih aplikacij z ogrodjem Angular

63 Pages·2017·0.78 MB·Slovenian

Univerza v Ljubljani
Fakulteta za racˇunalniˇstvo in informatiko
Vid Stoschitzky
Izdelava spletnih aplikacij z ogrodjem
Angular
DIPLOMSKO DELO
ˇ ˇ
VISOKOSOLSKI STROKOVNI STUDIJSKI PROGRAM
PRVE STOPNJE
ˇ ˇ
RACUNALNISTVO IN INFORMATIKA
Mentor: viˇs. pred. dr. Aljaˇz Zrnec
Ljubljana, 2017
Copyright. Rezultati diplomske naloge so intelektualna lastnina avtorja in
Fakultete za raˇcunalniˇstvo in informatiko Univerze v Ljubljani. Za objavo in
koriˇsˇcenje rezultatov diplomske naloge je potrebno pisno privoljenje avtorja,
Fakultete za raˇcunalniˇstvo in informatiko ter mentorja.
Besedilo je oblikovano z urejevalnikom besedil LATEX.
Fakulteta za raˇcunalniˇstvo in informatiko izdaja naslednjo nalogo:
Tematika naloge:
Angular je zelo hitro po njegovem nastanku postal eden od najbolj upora-
bljenih ogrodij za izdelavo spletnih aplikacij. Prednosti izbire tega ogrodja
so hitra in odzivna konˇcna reˇsitev. Prav tako je izdelano spletno apli-
kacijo enostavno vzdrˇzevati, saj je koda napisana v stilu komponent. V
okviru diplomske naloge primerjajte ogrodje Angular z ogrodjem AngularJS
in knjiˇznico React ter izdelajte spletno aplikacijo za iskanje igralcev za re-
kreativne ˇsportne dejavnosti v tem ogrodju.

V prvi vrsti se zahvaljujem mentorju viˇs. pred. dr. Aljaˇzu Zrnecu, za vse
nasvete in pomoˇc pri izdelavi celotnega diplomskega dela. Prav tako se zahva-
ljujem svoji druˇzini, prijateljem in vsem, ki so mi tako ali drugaˇce pomagali
z nasveti.

Kazalo
Povzetek
Abstract
1 Uvod 1
2 Ogrodja za razvoj spletnih aplikacij 3
2.1 Lastnosti spletnih aplikacij . . . . . . . . . . . . . . . . . . . . 3
2.2 Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4 React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3 Razvoj spletne aplikacije 13
3.1 Opis aplikacije . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2 Uporabniˇske zahteve . . . . . . . . . . . . . . . . . . . . . . . 15
3.3 Naˇcrtovanje aplikacije . . . . . . . . . . . . . . . . . . . . . . 16
3.4 Podatkovni model . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.5 Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.6 Implementacija spletne aplikacije . . . . . . . . . . . . . . . . 20
3.7 Uporaba zbirke PrimeNG . . . . . . . . . . . . . . . . . . . . 30
4 Primerjava Angular ogrodja z ostalimi 33
4.1 Primerjava ogrodja Angular z ogrodjem AngularJS . . . . . . 34
4.2 Primerjava ogrodja Angular s knjiˇznico React . . . . . . . . . 36
4.3 Primerjava orodij po kriterijih . . . . . . . . . . . . . . . . . . 39
4.4 Ugotovitve . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5 Zakljuˇcek 43
5.1 Izboljˇsave aplikacije SportPlayer . . . . . . . . . . . . . . . . . 44
Literatura 47
Seznam uporabljenih kratic
kratica angleˇsko slovensko
JS JavaScript JavaScript
HTML Hyper Text Markup Language jezik za oznaˇcevanje hiper be-
sedila
CSS Cascading style sheets Kaskadne stilske predloge
DOM Document object model Dokumentni objektni model
API Application Programming In- Vmesnik za programiranje
terface
ID Identification Identifikator
CLI Command-line interface Vmesnik ukazne vrstice
JSON JavaScript Object Notation objektna notacija JavaScript
HTTP HyperText Transfer Protocol protokol za prenos hiperteksta
XML Extensible Markup Language razˇsirljiv oznaˇcevalni jezik