AngularJS Scope Life Cycle $digest $apply

Lets try to understand concepts of $scope $apply $digest.

Angular picks up the change and then prepares a digestion (which is the internal loop which is run on the $scope member). This only takes a few milliseconds, but angular only runs this process once at a time.

You can manually kick start this process by running the $scope.$apply() method (this is useful for triggering updates when 3rd party applications do something with your webpage that angular needs to know about). Also if you set your own bindings and run the $scope.$apply() method then an exception may be thrown which may cause your code to stop (this happens when an existing digestion is going on in the background).So you will need to aware when a digestion is going on by checking the $$phase variable (this is explained below). The $apply method runs the $digest() method which is an internal method which triggers angular to poll all it’s $watch methods.

To get around the $apply exception you will need to pay attention to the $scope.$$phase flag to see if a digestion phase is going on in the background. If a phase is going on then you can just set the $scope values directly and they should get picked up by the current digestion. Here is a combined method which I use to get around this.

At the core of Angular JS is the scope life-cycle and so I wanted to take this opportunity to elaborate on some of the fundamental aspects of how scope works in Angular JS.

Few things as it relates to what I want to talk about here are:

  1. AngularJS compares a value with its previous value and if it has changed then a change event is fired. This is dirty checking in a nutshell.
  2. In AngularJS, a digest is the cycle that performs dirty checking. This is initiated via $digest().
  3. If something happens outside of AngularJS, you need to let AngularJS know to execute a digest cycle and you do that via $apply which calls $digest.

Angular.js $watch -

Angular.js $watch event is fired every time, when it detects change on a DOM attribute variable value. For a $watch expression, the listener fire every time when it detect that the current value in context is not same as the previous value. To undetstand the $watch expression we put below a simple working example.

scope.$watch(‘name’, function(newValue, oldValue) {
Console.log(“ new Value”+newValue+” old Value “+oldValue);
}

Angular.js $digest

This is the “heartbeat” of an AngularJS application. $digest processes all the watchExpressions for the current scope and its children.So what happens when a watchExpression is processed? I will get into that a bit more when I talk about watchExpressions, but basically the value of the current watchExpression is compared with the value of the previous watchExpression, and if they do not match then it is “dirty” and a listener is fired.With that said, you should not call $digest directly but call $apply which will force a $digest cycle.

Angular.js $apply

$apply enables to integrate changes with the digest cycle

You can think of the $apply function as of an integration mechanism. You see, each time you change some watched variable attached to the $scope object directly, Angular will know that the change has happened. This is because Angular already knew to monitor those changes. So if it happens in code managed by the framework, the digest cycle will carry on. However, sometimes you want to change some value outside of the Angular world and see the changes propagate normally. Consider this — you have a $scope.myVar value which will be modified within a jQuery’s$.ajax() handler. This will happen at some point in future. Angular can’t wait for this to happen, since it hasn’t been instructed to wait on jQuery. To tackle this, $apply has been introduced. It lets you to start the digestion cycle explicitly. However, you should only use this to migrate some data to Angular (integration with other frameworks), but never use this method combined with regular Angular code, as Angular will throw an error then.

see all together $apply, $digest and $$phase

its just same theory with example how to do execute safe digestion cycle

You can manually kickstart this process by running the $scope.$apply() method (this is useful for triggering updaets when 3rd party applications do something with your webpage that angular needs to know about). Also if you set your own bindings and run the $scope.$apply() method then an exception may be thrown which may cause your code to stop (this happens when an existing digestion is going on in the background).

So you will need to aware when a digestion is going on by checking the $$phase variable (this is explained below). The $apply method runs the $digest() method which is an internal method which triggers angular to poll all it’s $watch methods.

You may use the method above in any situation when you manually need to set a binding yourself which is out of the natural order of things within angular services (for example when you run any $http method then angular will pickup the changes automatically).

In the event that you wish to change the URL of the webpage, then you will have to also pay attention to the $$phase variable to see if you’re “allowed” to change the URL. If a digestion phase is going on then you can just fallback to changing the URL the old fashion way using window.location.

The digest cycle will make sure that the UI and the JS code stays synced, by evaluating every watcher attached to the all $scopes as long as nothing changes. If no more changes happen in the digest loop, then it’s considered to be finished.

Conclusion

I hope you like this if you are still having any question please post it .
Thanks,
Like what you read? Give Tarun Sharma a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.