What is the digest cycle in AngularJs?
- Before starting, we need to know a few terms related to Digest cycle. They are AngularJs watch, watch counts, and watch list.
- AngularJs watch: It is provided by AngularJs Framework to keep track of scope variables and the change in their values. Watches are automatically created by AngularJs Framework. It is usually done for data bindings and for which variables are decided by AngularJs Framework. Custom functions that are created for watches are called watch listeners.
- Watch counts: If watch count is below 2000, performance is better. We may use Angular watchers extension to count them. Angular performs watching on data-binded variables but if we want we can perform watch on normal variables as well, using watch function. It takes parameter the variable that we explicitly want to watch.
- Watch list: Maintains a list of all the watches associated with an angular application. i.e all the data bindings being monitored. A watch list is maintained for all scopes including root.
Digest cycle
-
Watches keep on updating new values and update DOM thus render the changes. This process is responsible for walk-through entire watches for changes.It performs dirty checking over the watches present in the watch-list. Dirty checking is to check the current values of variables from their previous values.
- Watch listeners are automatically executed whenever the digest process finds any modifications in the variables. It keeps note of changes and then notifies AngularJs Framework to update DOM. Thus at the end of every digest process, DOM is updated.
- Angular Context is a runtime environment of AngularJs Framework.
-
First digest process performs a dirty check on watches, and checks if there are any modifications
It again performs the second cycle of dirty checking on the previous cycle, watches listeners. Because there may have been variables that have got changed by others. Minimum 2 iterations are performed and the maximum 10 can run. Although it is preferred to minimize the digest cycle for better performance. Error is thrown after maximum.
First level and second level updating
An example for second level updates:
$scope.a = 1; $scope.b = 2; $scope.c = 3; $scope.$watch('a', function( newValue, oldValue ) { if( newValue != oldValue ) { console.log("a is modified to " +newValue ); } }); $scope.$watch('b', function( newValue, oldValue ) { if( newValue != oldValue ) { console.log("b is modified to " +newValue ); } }); $scope.$watch('c', function( newValue, oldValue ) { if( newValue != oldValue ) { console.log("c is modified to " +newValue ); if( $scope.c > 50 ) { $scope.a = 1000; } } }); $rootscope.$watch( function() { console.log(" digest iteration started "); }); |
Considering scope variables a, b, c are data binded and are eligible for the digest process. If we inspect the angular application in the browser and open the console. We can track the changes as the print statements will help us. Suppose there was a two way binding for c with an input box we could easily track the number of times it gets modified. In fact, we can inspect the digest process too, by applying $watch function on $rootscope.
$watch: This function takes three parameters- watch expression, listener and object equality. Except for expression the other two are optional.
$scope.$apply(function() { });
Complete scenario of Digest cycle: