What is the difference between $Digest and $apply?

Question

In Angularjs, we have two methods that execute the $watchers synchronously: $digest and $apply.

I’d like to ask a few questions:

• What’s the difference between them?

• When I should wear one or the other?

Answer 1

Hello, I will try to answer this question using the concepts presented in the book: Angularjs Up & Running(Shyam Seshadri & Brad Green) and in the Angularjs documentation found itself here.

Angularjs Lifecycle

---

First we need to understand what happens in an Angularjs application when it is started.

Let’s abstract all the part that browser read what is written, Assets, html on your page and let’s skip straight to the part where the event is shot document.ready where, on a non-manual startup, Angularjs will search through the DOM for the ng-app, or using the angular.bootstrap, is specified manually where the application(s) (s) will (not) execute.

After finding the ng-app, Angularjs will start its "magic" which is the step where what is in the current context is compiled, in this process the code defined in the found directives is executed, and at the end of each execution is generated the function link of their respective Directives.

With the functions link generated the Angularjs combines them with our known scope, which contains the variables and contents needed to generate our UI, with the combination is generated to view, which is what the user will see and interact with. This step also instantiates the scope of each controller and subcontroller, and now that the part we want comes in... "It’s him we want...", this is where our friends come in: watcher and listener, Angularjs will create one for each directive it has found and compiled, so our beloved framework knows where to find each thing and what data to link to that directive.

All right, so far so good... but how he updates everything dynamically??

The Digest Cycle

---

Good to keep everything up to date Angularjs uses a very smart strategy. How do we know the model of the application does not update randomly, it will change in response to events (requests, clicks, focuses...), so the add Angularjs watchers to all binds and ng-models and the same can verify if the values contained in that scope differ from what is in the UI, and so can update it,

But he doesn’t stay in one loop checking every second if everything is updated.

Probably any "normal" person would lean towards this idea, but obviously this is quite inefficient.

As has been said, our model does not update randomly, but there are certain actions that will probably modify it, so each ng-model that can change has its respective watcher and whenever an event is triggered the Angularjs checks the watchers and bidings looking for changes and making the necessary updates, and this operation is called

Digest Cyle.

The digest cycle is what keeps our application’s UI up to date, and the work it does can be explained in the following steps:

• Whenever an event that can change the model shoots, the Angularjs executes the digest cycle.

• The digest cycle starts with $rootScope and checks each scope to see if there is any difference with what is in the UI.

• If everything is ok in the current scope it recursively goes up to its parent scope by checking all adjacent until the end.

• If by chance Angularjs finds that a watcher reported a difference it is reset.

• It restarts as a change can modify a state of a watcher previously checked, and thus trigger several others, it only stops when all the watchers do not report modification.

To prevent an infinite loop the Angularjs restarts the digest only 10 times.

• All UI updates are accumulated and once the cycle is stabilized, all updates are applied.

Image to better understand this whole cycle:

SOURCE: https://stackoverflow.com/questions/50594246/is-there-a-config-option-to-lower-the-amount-of-angularjs-1-x-digest-cycles

$Scope. $apply() and $Scope. $Digest()

The similarity between these two methods is basically calling what was explained earlier, the Digest Cycle, the difference between them is based on the scopes.

While $Scope. $apply() forces the execution of digest cycle direct from $rootScope (Basically all current application) the $Scope. $Digest() forces the execution of digest only in the current scope.

With this in mind it is possible to imagine in which cases it is good or not to use $Scope. $apply() and $Scope. $Digest(), the tip is: In certain cases we don’t need to check all the watchers of our application, only the current scope.

Care must be taken when using third party components that use a life cycle different from its application, in which case it is best to use the $scope.$apply() because the update should be done through the $rootScope, and not just in the current scope with the $scope.$digest().