![$watch():
$watch(): $watch helps to listen for $scope change. Angular creates a $watch for every binding on the
screen. That includes both ng-model and {{ ... }} (and ng-repeat and others directives).
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller("MyCtrl", function ($scope) {
$scope.FName = "Nitin";
$scope.LName = "Pandit";
$scope.$watch("LName",function () {
alert('hey, Last Name has changed!');
});
});
</script>
</head>
<body ng-app="app" ng-controller="MyCtrl">
First Name: <input ng-model="FName"/><br/>
Last Name: <input ng-model="LName" /><br />
<!--<p ng-bind="FName" ng-bind="LName"></p>-->
<p>{{FName+' '+LName}}</p>
</body>
</html>](https://image.slidesharecdn.com/angularnew1-170109183238/85/A-Big-Picture-Of-AngularJS-9-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to A Big Picture Of AngularJS (20)
Ad
Recently uploaded (20)
Ad
A Big Picture Of AngularJS
- 1. A Big Picture of AngularJS By Nitin Pandit Nitin Pandit C# Corner Evangelist Microsoft MVP Follow Me : Twitter: @thinkaboutnitin Facebook: facebook.com/go4pandit Web: www.nitin-pandit.com
- 2. AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0. What is AngularJs?
- 3. Features: • AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA). • AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way. • Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser. • AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.
- 4. three most important things about AngularJs Directive Like: Services Like: Filters Like: ng-app, ng-bind, ng-model, ng-init etc.… $http, $location etc.… currency , filter , json etc.…
- 7. What is $scope? Scope is a JavaScript object that refers to the application model. It acts as a context for evaluating Angular expressions. Basically, it acts as the glue between a controller and a view. Scopes are hierarchical in nature and follow the DOM structure of your AngularJs app
- 8. Scope has certain characteristics like: $watch, $apply and $digest. Angular defines a concept called digest cycle. This cycle can be considered as a loop, during that Angular checks if there are any changes to all the variables watched by all the $scopes $watch: It keeps a constant eye on any mutation that occurs inside the model. $apply: It notifies Angular to update the DOM model after the scope properties are updated. $digest: It is triggered right after $apply does its job. Its task is to notify all the $watches that the application model has been updated. Let us do a hands-on sample to understand it better.
- 9. $watch(): $watch(): $watch helps to listen for $scope change. Angular creates a $watch for every binding on the screen. That includes both ng-model and {{ ... }} (and ng-repeat and others directives). <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="Scripts/angular.min.js"></script> <script> var app = angular.module("app", []); app.controller("MyCtrl", function ($scope) { $scope.FName = "Nitin"; $scope.LName = "Pandit"; $scope.$watch("LName",function () { alert('hey, Last Name has changed!'); }); }); </script> </head> <body ng-app="app" ng-controller="MyCtrl"> First Name: <input ng-model="FName"/><br/> Last Name: <input ng-model="LName" /><br /> <!--<p ng-bind="FName" ng-bind="LName"></p>--> <p>{{FName+' '+LName}}</p> </body> </html>