Chaining asynchronous AJAX calls with Angularjs

Question

I'm using Angularjs and i have made this service with multiples functions that returns promises .

My AJAX service :

angular.module('yoApp')
    .factory('serviceAjax', function serviceAjax($http) {
      return{

        configDataSets:function(path){

          return $http.get(path);

        },
        fileList: function(site_url,dataSet,varName,region,date){
          return $http.get(site_url + "mwf/" + dataSet + "/" +varName + "/" + region + "/" + date + "/filelist/");
        },
        config: function(site_url,dataSet){
          return $http.get(site_url + "mwf/" + dataSet + "/config/");
        },

      }});

Controller code

I have already done something like this but as i may have more requests chained i think that's not the best way to do this :

serviceAjax.config(site_url,$scope.dataset).then function(data){
          $scope.config=data.data;
serviceAjax.configDataSets("images/configDatasets.json").then(function(data){

          $scope.configDatasets = data.data;

});
});

What i want to do is first Call in my controller config and then wait for it to finish then call configDataSets . what's the best way to do it, i have tried to look at $q and differed but i can't seem to figure out how to do it. Any help would be great!

Answer 1

Just use the .then method exposed by the promise:

serviceAjax.config(function(response) {
     // use response.data from first call
     ...
}).then(function() {
     return serviceAjax.configDataSets("images/configDatasets.json");
}).then(function(response) {
     // use response.data from second call
     ...
});

Also, consider using $resource instead of $http if your HTTP service follows typical RESTful usage.