How to use $watch (angularjs tutorial)

What Will I Learn?

A. In this tutorial I would like to talk about the $watch function and what you can do with it.
B. what is watchFn
C.what is watchAction

Requirements

Basic Knowledge of HTML and CSS language .
Basic Knowledge of JavaScript language .
Has an editor text support HTML and JavaScript .

Difficulty
Basic

$watch(watchFn, watchAction, isDeepWatch)

watchFn:

Is a string or a function. If you want to observe a $scope property when it changes you have to provide a string, e.g. $watch(‘counter’, …). If you want to observe the return value of a function for changes you have to provide the function, e.g. $watch($scope.getCount, …).

watchAction:

A function to be executed if there are changes in the observed model. The function gets the new value, the old value and the scope as parameters, e.g. function watchAction(newValue, oldValue, scope).

isDeepWatch:

Is a boolean which is set to true, if you watch an array or an object. If you observe an array or object usually you want to know if an element of the array or a property of the object has changed. So if this boolean is set to true the whole array or object is traversed and checked for changes. Beware this could be time consuming if this is a large array or object.

Example for watching a property:

Let’ take the program from 2 ways to set a model value in the view. Each time you click on the button the counter will be increased. I want the button to be disabled when the number reached 10. I can do this by watching the corresponding property:

<div data-ng-controller="CounterCtrl">
    <button data-ng-click="increaseCounter()" data-ng-disabled="maxNumberReached">Click to increase counter</button>
    <div>Counter: {{counter}}</div>
</div>

var app = angular.module('myApp', []);
app.controller('CounterCtrl', function($scope) {
    $scope.maxNumberReached = false;
    $scope.counter = 0;
    $scope.increaseCounter = function() {
        $scope.counter++;
    };
    $scope.$watch('counter', function(newValue, oldValue, scope) {
        if (newValue >= 10) {
            $scope.maxNumberReached = true;
        }
    });
});

Example for watching a function:

<div data-ng-controller="CounterCtrl">
    <button data-ng-click="increaseCounter()" data-ng-disabled="maxNumberReached">Click to increase counter</button>
    <div>Counter: {{getCounter()}}</div>
</div>

var app = angular.module('myApp', []);
app.controller('CounterCtrl', function($scope) {
    $scope.maxNumberReached = false;
    $scope.counter = 0;
    $scope.increaseCounter = function() {
        $scope.counter++;
    };
    $scope.getCounter = function() {
        return $scope.counter;
    };
    $scope.$watch($scope.getCounter, function(newValue, oldValue, scope) {
        if (newValue >= 10) {
            $scope.maxNumberReached = true;
        }
    });
});

Example for a watcher with watchFn only:
This is a possibility not known by many. There are times when it makes sense to use this version because of performance issues.

Imagine you need to watch a large object or array. This can lead to performance problems because each time the page is evaluated AngularJS has to go through the array or object again to check if there is a change. It could be cheaper to manually check the differences in the observed array or object if you exactly know what you want to check.

In this case just provide a watchFn function that is called each time the page is evaluated by AngularJS.

<div data-ng-controller="MyCtrl">
    <input type="text" data-ng-model="text" data-ng-change="addText()" />
    <p>Size of the text array: {{textArrSize}}</p>
</div>

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
    $scope.text = '';
    $scope.textArr = [];
    $scope.addText = function() {
        $scope.textArr.push($scope.text);
    };
    $scope.$watch(function() {
        $scope.textArrSize = $scope.textArr.length;
    });
});

In the example above each time you type in something in the input field the string is added to an array. The array gets larger and larger. If we had a watcher for this array it could lead to performance issues once the array is too large. So in this case instead of comparing the array for changes only a function is called each time the page is evaluated by AngularJS. The page is evaluated whenever I type in something in the input field.

Posted on Utopian.io - Rewarding Open Source Contributors