在单个控制器angular js中有多个http请求

Question

I have created different drupal views to create multiple json endpoints for multiple http request using angular. In my angular script I have created multiple controller for each http request as shown below. But I want to do multiple http request in single controller. I have got inclination that $q and promises or factory are way forward but not completely sure. Any help will be much appreciated. Thanks

var module = angular.module('main',[]);
module.directive("masonry", function () {
    var NGREPEAT_SOURCE_RE = '<!-- ngRepeat: ((.*) in ((.*?)( track by (.*))?)) -->';
    return {
        compile: function(element, attrs) {
            // auto add animation to brick element
            var animation = attrs.ngAnimate || "'masonry'";
            var $brick = element.children();
            $brick.attr("ng-animate", animation);

            // generate item selector (exclude leaving items)
            var type = $brick.prop('tagName');
            var itemSelector = type+":not([class$='-leave-active'])";

            return function (scope, element, attrs) {
                var options = angular.extend({
                    itemSelector: itemSelector
                }, scope.$eval(attrs.masonry));

                // try to infer model from ngRepeat
                if (!options.model) {
                    var ngRepeatMatch = element.html().match(NGREPEAT_SOURCE_RE);
                    if (ngRepeatMatch) {
                        options.model = ngRepeatMatch[4];
                    }
                }

                // initial animation
                element.addClass('masonry');

                // Wait inside directives to render
                setTimeout(function () {
                    element.masonry(options);

                    element.on("$destroy", function () {
                        element.masonry('destroy')
                    });

                    if (options.model) {
                        scope.$apply(function() {
                            scope.$watchCollection(options.model, function (_new, _old) {
                                if(_new == _old) return;

                                // Wait inside directives to render
                                setTimeout(function () {
                                    element.masonry("reload");
                                });
                            });
                        });
                    }
                });
            };
        }
    };
});
angular.module('main',[]).controller('blogcontroller', function ($scope,$http) {
  $http.get('/blog-filter').success(function(result){
    $scope.blog = ( function () {
       return result.nodes;
    })();
  });
});


angular.module('cs',[]).controller('cscontroller', function ($scope,$http) {
  $http.get('/case-study-view').success(function(results){
    $scope.cs = ( function () {
      return results.nodes;
    })();
  });
});

Answer 1

Yes you should have your $http methods in a factory:

angular
  .module('sharedServices')
  .factory('blogRepository', blogRepository);

blogRepository.$inject = ['$http', '$q'];

function blogRepository($http, $q) {
  var service = {
    getBlogFilter: getBlogFilter
  };

  return service;

  function getBlogFilter() {
    var deferred = $q.defer();
    $http.get('/blog-filter').success(function(result){
      deferred.resolve(result);
    });
    return deferred.promise;
  }
}

and in your controller:

blogRepository.getBlogFilter().then(function(data) {
  $scope.blog = data.nodes;
});

It would be similar for the other $http call.

Answer 2

Create a factory with all $http services and use $q like this:

(function(){
    app.factory('CountriesServices', countriesServices);
    countriesServices.$inject = ['$http', '$q', 'settings'];

function countriesServices($http, $q, settings) {
    var self = {};

    self.getCountries= function(){
        var deferred = $q.defer();
        var url = settings.baseService + 'api/country';

        $http.get(url)
            .success(deferred.resolve)
            .error(deferred.reject);

        return deferred.promise;
    };

    self.getCountry = function(id){
        var deferred = $q.defer();
        var url = settings.baseService + 'api/country/' + id;

        $http.get(url)
            .success(deferred.resolve)
            .error(deferred.reject);

        return deferred.promise;
    };



    return self;
}
})();