AngularJS - Understanding digest cycle (digest phase or digest process or digest loop)

By: Tech CBT

254   2   26882

Uploaded on 10/11/2016

-What is AngularJS Watch and Watch list
-How are scopes associated to Watch list
-What is Angular Context
-What is digest cycle
-What are digest iterations (min and max)
-When are Watch listeners executed
-What is digest process / phase in Angular JS
-When does digest process kick in
-What events may kick in digest process
-How are digest process / iterations, watch list and scope related
-At what point DOM gets updated / rendered
-What is Event loop

Comments (4):

By anonymous    2017-09-20

I found very in-depth videos which cover $watch, $apply, $digest and digest cycles in:

Following are a couple of slides used in those videos to explain the concepts (just in case, if the above links are removed/not working).

Enter image description here

In the above image, "$scope.c" is not being watched as it is not used in any of the data bindings (in markup). The other two ($scope.a and $scope.b) will be watched.

Enter image description here

From the above image: Based on the respective browser event, AngularJS captures the event, performs digest cycle (goes through all the watches for changes), execute watch functions and update the DOM. If not browser events, the digest cycle can be manually triggered using $apply or $digest.

More about $apply and $digest:

Enter image description here

Original Thread

By anonymous    2017-09-20

Angular defines a concept of a so called digest cycle. This cycle can be considered as a loop, during which Angular checks if there are any changes to all the variables watched by all the $scopes. So if you have $scope.myVar defined in your controller and this variable was marked for being watched, then you are explicitly telling Angular to monitor the changes on myVar in each iteration of the loop.

Basically AngularJS binds event handlers to any element that interacts with Angular ($scope, directive, ...), every time the event fires, $apply is called which internally calls $digest which will trigger the re-evaluation of all the $watches.

AngularJS made a smart assumption that model changes happen only on user interaction / events:

  • DOM events
  • XHR responses firing callbacks
  • Browser's location changes
  • Timers (setTimout, setInterval) firing the callbacks

Or trigger on certain events

  • Input directives+ngModel, ngClick, ngMouseOver etc.
  • $http and $resource
  • $location
  • $timeout

enter image description here

When one of these 'assumptions' is triggered, the digest cycle is kicked off:

To quote Pawel Kozlowski, Mastering Web Application Development with AngularJS:

AngularJS does not use any kind of polling mechanism to periodically check for model changes

More detailed insights

Have a look at https://www.youtube.com/watch?v=SYuc1oSjhgY for a really deep dive into the digest cycle.

Original Thread

Submit Your Video

If you have some great dev videos to share, please fill out this form.