$timeout in AngularJs is similar to the window.setTimeout function in JavaScript. Usage of the $timeout service allows the developer to set some time delay to execute the methods and functions as per the requirement. Before we move further, following pointers will be covered in this article.
So guys let us not waste any time and get started with this article
$timeout In AngularJS
In simpler terms, this service can be used to call another function after the specified time delay.
Syntax:
var app = angular.module('firstApp', []);
ap
p.controller('firstCtrl', function ($scope, $timeout) {
$scope.msg="Ahoy!"
$timeout(function () {
$scope.msg = "Save the planet!";
}, 4000);
});
It must be noted that in the code given above, we are changing the message after 4 seconds. This is done by using the $timeout service. We have passed $timeout as an argument to the controller in the example given above. To use service in controller, $timeout must be passed as a parameter.
Check out the Angular Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
$timeout Service Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('firstApp', []);
app.controller('firstCtrl', function ($scope, $timeout) {
$scope.msg="Ahoy!"
$timeout(function () {
$scope.msg = "Save the planet!";
}, 2000);
});
</script>
</head>
<body>
<div ng-app="firstApp" ng-controller="firstCtrl">
<p>$timeout Service Example</p>
<b>{{msg}}</b>
</div>
</body>
</html>
Output:
After the specified two seconds, the text automatically changes to:
This is about the demo part and this is how you bring $timeout in effect.
Find out our Angular Course in Top Cities
| India | India |
| Angular Training in Bangalore | Angular Training in Delhi |
| Angular Training in Chennai | Angular Training in Kolkata |
| Angular Training in Hyderabad | Angular Training in Mumbai |
This brings us to the end of this article $timeout In AngularJS. Now that you know about Methods in JavaScript, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).