U razvoju softvera, AngularJS (često nazivan i „Angular“) je framework otvorenog koda koji održava Google i zajednica pojedinačnih programera i korporacija za rešavanje mnogih izazova prilikom kreiranja jednostraničnih aplikacija.
AngularJS biblioteka radi tako što prvo pročita HTML strane, koji ima ugrađene dodatne nestandardne tag atribute. Angular te atribute interpretira kao direktive da bi vezao ulazne ili izlazne delove stranice za model koji je predstavljen standardnim JavaScript promenjivim. Vrednosti tih JavaScript promenjivih se mogu ručno podesiti u kodu, ili mogu biti preuzete od statičnih i dinamičnih JSON izvora.
Filozofija
AngularJS je napravljen u veri da deklarativno programiranje treba da se koristi za pravljenje korisničkih interfejsa i povezivanje softverskih komponenti, dok imperativno programiranje više odgovara za definisanje aplikacione biznis logike[3]. Framework prilagođava i proširuje tradiocinlani HTML kako bi predstavio dinamički sadržaj kroz dvosmerno vezivanje podataka koje omogućava automatsku sinhronizaciju modela i view-a u MVC arhitekturi.
AngularJS je dizajniran sa ciljevima da:
Razdvoji DOM manipulacije od aplikacione logike. Na teškoću ovoga dramatično utiče način na koji je kod struktuiran
Razdvoji klijentsku stranu aplikacije od serverske strane aplikacije. Ovo omogućava rad na razvoju obe strane paralelno, i omogućava ponovnu upotrebu obe strane
Obezbedi strukturu za redosled razvoja aplikacije – od projektovanja korisničkog interfejsa, preko pisanja poslovne logike do testiranja
Angular implementira MVC arhitekturu radi razdvajanja komponenti za prezentaciju, podatke i logičkih komponenti. Koristeći zavisnost paketa, Angular donosi tradicionalne serverske servise, kao što su kontroleri koji zavise od prezentacionog sloja, na web aplikacije na klijentskoj strani. Shodno tome, veliki deo tereta na serveru se može smanjiti.
Scope
Angular koristi termin „scope“ sa nešto drugačijim značenjem nego što je to uobičajeno u kompjuterskim naukama.
Scope u kompjuterskim naukama opisuje kada je određena veza na snazi. ECMA-262 definiše scope kao leksičko okruženje koje definiše okruženje u kojem se izvršava objekat funkcije.
U Angular-u, scope je vrsta objekta[4] koja može biti unutar ili izvan dosega u određenom delu programa, prateći uobičajena pravila dosega promenjive u jeziku JavaScript kao bilo koji drugi objekat[5]. U nastavku, termin scope predstavlja vrstu Angular scope objekta, a ne doseg promenjive.
Izvršavanje
Zadaci koje izvršava AngularJS izvršavaju se u tri faze[6], nakon učitavanja objektnog modela dokumenta (engl. DOM):
Kreiranje novog ubrizgavača
Kompilacija svih direktiva
Povezivanje svih direktiva u scope
AngularJS direktive dozvoljavaju programerima da odrede specifične elemente i atribute nalik na HTML koji se mogu ponovo upotrebiti, a koji definišu povezivanje podataka i ponašanje komponenti korisničkog interfejsa. Neke od najčešće korišćenih direktiva su:
ng-app
Deklariše koren dokumenta AngularJS aplijacije, unutar koga se mogu koristiti direktive koje će povezati podatke i definisati ponašanje.
ng-bind
Postavlja text objektnog modela dokumenta na vrednost izraza. Na primer <span ng-bind="name"></span> će prikazati vrednost promenljive unutar span elementa. Bilo koja promena promenljive „name“ u aplikaciji će se istovremeno promeniti i unutar objektnog modela dokumenta.
ng-model
Slično kao i ng-bind, ali uspostavlja dvosmernu vezu između korisničkog interfejsa i scope-a.
ng-model-options
Omogućava podešavanja kako se obavljaju ažuriranja na nivou modela.
ng-class
Omogućava dinamično dodavanje klasnih atributa.
ng-controller
Definiše JavaScript klasu kontrolera koji obrađuje HTML izraze.
ng-repeat
Instancira element jednom za svaku stavku iz skupa.
ng-show & ng-hide
Uslovno prikazuje ili sakriva element u zavisnosti od vrednosti Bulovog izraza. Prikaz i sakrivanje je postignuto podešavanjem CSS svojstva „display“.
ng-switch
Uslovno instancira jedan šablon iz seta mogućih, u zavisnosti od vrednosti selekcije.
ng-view
Osnovna direktiva odgovorna za upravljanje rutama koje rešavaju JSON pre renderovanja šablona kojima upravljaju određeni kontroleri.
ng-if
Osnovna direktiva „if“ petlje koja dozvoljava prikazivanje određenog elementa ako su uslovi ispunjeni. Ukoliko uslovi nisu ispunjeni, element se briše iz objektnog modela dokumenta. Kada se uslovi ispune, klon kompajliranog elementa se ponovo ubacuje u DOM.
Dvosmerno povezivanje podataka
Angularovo dvosmerno povezivanje podataka je najvažnije mogućnost, i ona smanjuje količinu napisanog koda smanjujući odgovornosti servera u vezi sa prikazom šablona. Umesto toga, šabloni se renderuju u čistom HTML-u prema podacima koji se nalaze unutar scope-a definisanog u modelu. The $scope servis u Angularu detektuje promene modela i menja HTML izraze na korisničkom interfejsu preko kontrolera.
Isto tako, sve promene na korisničkom interfejsu se reflektuju na model. Ovo zaobilazi potrebi da se aktivno manipuliše objektnim modelom dokumenta i podstiče samostalan rad aplikacije i brzu izradu prototipa veb aplikacija. AngularJS detektuje promene u modelu poredeći sadašnje vrednosti sa vrednostima koje su sačuvane kroz raniji proces provere, za razliku od Ember.js i Backbone.js framework-a koji se aktiviraju kada nastanu promene na modelu.
Google Chrome dodatak
U julu 2012, tim koji razvija AngularJS je napravio dodatak za Google Chrome pregledač pod nazivom Batarang[7], koji poboljšava iskustvo prilikom otklanjanja grešaka na web aplikacijama kreiranim sa Angularom. Dodatak omogućava laku detekciju uskih grla aplikacije i nudi grafički interfejs za otklanjanje grešaka. Dodatak nije kompatibilan sa novijim izdanjima AngularJS-a (posle verzije 1.2.x).
