What is watch and it s use in AngularJS

Question

I Want to know how $watch can be implement and can be used in angularjs applications to watch scope variable changes?

Answer 1

$watch() function is used to watch the changes of variables in $scope object. 

Generally the $watch() function will create internally in Angularjs to handle variable changes in application.

Let us understand with the following example to understand how to implement $watch().

1. Let us consider the following code, where we have three variables i.e variable 'a' having 2-way data binding,variable 'a' having data binding and variable 'b' have data binding(HTML code).

2.Now, consider the following css code where variable a and b has data binding but variable c doesn't have data binding.

3. However, we know that $watch is a function that keep trace of scope variable being used in data binding.

    Therefore,from the above code the $watch count is 3. (variable a has both data binding and variable b).

4.In order to know the $watch count follow these steps:

    4.1 Go to you google chrome and select more tools.

    4.2 Then select extensions.

    4.3 Search for Angular Watcher and click on add to chrome.

    4.4. Then run the above web page(HTML) on your browser and hit right click and select inspect.

    4.5 On the upper right corner of your screen select watcher option.

            

   4.6 The final output will be.

          

[Note]: The above output i.e 3 is based on my code.

Hope it helps!!

To know more about Angular, Join best Angular certification course today.

Thank you!!