AngularJS $watch() , $digest() and $apply()

AngularJS $watch() , $digest() and $apply()

When you create a data binding in your view to a variable on the $scope object, AngularJS creates a "watch" internally. A watch means that AngularJS watches changes in the variable on the $scope object. These watches are created using the $scope.$watch() function.

When you register a watch you pass two functions as parameters to the $watch() function:
* A value function
* A listener function

Example :


$scope.$watch(function() {}, function() {} );
The value function should return the value which is being watched. AngularJS can then check the value returned(current value) against the last calculated value. That way AngularJS can determine if the value has changed. If yes, then the corresponding listener function executes.

Example 1:

$scope.$watch(function(scope) { return scope.data.myVar }, function() {} );

Example 2:

$scope.$watch(function(scope) { return scope.data.myVar }, function(newValue, oldValue) { document.getElementById("").innerHTML = "" + newValue + ""; } );

$digets()

The $digest cycle starts as a result of a call to $scope.$digest(). Assume that you are changing a scope model in the ng-click event, in that case AngularJS automatically triggers a $digest cycle by calling $digest(). (In addition to ng-click, there are several other built-in directives/services that let you change models (e.g. ng-model, $timeout, etc) and automatically trigger a $digest cycle.) This $digest() function iterates through all watches and checks if any of the watched variables have changed. If a watched variable has changed, a corresponding listener function is called. The listener function does whatever work it needs to do, for instance changing an HTML text to reflect the new value of the watched variable. Thus, the $digest() function is what triggers the data binding to update.

$apply()

The $scope.$apply() function takes a function as parameter which is executed, and after that $scope.$digest() is called internally. That makes it easier for you to make sure that all watches are checked, and thus all data bindings refreshed. Here is an $apply() example:
$scope.$apply(function() { $scope.data.myVar = "Another value"; });
$apply() is called only for those model changes which are done inside AngularJS’ context. Angular’s built-in directives already do this so that any model changes you make are reflected in the view. However, if you change any model outside of the Angular context, then you need to inform Angular of the changes by calling $apply() manually. It’s like telling Angular that you are changing some models and it should fire the watchers so that your changes propagate properly. For example, if you use JavaScript’s setTimeout() function to update a scope model, Angular has no way of knowing what you might change. In this case it’s your responsibility to call $apply() manually, which triggers a $digest cycle. At a minimum, $digest will run twice even if your listener functions don’t change any models. The $digest cycle keeps looping until there are no more model changes, or it hits the max loop count of 10
$apply invokes $digest on rootScope and it means that it reevaluate all watchers in all available scope and this may cause a performance hit for large scope hierarchy.
$digest() is used to re-evaluate specific scope and its children.

Comments

Post a Comment

Popular posts from this blog

SSL Certificate authentication in ASP.NET Core

Have you ever wondered, even though you added a certificate to HttpClient while accessing data from the Api service, why you are getting unAuthorized access or your Api is not working as expected? Answer to the above question is that the certificate exchange is done at the start of the HTTPS conversation, it's done by the server before the first request is received on that connection. So the right place to add a certificate to HttpClient is the Program.cs or StartUp.cs file. Microsoft.AspNetCore.Authentication.Certificate contains an implementation similar to Certificate Authentication for ASP.NET Core. Certificate authentication happens at the TLS level, long before it ever gets to ASP.NET Core. More accurately, this is an authentication handler that validates the certificate and then gives you an event where you can resolve that certificate to a ClaimsPrincipal. Implement an HttpClient using a certificate and IHttpClientFactory In the following example, a client certificate is
Read more

Belekeri, Karwar Beach Photos

Image
Belekeri Beach : Situated 8 kms away from Ankola is an old port of Belekin with the long stretches of unexplored beaches. Situated at the bay of the river Belekin. The place has two temples of Jenubeera and Ishwara and also an old inscription dating back to the 15th century. Belekeri Port was a good port during the time of British, and managenese ore was being exported from here. The beautiful beach here attracts many tourists
Read more

Publish an Angular with .NET CORE app to IIS on AWS Cloud EC2 instance

I faced a few challenges while publishing my application(Front end on Angular 13, Backend is .NET CORE 6) to IIS on AWS EC2 instance using Custom Identity. So I thought of sharing this post which will help you to fix the issue quickly. It is a straight forward process to publish an application to IIS without using custom identity and many are already aware of this process. When we create an Application Pool by default it uses Application Pool Identity. In many cases we can not use Application Pool Identity. For example if your application is accessing web share or network share then your application needs to have required permission to access these shares. In this case you will have to create a Service Account and provide necessary permission to your Service Account to access these shares. Then you need to use this Service Account as Identity instead of Application Pool Identity to set up your application. However if you want to use another identity then we have to make sure your new i
Read more