How to access the value of a Promise in AngularJS ?
Last Updated :
24 Apr, 2025
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.
Steps for Configuring the AngularJS App
The below steps will be followed to configure the AngularJS App
Step 1: Create a new folder for the project. We are using the VSCode IDE to execute the command in the integrated terminal of VSCode.
mkdir promise
cd promise
Step 2: Create the index.html file in the newly created folder, we will have all our logic and styling code in this file.
We will understand the above concept with the help of suitable approaches & will understand its implementation through the illustration.
Using .then() Method
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>GeeksforGeeks</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:
Using Callbacks
In this approach, we are using the Callbacks by implementing the $q service to manage promises. The getDataWithCallback and getDataWithAnotherPromise functions perform asynchronous operations and use callbacks to handle the resolved values. The loading state is updated during the process, and any errors are caught and displayed.
Example: Below is an example that shows how to access the value of a promise in AngularJS using Callbacks.
HTML
<!DOCTYPE html>
<html ng-app="promiseApp">
<head>
<title>AngularJS Promise Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 50px;
}
h1 {
color: green;
}
h3 {
color: #333;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
p {
margin-top: 20px;
font-size: 18px;
color: #333;
}
.loading {
color: #777;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-controller="MainController">
<h1>GeeksforGeeks</h1>
<h3>Approach 2: Using Callbacks</h3>
<button ng-click="getDataWithCallback()"
ng-disabled="loading">
Get Data (Callback)
</button>
<button ng-click="getDataWithAnotherPromise()"
ng-disabled="loading">
Get Another Data (Promise)
</button>
<p ng-if="loading"
class="loading">Loading...
</p>
<p ng-if="data">{{ data }}</p>
<p ng-if="error"
style="color: red;">
{{ error }}
</p>
<script>
var app = angular.module('promiseApp', []);
app.controller('MainController',
function ($scope, $q, $timeout) {
$scope.loading = false;
$scope.getDataWithCallback = function () {
$scope.loading = true;
$scope.data = null;
$scope.error = null;
var promise = $q.when("Data from Callback");
promise.then(function (result) {
$timeout(function () {
$scope.data = result;
$scope.loading = false;
}, 2000);
}).catch(function (error) {
$scope.error = "Error fetching data!";
$scope.loading = false;
});
};
$scope.getDataWithAnotherPromise = function () {
$scope.loading = true;
$scope.data = null;
$scope.error = null;
var anotherPromise =
$q.when("Another Data from Promise");
anotherPromise.then(function (result) {
$timeout(function () {
$scope.data = result;
$scope.loading = false;
}, 2000);
}).catch(function (error) {
$scope.error = "Error fetching another data!";
$scope.loading = false;
});
};
});
</script>
</body>
</html>
Output:
Similar Reads
How to access the Value of a Promise in JavaScript
In this article, we will see how to access the value of Promise in JavaScript. The Promise is a feature of ES6 introduced in 2015. The concept of Promises is generally used when we want to work asynchronously. The value of a Promise can be accessed in JavaScript using the following methods. Table of
2 min read
How to get the value of the form in Angular ?
In this article, we are going to see how to get value from the form in Angular 10. We will use AbstractControl value property to get the form value in an object. Syntax: form.value Return Value: object: It is an object containing form value Approach:Â Create the Angular app to be usedIn app.componen
1 min read
How to Use the Async Pipe in Angular?
The AsyncPipe in Angular is a powerful and convenient tool used to handle asynchronous data streams such as observables and promises directly in the component template. It automatically subscribes to observables, renders their values, and updates the view when new data is emitted. This removes the n
3 min read
How to access the Scope from outside JS Function in AngularJS ?
In the AngularJS application, we generally need to access the scope from the outside JS function. This can be done using the global scope object like $rootScope or the AngularJS services. Accessing the scope from the outside of JS functions is to enable the manipulation of data in the scope of the a
4 min read
How to access Previous Promise Results in Then Chain ?
In this article, we will discuss how to access previous promise results by using "then" in JavaScript. In a series of promises connected by then, each subsequent step receives the outcome of the previous promise's resolution. This sequential passing of results permits ongoing access and handling of
3 min read
How to access cookies in AngularJS?
AngularJS is the most useful framework for developing dynamic web applications. While developing the applications, we need to store and access the cookies for many other functionalities like retiring the user details, etc. Cookies are nothing but the data that is usually stored in the client's brows
5 min read
How to determine active route in AngularJS ?
In this article, we will see how to determine the active route in AngularJS, along with understanding the basic implementation through the example. Approach: To determine which is the active route at any moment in AngularJS this can be achieved by using $on() & $location.path() method. An event
2 min read
How to iterate over the keys and values with ng-repeat in AngularJS ?
The task is to iterate over a JS object (its keys and values) using the ng-repeat directive. This can be done using parenthesis in the ng-repeat directive to explicitly ask for a key-value pair parameter from angularJS. Here the variable key contains the key of the object and value contains the valu
3 min read
How to use $scope.$apply() in AngularJS ?
In this article, we will be discussing the $apply() function & how to use it in angularjs. In AngularJS, $apply() function is used to evaluate expressions outside of the AngularJS context (browser DOM Events, XHR). Moreover, $apply has $digest under its hood, which is ultimately called whenever
3 min read
How to use $rootScope to store variables in Angular ?
In Angular, the $rootScope is the service that is the top-level for all the controllers in the Angular application. This exists over the entire application lifecycle and can also be used to store the variables that need to be accessed globally. $rootScope is a singleton object that is across the ent
4 min read