Insights >Blog

AngularJS functionalities: $digest() vs. $apply()

Alan Buscaglia


August 9th, 2018

Developers use $scope.apply() extensively. But do you know why is it used and when should it be used?

AngularJS functionalities

JavaScript is a shift-based language. What does this mean? It means that the code runs in shifts and while running nothing can interrupt it, and only the browser works.

Therefore, it may take a while when we have an Ajax call, we set a callback function to finish the shift, and we create a new one when the event we are waiting for happens. The callback will be executed at its completion.

For example:

function letsWaitALittle() {
    alert("i've waited enough, i'm calling this one");
}
setTimeout(letsWaitALittle, 5000);

The first JavaScript executes a single shift to load the code, and it finds a setTimeout function so it establishes a timeout. When the code is fully loaded, if necessary, the browser will update the DOM. If an error occurs, the screen will remain blank. After 5000 milliseconds, a new shift is created for the letsWaitALittle function that we created.

How does AngularJS make the union we all love?

When you link an element of the view to a variable in the $scope object, AngularJS creates an internal clock so that you can see any change in the variable. The function we are talking about is $scope.watch().

While our application is running, AngularJS calls the function $scope.$Digest(). This checks all the clocks and verifies if any of the observed variables have changed; if one of them has changed, the corresponding listening function is called. The listener function executes the code defined within it. For example: if our variable is a chain that has been linked to spam and changes, the watch will call a listener function (and this will change the content of the spam with the new chain within our variable). We can easily say that the function $digest() is responsible for activating the update.

If $digest() is responsible for the update, what would be the $apply() functionality that we use?

$apply() takes a function or chain of expression AngularJS, and then calls the function $digest() so that all our watchers are reviewed.

When should we use it? When we change a variable, AngularJS automatically takes control of what needs to be done. For example ng-click, ng-class, etc. are events that are contained in $scope.$apply().

As we have seen before, JavaScript is a shift-based language, so what happens when AngularJS does not know we are creating a new shift? That’s when we use $apply(), for example, if we use setTimeout () we will create a new shift that calls a function when the time runs out, AngularJS does not know about this new shift, so anything we do in the function will not be reflected in the DOM, and that’s when you should use $scope.$apply ().

For example:

setTimeout(function (){
    $scope.$apply(function (){
      $scope.domtext = "i've waited enough, i'm calling this one";
   });
},5000);
Another way:
setTimeout(function (){
$scope.domtext = "i've waited enough, i'm calling this one";
$scope.$apply();
},5000);

These two will achieve the same results, but what happens if we make a mistake and make a syntax error?

If the code is not within the $apply() function, like the second example, the error will be thrown out of AngularJS, and if there is an error in your application, it will not work and notification will not be given.

$apply() has a try / catch in it, so the error is always detected and the $digest() will continue, this continuation of the function $digest() is done due a “finally” clause.

I hope this has been a helpful overview of some of the key functionalities in AngularJS. And make sure to check out my previous blog which provides an introduction to AngularJS.

Share

Related posts

See also

Services

Software development

Software testing

Consultancy & innovation

User experience

Industries

Fintech

Media & entertainment

Healthcare

All industries

Insights

Blog

Whitepapers

Webinars

Videos

Why Belatrix?

International presence

Nearshore advantages

Project governance

Agile expertise

Flexible engagement models

Our talent development