AngularJS

AngularJS

Програмер(и)	Brat Tech LLC, Google i zajednica.
Прво издање	20. октобар 2010. (2010-10-20)
Стабилно издање	1.6.6 / 18. август 2017. (2017-08-18)
Репозиторијум	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. 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 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. 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, nakon učitavanja objektnog modela dokumenta (engl. DOM):

1. Kreiranje novog ubrizgavača
2. Kompilacija svih direktiva
3. 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, 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).

Vidi još

• Backbone.js
• Ember.js
• KnockoutJS

Spoljašnje veze

• Zvanični veb-sajt
• AngularJS 2.0 Preview
• AngularJS Modules Repository