Life Cycle of Scope Variables In Angular
Posted By : Kuldeep Kumar | 29-May-2018
I am going to discuss an important topic in angular js that is life cycle of scope variables.
I will explain this by using an example, it will contain an application module, a controller with name "myCtrl" and a scope variable as "firstName".
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script language="javascript">
var app = angular.module("application", []);
app.controller("myCtrl", function($scope,$timeout) {
$scope.firstName = "kuldeep";
setTimeout(function(){ //normal timeout of javascript
$scope.firstName = "kuldeep kumar";
},4000);
});
</script>
</head>
<body ng-app="application">
<div ng-controller="myCtrl">
<h2>Username : </h2> {{firstName}}
</div>
</body>
</html>
even after four seconds you will see that value firstName is not updating, the view will be like.
Username: Kuldeep
angular has service as $timeout that we will use to update firstName
<script>
var application = angular.mudule("application",[]);
application.controller("myCtrl",function($scope,$timeout){
$scope.firstName = "kuldeep";
$timeout(function(){
$scope.firstName = "kuldeep kumar";
},4000);
});
</scipt>
after four seconds you will see the view as
Username: Kuldeep Kumar
<script>
var application = angular.mudule("application",[]);
application.controller("myCtrl",function($scope,$timeout){
$scope.firstName = "kuldeep";
setTimeout(function(){ //normal timeout of javascript
$scope.firstName = "kuldeep kumar";
$scope.$apply(); // or use $diget();
},4000);
});
</scipt>
an application can have many controllers and each controller can have many scope variables, angular watch every variable in scope and it is done by "$watch".
The job of $watch is to update view if any change is there in js and vice versa.it is called as Two way binding in angular js.
Two-way binding: in angular two binding is something that, if we change something in view then it will reflect to js and if we change in js then it will reflect to view.
to reflect changes someone has to invoke this $watch, someone has to check whether there is any change in the variable and this work is done by "$digest".
"$digest" will invoke "$watch" if there is any change. and again someone has to invoke this "$digest" and that is done by "$apply".
$apply invokes $digest and $digest will again invoke $watch, $apply works on module level, $digest works on controller level and $watch works on variable level.
$apply() ----> $digest() ----> $watch()
when we are updating variable out of angular like Jquery then we should make sure to use $apply or $digest.
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Kuldeep Kumar
Kuldeep is interested in developing web applications and he is currently working on Groovy on Grails. He likes to learn new technologies and love playing chess.