How to use .then() Method In Angular
In this approach, we have used the .then() method where we are using the $timeout service to simulate an asynchronous operation. The getData function sets a loading state, initiates a promise with a delay, and utilizes the .then() method to handle the resolved value, updating the application.
Example: Below is an example that shows how to access the value of a promise in AngularJS using .then() a method.
HTML
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS Promise Example</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; margin: 20px; } h1 { color: green; } h2 { color: #333; } button { padding: 10px 20px; font-size: 16px; background-color: #009688; color: #fff; border: none; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #00796b; } .loading { color: #333; font-size: 18px; margin-top: 20px; } .result { margin-top: 20px; padding: 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; } </style> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script> </head> <body ng-controller="myController"> <h1>w3wiki</h1> <h3>Approach 1: Using .then() method</h3> <button ng-click="getData()"> Get Data </button> <div class="loading" ng-show="loading">Loading... </div> <div class="result" ng-show="data"> <h3>Hello Geek!</h3> <p>Promise Resolved Value: {{ data }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function ($scope, $timeout) { $scope.loading = false; $scope.getData = function () { $scope.loading = true; var promise = $timeout(function () { return "This is Data from Promise!"; }, 2000); promise.then(function (result) { $scope.loading = false; $scope.data = result; }); }; }); </script> </body> </html> |
Output:
How to access the value of a Promise in AngularJS ?
AngularJS is one of the JS frameworks that consists of promises that are used to handle asynchronous tasks. In some scenarios, we need to handle the promise values by accessing them in the application. So, this can be done using the .then() method and also by using the callbacks in AngularJS.
In this article, we will see how we can access the value of a promise in Angular JS applications to manage and handle asynchronous tasks effectively.
Contact Us