Subscribe to our Newsletter

Receive our news and insights

Blog / Technology  

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

A Picture of Alan Buscaglia
By:
August 09, 2018 | Topic: Technology  
AngularJS functionalities: $digest() vs. $apply()

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.

The chatbot revolution

Related Services

TRENDING TOPIC

Software Product Development  

How to easily integrate AngularJS with Visual Studio 2015

By

November 19 / 2014

1 Stars2 Stars3 Stars4 Stars5 Stars
Loading...

In light of some of the major changes occurring at the moment within Microsoft, the forthcoming release of Visual Studio 2015, along with .NET 2015, promises to be particularly...

Read post

HOT
TOPIC