AngularJS

AngularJS
Програмер(и)	Brat Tech LLC, Google i zajednica.
Прво издање	20. октобар 2010.; пре 14 година
Стабилно издање	1.6.6 / 18. август 2017.; пре 7 година
Репозиторијум	github.com/angular/angular.js;
Написан у	JavaSkript
Платформа	višeplatformski
Величина	144 KB; (1 MB razvojna verzija)
Тип	JavaSkript biblioteka, frejmvork za kreiranje jednostraničnih aplikacija
Лиценца	MIT licenca
Веб-сајт	angularjs.org

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).