In general, angular JS maintains the watchers for all of our scope object
variables.That is the reason how the UI or DOM gets changed based on change of
the scope variables immediately effecting other areas too wherever used(or
binded).
A very well known concept in angular JS which is very interesting is two-way
data binding, where the internal or behind the scenes the mechanism comes from
the watchers itself.
In simple watchers in angular JS is track or giving an eye whenever the
scope variables get changed and also updates in all its binded areas.
The scope variable that which had been used in the mark up or HTML will
only comes into the eye of watchers.
Let’s have a small scenario of watcher count :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('myctrl',
['$scope', function ($scope) {
$scope.Name = "Hari";
$scope.Department = "Development";
$scope.Salary = 70000;
}]);
</script>
HTML code :
<body
ng-app="myapp" ng-controller="myctrl">
Name is : {{Name}} <br />
Deparment is : {{Department}}
</body>
From the above script code our controller is having scope variable $scope.name,
$scope.dept, $scope.sal and let us assume only $scope.name, $scope.dept values had been binded as like HTML code in
the page then watchers watch only $scope.name, $scope.dept but not even
consider about $scope.sal. Hence the total count of watchers will be as 2.
Angular team also stated that having more than 2000 watchers per the page or
DOM may effect as degrading the performance of the page.
We can get the watcher count by using the chrome
extension too :
In chrome setting go to more tools >
Extensions.
Click on the “Get more extension” link.
There after we’ll get redirected to extension page of chrome , there type “angularjs
watchers” in extension search box.
Add the navish blue colored one to your chrome which I highlighted below.
After adding we will get the icon of angular in chrome as below :
Now, I’m running the below code that which we went by above code :
Now, run project and hit F12 for inspect element and find the option “$$watcher”.
The below screen show the count of watchers.
In my next article I’ll come with mannual code to count the watchers and
creating a functionality while watcher doing its work.
No comments:
Post a Comment