Izvedba MVC arhitekture primjenom AngularJS razvojnog okvira i TypeScripta Klobučar, Marko Undergraduate thesis / Završni rad 2017 Degree Grantor / Ustanova koja je dodijelila akademski / stručni stupanj: University North / Sveučilište Sjever Permanent link / Trajna poveznica:https://urn.nsk.hr/urn:nbn:hr:122:509085 Rights / Prava:In copyright / Zaštićeno autorskim pravom. Download date / Datum preuzimanja:2023-02-01 Repository / Repozitorij: University North Digital Repository Završni rad br. 558/MM/2017 Izvedba MVC arhitekture primjenom AngularJS razvojnog okvira i TypeScripta MarkoKlobučar,0316/336 Varaždin,rujan2017. godine Praznastranicaizmeđudvijenaslovnestrane. Multimedija, oblikovanje i primjena Završni rad br. 558/MM/2017 Izvedba MVC arhitekture primjenom AngularJS razvojnog okvira i TypeScripta Student MarkoKlobučar,0316/336 Mentor VladimirStanisavljević,mr.sc. Varaždin,rujan2017. godine Sadržaj 1. Uvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.1 Opojmuarhitektureusoftverskomrazvoju . . . . . . . . . . . . . . . . . . . . . 2 1.2 PovijestMVCarhitekture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3 OpisMVCsoftverskearhitekture . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2. TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.1 PovijestTypeScript-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.2 MogućnostiTypeScript-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.2.1 Tipovipodataka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.2.2 letnaspramvar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2.3 KlaseuTypeScriptu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.3 UsporedbaTypeScriptasostalimjezicima . . . . . . . . . . . . . . . . . . . . . . 13 3. AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.1 PovijestAngularJSrazvojnogokvira . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.2 MogućnostiAngularJSrazvojnogokvira . . . . . . . . . . . . . . . . . . . . . . . 15 3.3 GlavnidijeloviAngularJS-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 3.3.1 Moduli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 3.3.2 Rute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 3.3.3 Kontroleri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.3.4 Direktive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.3.5 Servisi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 3.4 UsporedbaAngularJS-askonkurencijom . . . . . . . . . . . . . . . . . . . . . . 26 3.5 InstalacijaAngularJS-aiTypeScripta . . . . . . . . . . . . . . . . . . . . . . . . 27 3.5.1 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 3.5.2 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 4. Praktičniprimjeraplikacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 4.1 GoogleFireBase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 4.2 Razvojnaokolina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 4.3 Osnovaaplikacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 4.4 Predočaji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 4.4.1 Naslovnastrana . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 4.4.2 Kviz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 4.4.3 Rezultati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 4.5 Komponente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 5. Zaključak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 6. Popisslika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 7. Popistablica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 8. Popiskoda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 9. Popisliterature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Predgovor ZahvaljujemseTihomiruDmitroviću,nanjegovomstrpljenjuivoljizapodučavanjem. ZahvaljujemseprofesoruVladimiruStanisavljeviću,namentoriranjuovograda. Zahvaljujemsesvimsvojimprijateljimananeprestanojpodršciibodrenjuumojimnaporima. Ali ponajprije, zahvaljujem se svojoj supruzi, bez koje nikada ne bih zakoračio u svijet programi- ranja. Hvalavam. Sažetak Internetjemjestobogatosadržajem,odsvogzačećapogonjenjednimoddanasnajpopularnijih jezika – JavaScriptom. Međutim, JavaScript nije bez mana, pa su kao odgovor na mnoštvo nje- govih problema nastale nebrojene programske zbirke, razvojni okviri, pa čak i čitavi novi jezici. Danas, jedan okvir i jedan jezik su postali popularniji od drugih, a to su AngularJS framework i TypeScript jezik. Ovaj rad predstavit će njihove prednosti, mane i primjere istih. Isto tako, rad pokazuje kako napisati bogate web aplikacijem putem MVC arhitekture, koja je dizajnirana radi lakšeg održavanja tijela kôda. Kombinacijom tih tehnologija i uzoraka moguće je na lakši i bolji način stvoriti web aplikacije bogate sadržajem, na primjeru jednostavne web aplikacije za pomoć priodabirumehaničkogprekidačazatipkovnicu. Ključneriječi: Razvojniokvir,deklarativnoprogramiranje,klase,objekti Abstract Theinternetisaplacerichwithcontent,whichhas,sinceitsinception,beenpoweredbyoneof today’smostpopularprogramminglanguages–JavaScript. However,JavaScriptisnotwithoutits share of flaws. As a response to that, there have arisen countless libraries, frameworks, and even entirely new languages. Today, one framework and one language have risen above others, and they are the AngularJS framework and TypeScript language. This paper aims to introduce their advantages,flawsandtoprovideexamples. Inaddition,thispapershowshowtodesignandwrite richwebapplicationsviatheMVCarchitecture,whichhasbeendesignedtoeasethemaintenance of large bodies of code. Utilizing a combination of the aforementioned technologies and patterns, it is possible to more easily and efficiently create web applications rich in content, based on an examplewebapplicationdesignedtohelpwithchoosingamechanicalkeyboardswitch. Keywords: Framework,declarativeprogramming,classes,objects Popis korištenih kratica HTML HyperText MarkupLanguage Hipertekstualnioznačnijezik DOM DocumentObjectModel Objektnimodeldokumenta URL UniformResourceLocator Ujednačenilokatorresursa npm NodePackageManager Node-ovupraviteljpaketa Pojmovnik Engleski Hrvatski Pattern Uzorak Interface Sučelje Namespace Imenskiprostor Framework Razvojniokvir Two-waybinding Dvosmjernovezivanje Dirtychecking Brzinskaprovjera Modular Sastavan Model Ogled View Predočaj Controller Upravljalo Separationofconcerns Odvajanjebriga Inversionofcontrol Obrtanjekontrole UniformResourceLocator Jedinstvenilokatorresursa Expression Izraz