AngularJS $qProvider
Last Updated :
05 Jul, 2023
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.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ 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:
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.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ 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:
Reference: https://docs.angularjs.org/api/ng/provider/$qProvider
Share your thoughts in the comments
Please Login to comment...