Angular Js Day2 - $ watch $watchcollection, $watchgroup , ng-change

$watch keeps track of a variable and its value  

<div ng-controller="mycontroller">
<input ng-model="a">
<div> {{ b }}</div>

</div>

app.controller('mycontroller',function(){
$scope.a=1;
$scope.b=2;
})

whenever a databinding with the scope variable is created , a $watch will automatically be created by the angular js framework $watch -a:1 and  $watch -b:2, And this will be used by the digest cycle . Since C is not used in any databinding , so $watch is not created for variable c.
If the value gets changes for those variable, angular performs necessary updates to the DOM elements

With the help pg $watch custom functions can be created which are called $watchListeners and this gets executed as soon a the value of the variables is changed

They are mainly used for databinding and angular Js constantly uses watchers  behind the scene

number of watchers should be kept less the 2000

There are number of ways to get the count of angular Js watchers for a particular scope , Some are third party tool like 'Batarang'. The number of watcher are created based on the number of bindings

for example in the  below code

html

 <div style="border : 2px solid blue;margin : 3px ;padding : 5px">
        <div ng-controller="watcherController">
            <h2> Angular Js $Watcher </h2>
           
            <input ng-model="a">
            <div>a= {{ a }}</div>
            <div>b= {{ b }}</div>
           
        </div>
        </div>

controllers
app.controller("watcherController",['$scope',function($scope){
    $scope.a=1;
    $scope.b=2;
    $scope.c=3;
   
}]);

There are three variables a,b,c and there are three bindings a (two way binding ) a (one way binding)

and c (one way binding) . So the number of watchers are 3 

$watch is use to watch any kind of variable explicitly for which there is no databinding machanism not available. $watch is available for both $scope and $rootScope .

$watch with true is used to do a deep watch on the all the items inside the objects

$watch  - refernce watch

$watch with true  -Equality watch 

var o ={

a:10,

b:20,

c:30

}

Now we can use Equality watch with a true value to see if a ,b,c any thing is changed or not

$watchGroup - reference watch for multiple variables

$scope.a=10;
$scope.b=20;
$scope.c=30;

$scope.$watchGroup(['a','b'],function(newValue, oldValue){
if(newValue != oldValue){
$scope.c=$scope.a+$scope.b;
}
});

$watchCollection - watches collection used to watch arrays,Detects modifucation to arrays  (adding and deleting elements) Does not detects modification to array items

example of $watch and $watchGroup


controller.js

app.controller("watcherController",['$scope',function($scope){
    $scope.a=2;
    $scope.b=4;
    $scope.c=3;
   
    $scope.updateC= function(){
        $scope.c= $scope.a * 4;
        console.log($scope.c);
    }
   
   
    $scope.$watch("c", function(newValue , oldValue){
        if(newValue != oldValue){
            console.log("Update to :"+newValue);
        }
    })
   
    $scope.$watchGroup(['a','b'],function(newValue , oldValue){
        if(newValue != oldValue){
            $scope.c=$scope.a * $scope.b;
        }
           
    })
   
}]);

Controller.js

 <div style="border : 2px solid blue;margin : 3px ;padding : 5px">
        <div ng-controller="watcherController">
            <h2> Angular Js $Watcher </h2>
           
            <!--
            <input ng-model="a" ng-change="updateC()">
            <div>a= {{ a }}</div>
            <div>b= {{ b }}</div>
            -->
           
            <input ng-model="a" >
            <input ng-model="b" >
            <div>{{ c }}</div>
        </div>
        </div>

$watch Equality - used with objects

Controller :
var o ={
        x:1,
        y:2,
        z:3
    };
   
   
    $scope.$watch("o" ,function(newValue, oldValue){
        if(newValue != oldValue){
            $scope.o.z=$scope.o.x * $scope.o.y;
        }
    },true)
   

Html 

x= <input ng-model="o.x"/>
            y= <input ng-model="o.y"/>
           
            <div> z = {{ o.z }} </div>
           
           

$watchCollection

Collection

$scope.employee =[
        { empId: 1,
          ename: "Phantom"},
        {empId: 2,
          ename: "Captian Planet"},
        {empId: 3,
          ename: "He-Man"},
        {empId: 4,
          ename: "Tarzan"},
       
    ];
   
   
    $scope.addEmp= function(){
        $scope.employee.push({empId:4,ename:"Mandrake"})
    }
   
    $scope.modifyEmp=function(){
        $scope.employee[2].ename="Thor";
    }
   
   
    $scope.$watchCollection("employee",function(newValue,oldValue){
        console.log("No of Employees"+$scope.employee.length);
    })
   

 Html
<div> <strong> Watcher Collection</strong>
            <div ng-repeat=" o in employee">
                <div> {{ o.empId }} - {{ o.ename }}</div>
               
                </div>  
                <button ng-click="addEmp()">add</button>
                <button ng-click="modifyEmp()">modify</button>
               
            </div>