AngularJS (54 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (44 Blogs)
  • The Complete WebDeveloper (34 Blogs)
  • ReactJS (10 Blogs)
  • JavaScript and JQuery Essentials Training (2 Blogs)
SEE MORE

How To Best Implement $timeout in AngularJS?

Last updated on Sep 14,2023 2.6K Views


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

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:

$timeout In AngularJS

 

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

IndiaIndia
Angular Training in BangaloreAngular Training in Delhi
Angular Training in ChennaiAngular Training in Kolkata
Angular Training in HyderabadAngular 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). 

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

Upcoming Batches For Angular Certification Training Course
Course NameDateDetails
Angular Certification Training Course

Class Starts on 2nd March,2024

2nd March

SAT&SUN (Weekend Batch)
View Details
Angular Certification Training Course

Class Starts on 6th April,2024

6th April

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

How To Best Implement $timeout in AngularJS?

edureka.co