Klijentske web-aplikacije i Angular

Abstract

U ovom diplomskom radu predstavljeni su dijelovi i arhitektura razvojnog okvira Angular. Upoznali smo se sa programskim jezikom TypeScript, te smo istaknuli neke razlike između njega i jezika od kojeg je nastao i u kojeg se prevodi, JavaScript-a. Opisali smo komponente, osnovne građevne jedinice Angular-a, te način na koji se komponente pakiraju u module. Sintaksu Angular-a smo upoznali i kroz predloške, tj. HTML datoteke obogaćene dodatnim direktivama koje Angular koristi za prikaz komponente na ekranu. Kako bismo lakše prikazali funkcionalnosti Angular-a, kreirali smo web aplikaciju za prikaz vremenske prognoze. Web aplikacija sa servera dohvaća podatke o vremenskim prognozama, a koje je server već ranije pohranio u svoju bazu podataka koristeći više web-servisa specijaliziranih za vremenske prognoze. Zatim međusobno uspoređuje podatke sa različitih web servisa, a vremenske prognoze iz prošlosti uspoređuje sa stvarnim podacima o vremenu. Na taj način mogu se usporediti točnosti prognoza pojedinih web servisa. Osim sa komponentama i predlošcima, kroz aplikaciju smo se upoznali i sa usmjernikom, tj. dijelom Angular-a koji koristimo za navigaciju kroz komponente.In this thesis we presented parts and architecture of the Angular framework. We introduced the TypeScript programming language, and we highlighted some differences between TypeScript and the language from which it originated and to which it compiles – JavaScript. We described components, the basic building blocks of Angular, and how the components are packed into modules. We got acquainted with Angular syntax through templates – the enriched HTML files that Angular uses to display the components on the screen. To make it easier to show Angular features, we created a web application for displaying weather forecasts. The web application retrieves weather data from the server, which has already downloaded it from multiple web services and stored it in a database. The web application then compares the data from different web services, and it also compares the past weather forecasts with actual, measured data. This way we can compare the accuracy of individual web services. Apart from the components and templates, through the app we also studied the router – a part of Angular that is used for navigation between components