AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions.
In this article, we'll learn about the AngularJS $qProvider. The $qProvider is a provider that allows you to configure the behavior of the $q service, which is the AngularJS implementation of promises. The $qProvider provides methods to control and customize the default settings of promises.
Method used:
- errorOnUnhandledRejections(): It is used to retrieve or override whether to generate an error when a rejected promise is not handled. This feature is enabled by default.
Return value: It returns the boolean value for the current value, while without invoking the new value, otherwise forms chaining for self.
Approach 1: Promise Creation and Handling
Syntax:
app.config(function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
});
Example: In this example, we have configured the $qProvider to disable the generation of errors when a rejected promise is not handled using the errorOnUnhandledRejections(false) method in the app.config() function. By setting this option, AngularJS won't throw an error when a promise rejection is not explicitly handled.
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<h1 style="color: green">GeeksforGeeks</h1>
<h2>AngularJS $pqProvider</h2>
<div ng-controller="PromiseController">
<button ng-click="dataLoad()">Load</button>
<div>{{ mydata }}</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('PromiseController', function ($scope, $q) {
$scope.mydata = '';
$scope.dataLoad = function () {
var deferred = $q.defer();
setTimeout(function () {
deferred.resolve('The data has been loaded!');
$scope.$apply();
}, 1000);
deferred.promise.then(function (response) {
$scope.mydata = response;
});
};
});
</script>
</body>
</html>
Output:
.gif)
Approach 2: Using $qProvider.errorOnUnhandledRejections() method
Syntax:
app.controller("PromiseController", function ($scope, $q) {
$scope.mydata = "";
$scope.dataLoad = function () {
var deferred = $q.defer();
setTimeout(function () {
deferred.resolve("The data has been loaded!");
$scope.$apply();
}, 1000);
deferred.promise.then(function (response) {
$scope.mydata = response;
});
};
});
Example: In this example, we have used a controller PromiseController that uses the $q service to create a promise. Here, inside the dataLoad() function, we have used the setTimeout() to simulate an asynchronous operation that resolves the promise after 1 second. The resolved data is then assigned to the $scope.mydata variable using the then() method.
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>AngularJS $pqProvider</h2>
<div ng-controller="PromiseController">
<button ng-click="dataLoad()">
Load
</button>
<div>{{ mydata }}</div>
</div>
<script>
var app = angular.module('myApp', []);
app.config(function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
});
app.controller('PromiseController', function ($scope, $q) {
$scope.mydata = '';
$scope.dataLoad = function () {
var deferred = $q.defer();
setTimeout(function () {
deferred.reject('Error loading data!');
$scope.$apply();
}, 2000);
deferred.promise.catch(function (error) {
$scope.mydata = error;
});
};
});
</script>
</body>
</html>
Output:
.gif)
Reference: https://docs.angularjs.org/api/ng/provider/$qProvider
