AngularJS $qProvider - Coding

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= 
"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:

ezgifcom-crop-(23).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.

HTML

<!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:

ezgifcom-crop-(22).gif

Reference: https://docs.angularjs.org/api/ng/provider/$qProvider

Reffered: https://www.geeksforgeeks.org

AngularJS

Related
How to Detect Change in Model Automatically in AngularJS ?
How AngularJS better than jQuery ?
AngularJS ngClass Conditional
Difference between SystemJS and Webpack
Angular PrimeNG ConfirmDialog ConfirmationService

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	10