JavaScript and JQuery Essentials Trainin... (46 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (20 Blogs)
  • jQuery UI Development (1 Blogs)
  • The Complete WebDeveloper (34 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

How To Best Implement $timeout in AngularJS?

Published on Sep 12,2019 15 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

$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.

Moving on with Example.

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.

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). 

Got a question for us? Please mention it in the comments section of “$timeout in AngularJS” and we will get back to you.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.