$timeout in AngularJS

Introduction

This article explains the $timeout service provided by AngularJS.

AngularJS provide a service by which you can easily show the time to the external user and you can also use it to provide a condition that will be activated after a certain period of time.

Step 1

First you need to add an external Angular.js file to your application, "angular.min.js".

For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application.

</head>

Step 2

After adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.

Now I will create a simple application where this service will be used and it will be easier for all of you to understand it in this easy way.

First I will create a JavaScript function that is the heart of this application:

function x($scope, $timeout) {

$scope.miliSeconds = 0;

var countUp = function () {

$scope.miliSeconds += 1000;

$timeout(countUp, 1000);

}

$timeout(countUp, 1000);

}

</script>

Here I have created a function named "x()", in this function $scope and $timeout are used, $timeout is what gets the time and does various other functions.

In the $scope a variable is defined named miliSeconds, it's value is initially set to 0, so whenever the application is executed the time will be displayed as 0.

Then another function is created named "countUp", in this function the miliSeconds are increased by a thousand and than this value is bound to "countUp" using $timeout.

Our work on the View is completed, so we can now work on the ViewModel.

Step 3

<body>

<span>Time (in ms): {{miliSeconds}}</span>

</div>

</form>

</body>

The function name is bound to the div using the ng-controller.

Then miliSeconds is bound to the span, this will update the time after every 1000 miliSeconds.

Before all this ensure that <html> is bound using the ng-app, this is necessary since without this binding nothing will be shown in the output.

Now our application is ready for execution.

Output

On running the application your Timer will start from o.

timeout in angularjs

But then it will be increased by 1000 on every 1000 ms.

timeout in angularjs

The complete code of this application is as follows:

function x($scope, $timeout) {

$scope.miliSeconds = 0;

var countUp = function () {

$scope.miliSeconds += 1000;

$timeout(countUp, 1000);

}

$timeout(countUp, 1000);

}

</script>

</head>

<body>

<span>Time (in ms): {{miliSeconds}}</span>

</div>

</form>

</body>

</html>