AngularJS

Već smo ranije rekli da AngularJS automatski ažurira svaku izmjenu unutar View-a i Modela. Pomoću $watch servisa možemo dodatno svakoj izmjeni podatka u Modelu pridružiti nekekavu funkciju, metodu tj. nekakvu dodatnu radnju.

Sintaxa: $scope.$watch(promatranaVar , fja(newVal,oldVal), deepWatch) gdje je:
promatranaVar - varijabla, svojstvo, niz ili cijeli objekt koji promatramo da li ima izmjenu
fja(newVal,oldVal) - funkcija, metoda koja se aktivira ako se desila izmjena u promatranaVar. Za ulazne argumente može uzeti novu i staru vrijednost promatrane varijable promatranaVar. Ali može se korisiti i samo fja() bez ulaznih argumanata.
deepWatch - je bool koji određuje da li će se nadzirati sva svojstva objekta promatranaVar

Jednostavan primjer upotrebe $watch:
pokreni primjer » HTML+JS code

Primjer upotrebe $watch gdje se koristi stara oldVal i nova vrijednost newVAl. Primjer NE RADI DOBRO jer se pri svakom tipkanju dolazi do promjene pa oldVal se ažurira prije nego što treba.
pokreni primjer » HTML+JS code

Primjer upotrebe $watch gdje se koristi stara oldVal i nova vrijednost newVAl. Primjer RADI DOBRO jer se upotrijebio BUTTON i ng-click.
pokreni primjer » HTML+JS code

Jednostavan primjer upotrebe deepWatch-a:
pokreni primjer » HTML+JS code

Kako rade $digest() i $apply(fja)

Način rada angular-a jest slijedeći. Browser učitava web stranicu sa servera i event model čeka da reagira ne neki korisnikov zahtjev ili event akciju. Istodobno sa učitavanjem stranice učitava se i angular.min.js tj. Angular framework te on počinje raditi. Za AngularJS je specifično to da neprestano ažurira podatke između View-a i Modela. To se zove data binding (bind=veza) jer su podaci u modelu i podaci u View vezani tj. to su jedni te isti podaci. Podaci u View predstavljaju ustvari podatke u INPUT, TEXTAREA polju, RADIO, CHECKBOX ili pak SELECT. Podaci u modelu se predstavljaju kao JS varijable, nizovi [], objekt {} ili složene varijable. $scope je objekt koji služi da poveže podatke u view i Modelu. To je zapravo 'prenositelj' varijabli.
Na koji način AngularJS zna kada je izvršena promjena podatka. U tu svrhu služi $scope.$digest() metoda (digest=probaviti). To je ustvari petlja koja provjerava da li su podaci izmjenjeni. Ta se petlja najviše može izvršavati 10x nakon čega izbacici error. To je da se spriječi beskonačna petlja. Pri svakoj iteraciji petlje provjeravaju se stare i nove vrijednosti. Ukoliko su iste petlja se zaustavlja, a ako nisu petlja se nastavlja, i to najviše 10x puta. Ako se ni 10 put stara i nova varijabla ne podudaraju onda $digest() petlja izbaci error.
Metoda $watch() provjerava da li je unutar $digest() došlo do promjene određene varijable i ako jest onda izvrši nekakvu funkciju koju posebno definiramo. Dakle $watch() je senzor.
Nasuprot tome postoji i apply() metoda koja nije senzor nego je aktuator (izvršni element). Dakle kao što smo rekli $digest() provjerava da li postoji promjena u data binding (varijabli). No međutim $digest() metodu nikada direktno ne pozivamo nego to činimo preko $apply(). Dakle $apply() aktivira $digest(). Ali niti $apply() ne treba posebno pozivati jer svakim eventom npr. ng-click ili $http automatski pozivaju $apply(), a zatim $apply() aktivira $digest().
U kojim slučajevima će se ipak morati upotrijebiti $apply()? Svaki puta kada želimo 'prisilno' ažurirati podataka Modela. Pogledajmo primjer dolje.

setTimeout() bez $apply() - NE RADI:
pokreni primjer » HTML+JS code

U gornjem primjeru neće se automatski ažurirati varijabla, nego će se morati to napisati kao u primjeru dolje.

setTimeout() sa $apply(fja) - RADI:
pokreni primjer » HTML+JS code

Drugi način je da se umjesto $apply(fja) pozove $apply() koja ažurira sve varijable tj. cijeli model, kao u primjeru dolje.

setTimeout() sa $apply() - RADI:
pokreni primjer » HTML+JS code

$eval() i $parse()

Također je važno napomenuti da postoje joše dvije metode, $eval() i $parse() koje ne izvršavaju JS nego AngularJS izraze (expressions) kao npr. {{zbroji() / 3}}

Primjer sa $eval():
pokreni primjer » HTML+JS code

Zaključak

$scope.$digest() - istodobno ažurira promjene u Modelu i u View
$scope.$watch(promatranaVar , fja(newVal,oldVal), deepWatch) - senzor koji bilježi promjene varijable i aktivira fju
$scope.$apply() ili $scope.$apply(fja) - aktuator koji pokreće $digest()