Explain Digest cycle, watchers and dirty checking?

devquora
devquora

Posted On: Feb 22, 2018

 

AngularJS is an MVC framework and one of it’s most powerful feature is two-way data binding, which means that model and view are in sync all the time. If there is a change in the model value, the view gets updated automatically. Angular achieves this by running a loop known as digest cycle. Digest cycle goes through the following steps to update the view if a model has changed or vice versa :

  • Step 1: Whenever an end user triggers some kind of event like typing, button click etc, such an activity leads to the change of model data.
  • Step 2: Angular framework then checks whether the old value and the new value are same. If the values have not changed, it does nothing but if the values have changed then Digest cycle gets invoked.
  • Step 3: Digest cycle then runs through all the scope objects of the controller and checks whether any scope object has been affected due to the model change. Every scope object has watchers, these watchers listen whether the model has changed or not.Digest cycle informs these watchers about model change and then finally these watchers synchronize the view with the model data.
  • Step 4: When watchers synchronize the view with the model data, there is a possibility that model may get updated again. To make sure that this change in model gets synchronized with the view, angular runs the digest cycle once again. This second loop of digest cycle is termed as “Dirty Checking”.

    Related Questions

    Please Login or Register to leave a response.

    Related Questions

    AngularJS Basic Interview Questions

    What is AngularJS?

    AngularJS is a javascript framework which helps in developing web applications in MVC architectural pattern & SPA or..

    AngularJS Basic Interview Questions

    What are angular directives?

    Angular directives are the attributes which are decorated on the html tags or elements of an html page. Directives have ..

    AngularJS Basic Interview Questions

    What are custom directives?

    Angular provides the ability to create our own directives to implement our own custom templates or logic in our web appl..