A refreshing particular element of a web page is one of the frequently used approaches in web development.
JavaScript provide the setInterval() method to repeat the task after specified time. Angularjs provides wrapper of setInterval() with $interval angular service module.
To refresh a DIV or any element in specified time, i am going to use $interval service. This service works in same way as setInterval() but it gives more control such as promise callback by which we can cancel out the timer.
$interval Syntax:
--code to execute
--could be function call or updating $scope or anything.
},time_in_milliseconds);
Refresh DIV Angularjs:
Here is our HTML code.
Here is our Angular code.
.controller('refresh_control',function($scope,$interval) {
var c=0;
$scope.message="This DIV is refreshed "+c+" time.";
$interval(function() {
$scope.message="This DIV is refreshed "+c+" time.";
c++;
},1000);
});
In angularjs code, we are calling $interval with 1 seconds of interval. You can change it as per your convenience. Once the page is loaded it will show a message and then the counter variable will be incremented according to interval.
$interval cancel method:
Angularjs provides the control over the timer using cancel method. Suppose at a particular point you want to stop the timer or want to restart it again. We can achieve these using cancel method.
Restarting the $interval timer:
If you want to restart the timer again you can do that simply by comparing the counter variable in $interval function and reassigning it again. Here is a snippet to do that.
$scope.message = "This DIV is refreshed "+c+" time.";
c++;
if(c === 100) {
c=0;
}
},1000);
Kill the timer:
You can kill the timer by using cancel method. Let’s add one button in HTML page and bind it to angular and on click of the button we will kill the timer.Here is a code snippet to do so.
Here is Angular code.
.controller('refresh_control',function($scope,$interval) {
var c=0;
$scope.message="This DIV is refreshed "+c+" time.";
var timer=$interval(function() {
$scope.message="This DIV is refreshed "+c+" time.";
c++;
},100);
$scope.killtimer=function(){
if(angular.isDefined(timer)) {
$interval.cancel(timer);
timer=undefined;
}
};
});
I have changed little bit of code. First of all i have assigned $interval to timer variable and on the click event of the button we are killing it using cancel().
Possible uses of $interval:
In my previous article ‘two way data binding using angularjs’ i have developed one small news feed which refresh itself in 3 seconds and update the view if changes happen.
You can use $interval in such scenario where you want to show something Live. Also you can use it to develop a chatting System. Possibility of the uses is a lot. It depends on you how you mod it to your application.
Further Study
How to Set Up an Angular Application on Firebase
How to Deploy Your Awesome Angular App on Heroku
Making HTTP Calls Using Angular
Getting Started With Angular2
Conclusion:
$interval is handy service if you are a angularjs programmer. It works in same way like core JavaScript setInterval() works as well as provides additional methods to gain more control over timer.
