pTutorial

New way to learn Programming

AngularJS $timeout

AngularJS $timeout and $interval

AngularJS has two timer services as java script, first one in $timeout and second one is $interval. The functionality of the $timeout and $interval services are same as JavaScript's setTimeout() and setInterval() functions. The functionality of these services are discussed below.

$timeout service

The $timeout service is use to invoke other JavaScript function or block of code after a given time delay (after a particular time). $timeout service execute once.

How to injecting $timeout service

To use the $timeout service in your controller you must injected into a controller function. See the example below...

inject $timeout

var appData = angular.module("appData", []);

appData.controller("DataController", function($scope, $timeout){

});

$timeout Service Example

Once the $timeout service is injected into your controller, you can use it to any number of times. Here is an example that execute after 5 minutes or 5000 milliseconds.

var appData = angular.module("appData", []);

appData.controller("DataController", function($scope, $timeout){

$timeout (function () {
//code here.....
//..............                
},1000);
});


Note: Time must be in milliseconds.

Angular $timeout Service live Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/
angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="appData" ng-controller="DataController">
  <p>Simple Angular Expresion: {{ 38 + 2 }}</p>

<div ng-show="show"><h1>Vanish after 
five second</h1></div>

</div>

<script>
var appData = angular.module("appData", []);
 
appData.controller("DataController", function($scope, $timeout){
 $scope.show=true;
$timeout (function () {
$scope.show=false;
},5000);
});
</script>
</body>


</html>

Note: For $interval angularjs service move forward.

See Also


QUOTES OF THE DAY

The heart of melody can never be put down.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER