React JS Training Course Online
- 21k Enrolled Learners
- Weekend
- Live Class
(7200)
The Angular JS $scope functions are some of the main functions. In this article, we will discuss the Angular JS watch function in the following order:
What is the angular JS watch function?
The angular JS $watch function is used to watch the scope object. The $watch keep an eye on the variable and as the value of the variable changes the angular JS $what runs a function. This function takes two arguments one is the new value and another parameter is the old value.
How to use angular JS watch function?
Let’s take a simple example of what the watch function in angular JS exactly does. So in our angular JS program we created two files there index.js is responsible for frontend and the app.js is responsible for handling backend. Here we make a simple program with a form and this form has an input field. When we give the name into the input field the output message shows us the old value and the new value.
If you wish to learn more about Angular framework, then check out our Angular Course which comes with instructor-led live training and real-life project experience. This training will help you understand Angular in-depth and help you achieve mastery over the subject.
HTML Code
Our index.html page has an angular app with the name ngWatchApp and a controller with the name watchController. Then we create a form with an input field name and the value of that input field we print in h1 tag and the message prints in <p> tag.
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Angular watch example&lt;/title&gt;
&lt;/head&gt;
&lt;body ng-app="ngWatchApp"&gt;
&lt;div ng-controller="watchController"&gt;
&lt;form&gt;
&lt;label&gt;Enter you name&lt;/label&gt;
&lt;input type="text" ng-model="name"&gt;
&lt;/form&gt;
&lt;h1&gt;Hello {{name}}&lt;/h1&gt;
&lt;p&gt;{{message}}&lt;/p&gt;
&lt;/div&gt;
&lt;!--angular js library--&gt;
&lt;script src="assets/js/angular.js"&gt;&lt;/script&gt;
&lt;script src="app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Find out our UI UX Design Course in Top Cities
| India | India |
| UI UX Designer Course in Chennai | UI UX Design Course in Mumbai |
| UI UX Design Course in Pune | UI UX Design Course in Ahmedabad |
| UI UX Design Course in Bangalore | UI UX Design Course in Delhi |
JavaScript Code
In the app.js we created an app with the name ngWatchApp and a controller with the name watchController. Next, we define the two variable in scope with the name, name, and message and in the watch function we pass two parameters, one is the name of the field that is affected when change and other is the function that also has two parameters, new value, and old value. Finally, we append two values in the message variable and that the message variable is shown on the index.html page.
var app = angular.module('ngWatchApp', []);
app.controller('watchController', function($scope) {
// adding scope variable
$scope.name = "";
$scope.message = "";
// add watch with name field
$scope.$watch("name", function (newValue='', oldValue='') {
$scope.message = `new valus is ${newValue} and old value is ${oldValue}`;
});
});
Whenever we watch a function, then this function called multiple times according to digest. Whenever the code executes, AngularJS passes-in the current $scope reference as the first argument. Not only does it mean that we can reference the proper scope from within the function body it also means that we can watch any function that expects a $scope reference.
This is how we can use angular js watch() function in applications to watch $scope variable changes. There are some other things that work with $watch these are $digest() function iterates through all the watches in the $scope object when $digest() iterates over the watches, it calls the value function for each watch. The $scope.$apply() function takes a function as a parameter which is executed, and after that $scope.$digest() is called internally.
Turn your passion for design into a career with our UI UX Design Certification Course.
Build visually stunning and responsive mobile app UIs with a Flutter Course Online.
Got a question for us? Please mention it in the comments section of ”Angular JS Watch Function” and We will get back to you.
