CODEWITHSUNDEEP
angularjsserviceangular-ui-routerangular-ui
Shaohao
Shaohao

Reputation: 3511

Error handling when data is not resolved in Angular UI router

I am using angular-ui-router's resolve to get data from server before moving a state. I want to inform user if the request has failed. I have service that will response error the request has failed. My question is how can I detect the failure in ui-router resolve and trigger some Modal service like pop up.

I have read some related posts online, but I am still confused how to make it happen. Thanks in advanced!

Config and Service:

angular.module('myApp',['ui.router', 'ngAnimate', 'ui.bootstrap'])
  .config(function ($stateProvider, $locationProvider) {  
      $locationProvider.html5Mode(true);
      $stateProvider
          .state('customer', {
              url: '/customer',
              templateUrl: '/customer.html',
              controller: 'CustomerCtrl',
              resolve: {
                  /* 
                   * How to inject CustomerService here
                   * How to catch the server error
                   * How to trigger a popup
                   */
                  data: cusomter_data
              }
           });

  })
  .service('CustomerService', function($http, $q) {
      return ({
          getGeneral: getGeneral
      });

      function getGeneral(customer_id) {
          var request = $http({
              method: "get",
                  url: '/customer',
                  params: {
                      customer_id: customer_id
                  }
          });
          return (request.then( handleSuccess, handleError));
      }

      function handleError (response){
          if (!angular.isObject(response.data) || !response.data.message) {
              return($q.reject("Failed to retrieve customer information."));
          } 
          return($q.reject(response.data.message));
      }

      function handleSuccess(response) {
          return (response.data);
      }
  });

Upvotes: 0

Views: 594

Answers (1)

Shaohao
Shaohao

Reputation: 3511

After some research, I found out a solution by creating a errorModal service and inject it to resolve. Here is my solution. 

$stateProvider
    .state('customer', {
        url: '/customer',
        templateUrl: '/customer.html',
        controller: 'CustomerCtrl',
        resolve: {
            data: function(CustomerService, SelectedCustomerService, errorModalService) {
                var shared = SelectedCustomerService;
                return CustomerService.getData(shared.customerid).then(
                    function (data) { return data; }, 
                    function(error) { 
                        var modalOptions = {
                            closeButtonText: 'Close',
                            headerText: 'Customer Error',
                            bodyText: error
                        };
                        errorModalService.showModal({}, modalOptions);
                    }
                );
            }
        }
     });

Upvotes: 1

Related Questions