AngularJS

Unutar svakog AngularJS template-a nalaze se directives i data bindings. Dirketive su AngularJS atributi ili tagovi (ng-app, ng-repeat, ...), a data bindings su varijable unutar dvostruke vitičaste zagrade npr. {{varijabla}}

Osnovno pokretanje AngularJS aplikacije odvija se u nekoliko faza:
1. Korisnik šalje zahtjev za stranicom na server.
2. Server šalje template u browser.
3. Template učitava angular.min.js, čeka da stranica bude potpuno učitana, te traži ng-app kako bi odredila granice template-a
4. Angular prolazi kroz code i traži direktive i data bindings u template-u što rezultira učitavanjem početnih podataka u data bindings te učitava event listenere. Sve se to šalje u browser kao DOM te se kreira početni View.
5. Nakon toga naknadno se mogu učitavati podaci sa servera unutar View stranice.

Važno je uočiti da su template i podaci razdvojeni te da se zasebno šalju sa servera u browser. To može biti sinkrono (u isto vrijeme) ili asinkrono. Dakle, na ovaj način se podaci učitavaju zasebno kao i ostali resursi kao što su slike,CSS, Javascript, ...itd.

Prikaz teksta

U template-u se pomoću bindingsa prikazuju podaci iz Modela. Bindigs u template-u mogu biti:

1. {{varijabla}} - dvostruka vitičasta zagrada
2. <p ng-bind="varijabla"></p> - direktiva ng-bind

Razlika je u tome što se kod velikih dokumenata može pri učitavanju pojaviti {{varijabla}} sve dok se dokument ne učita u potpunosti (npr. velike slike). Zato je za prikaz početnih podataka bolje upotrijebiti ng-bind, a za prikaz nakadnih podataka se onda može upotrijebiti {{}}.

Primjer - ng-bind i {{}}: pokreni primjer » HTML code

Form Input

Ulazna varijabla INPUT elementa se povezuje sa Modelom pomoću ng-model direktive. Pri tome se ne mora imenovati varijabla sa name ukoliko ju se ne šalje na server ili JS skriptu.
Pomoću direktive ng-model omogućeno je povezivanje sa modelom. Preko controllerovog $scope se ista varijabla šalje nazad u View. Na taj način je omogućeno istovremeno ažuriranje podatka (varijable).

Najjednostavniji primjer za ng-model:
Model definiran varijablom pokreni primjer » HTML+JS code

Model definiran objektom pokreni primjer » HTML+JS code

Primjer: Model definiran kao objekt $scope.obj . Početna vrijednost svojstva obj.ime je 'Marko'.
pokreni primjer » HTML+JS code

Primjer: Model definiran kao objekt $scope.obj . Početna vrijednost svojstva obj.broj=3. Treba ispisati broj 10x veći od unešenog.
pokreni primjer » HTML+JS code

Ispisati broj 20x veći od unesenog u INPUT:
bez ng-change ne radi pokreni primjer » HTML+JS code

sa ng-change radi pokreni primjer » HTML+JS code

Kompletan primjer sa ng-change i ng-init. Primjer povećava broj unešen u INPUT polje 20x. sa ng-change se osigurava ažuriranje pri izmjeni INPUT polja, a sa ng-init je omogućen prikaz 20x većeg broja odmah nakon učitanja SPAN elementa (onload).
pokreni primjer » HTML+JS code

GOLDEN RATIO Niz.
pokreni primjer » HTML+JS code