Refresh DIV in 10 Seconds Using Angularjs

Refreshing particular element of web page is one of the frequently used approach 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.

LIVE DEMO DOWNLOAD

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:

var var_1=$interval(function(){
--code to execute
--could be function call or updating $scope or anything.
},time_in_milliseconds);

Refresh DIV Angularjs:

Here is our HTML code.

index.html
    <div ng-app="refresh_div" ng-controller="refresh_control">
      {{message}}
      <input type="button" ng-click="killtimer()" value="Kill me">
    </div>

Here is our Angular code.

main.js
var app=angular.module('refresh_div',[])
.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.

$interval(function(){
$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.

<input type="button" ng-click="killtimer()" value="Kill me">

Here is Angular code.

main.js
var app=angular.module('refresh_div',[])
.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.

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.

Shahid (UnixRoot) Shaikh

Hey there, This is Shahid, an Engineer and Blogger from Bombay. I am also an Author and i wrote a programming book on Sails.js, MVC framework for Node.js.

Related Posts

4 Comments

  1. Very Good, for control when controller change :
    $scope.activeRefresh = true;
    $interval(function(){
    if($scope.activeRefresh){
    $scope.LOAD_MY_FUNCTION();
    }
    },1000);
    $scope.$on(‘$destroy’, function() {
    $scope.activeRefresh = false; // STOP THE REFRESH
    });

Leave a Reply

Your email address will not be published. Required fields are marked *