How to wait for load configuration AJAX request to respond and then make other service calls in angularjs

Question

I have a common service which serves configuration details from backend that I am using in other services...is there a way to load the common service before loading other services. Since I am getting an exception in JS "cannot read property "url" of null". Sometimes It works fine if the configuration loaded successfully before other calls

Answer 1

It sounds like using module.run() would help solve your problem as you can initialise your common service:

var app = angular
.module('demoApp', [])
.run(['commonService', function(commonService) {
    commonService.Init()
}]);

Answer 2

Few suggestions,

1. You can make use module.run function which will execute immediately after module.config function, make AJAX/HTTP call their and keep it in $rootScope/Service, or as angular constant.
2. Interceptors: you can also make use of the $http's interceptors, so when ever you makes an AJAX request we can configure to execute the interceptor first, so that we can check whether the configs loaded or not, if not then we can grab that first.
3. If you are using angular routing, then we can make use of resolve convention.

Answer 3

You can set up a service deferred, which holds a promise that gets resolved after initialization of the service is complete. Then when asking for a value of the service return a promise chained to the deferred promise:

angular.module('YourApp').factory("CommonService", function(){


var initDeferred = $q.defer(); 

  var initialize = function() {
    /* initialize your service, maybe do something async, maybe set local variables with obtained info
    * then resolve deferred promise (maybe with obtained values)*/
    initDeferred.resolve(/* initialized service data */);
  };

  var getUrl = function() {
    return initDeferred.promise.then(
      function(initializedServiceData) {
        return initializedServiceData.url;
      }
    );
  };

  return {
    initialize: initialize,
    getUrl: getUrl
  }
});

And don't forget to initialize the service. A good point to do so is the run() function of the module as Brian Giggle already suggested.

angular.module('YourApp', []).run(function(CommonService){
  CommonService.initialize();
});

You are able then to retrieve the initialized data as a promise:

angular.module('YourApp').controller('YourController', function($scope, CommonService){
  CommonService.getUrl()
    .then(function(url){
      $scope.url = url;
    })
});