User Name:


User Email:




This information will only be saved for the purposes of communicating with those who have provided this information voluntarily regarding our services.We will never sell your name or email address to anyone.
© 2018 - First Crazy Developer (Abhishek Kumar)
  

crazydeveloper Three Pillars of AngularJS Watch,Digest and Apply

Hi, today I'd like to discuss about "How AngularJS framework work with two-way binding"? AngularJS works with three main $scope level function $watch(), $digest() and $apply(). If we want to understand, what is AngulaJS? We should know the work of  these functions. These function are core functions or we can say heart of AngularJS. Or we can say these are three Pillars of AngularJS.


Three Pillars of AngularJS

When we create two-way binding in our view on the $scope object, in same time  AngularJS create a "watch" internally with that object.

When AngularJS calls the $scope.digest() function, this function iterates through all watches and verify that  watched scope variables changed. If a watched variable has changed in that condition corresponding listener function is called and do particular defined tasks.

$scope.digest() function used to triggers the data binding need to update in scope  & scope view.

Normally AngularJS do this for us and after some interval internally called the $scope.digest() for us.

After all the above discussion we can say these three are the core concept of AngulaJS.


We have also some case where we need to call $scope.digest() manually.

So now we have an important question here: how can we do that?

$scope.apply()  function is used to call manually $scope.digest(). It is used to execute some code and after that trigger the $scope.digest().

  • $watch()

This function used to create a watch of some variables. Whenever we assigned watch with any variable we must pass two parameters with this function:

1. Value function

2. Listener function


Look at the following code:
$scope.$watch('variablename',function(newValue,oldValue){

if(newValue!=oldValue){
//Implement your logic here
    }

});

When we talk about Watch in AngulaJS we have three types of watch

1. $watch() --   It is used for normal variables
2. $watchGroup() -  It is used for group variables
3. $watchCollection - It is used for collection variables


  • $digest()

This function is called whenever AngulaJS thinks it is necessary. Whenever AngularJS called this function, it's iterates through all watches in scope  object. It call the value function for each watch and if the value returned by the function is different then the listener function for that watch is called.

Look at the following code:
$scope.$digest()

  • $apply

This function take a function as a parameter and after execute code of that function $scope.digest() function is called internally. That give you power to call manually $diget() function and verify watch variable's data.

Look at the following code :
$scope.$apply(function(){

$scope.dummyVar="test";
});



Happy reading!

Abhishek Kumar


crazydeveloper Home Page 19 May 2015

Become a Fan