在angularjs应用程序...服务或工厂中构建我的控制器，服务和工厂的正确方法？

Question

我一直在围绕“angularjs”思维方式（Angular 1）进行包装工作，并且在我通过一个小型个人项目工作时，我有相对好的把握。我遇到了一些障碍，不是因为我无法实现它，而是想知道在我的应用程序中设置数据的正确方式。

的基本情况是这样的：

我有3个JSON文件：

categories.json 
products.json 
vendors.json 

这些保存数据（这是我从稍后从数据库中获取，但现在我简化了）。

我基本上需要从所有这三个文件中加载数据，以便我可以形成一个包含所有“产品”（这是我单独声明的JS类）的变量。

我开始通过存储一个控制器（以下相关的代码）中的数据：

myApp.controller('productListController', ['$scope', '$http', '$q', function ($scope, $http, $q) { 

var promises = []; 
promises.push(getCategories($http)); 
promises.push(getVendors($http)); 
promises.push(getProducts($http)); 

$q.all(promises).then(function (response) { 
    //categories = response[0]; 
    //vendors = response[1]; 
    //products = response[2]; 
    $scope.products = createProductList(response); 
    $scope.vendors = response[1].data; 
    $scope.vendorChecked = getCheckedVendors($scope.vendors); 
}) 

这工作得很好，但我意识到，我需要在其他视图这个数据，这促使我尝试移动此代码到服务中。

我这样做时遇到的问题是，我不知道控制器知道服务已完成获取数据的方式，以便我可以将其保存在ProductListController $范围中。

我需要有一种方法，例如：

myApp.service('ProductService', ['$http', '$q', function ($http, $q) { 

self = this; 
var promises = []; 
promises.push(getCategories($http)); 
promises.push(getVendors($http)); 
promises.push(getProducts($http)); 

$q.all(promises).then(function (response) { 
//These three I would like to update in ProductListController 
//when it is done. 
    self.products = createProductList(response); 
    self.vendors = response[1].data; 
    self.vendorChecked = getCheckedVendors(self.vendors); 
}) 

这是采取正确的做法？如果是这样，我怎么可以让控制器知道该服务完成获取数据并保存，例如：

$scope.products = ProductService.products; 
$scope.vendors = ProductService.vendors; 
$scope.categories = ProductService.categories; 

这甚至正确的做法？我想到的另一种方法是使用工厂而不是服务。然后，我有一个问题，因为我有，例如：

return { 
    getProducts: function() { 
     //http get request code in here 
     return promise 
    }, 
    getVendors: function() { 
     //http get request code in here 
     return promise 
    }, 
    getCategories: function() { 
     //http get request code in here 
     return promise 
    }, 
    getAllData: function() { 
    //in here I want to use the three promises in the 3 functions above 
    //but I am not able to call them from here. If I was able to do that 
    //then I could call this method from ProductListController and get the 
    //data that way. 
    } 

我很抱歉，如果这是很长，但我想描述的不同的东西我试过了。我知道我可以让它工作，但我想学习正确的方法，或者一些正确的方法。

Answer 1

这是更好地总是返回承诺：

var promises = []; 
promises.push(getCategories($http)); 
promises.push(getVendors($http)); 
promises.push(getProducts($http)); 

return $q.all(promises) 

如果你还不满意，在每个控制器，你应该叫createProductList，getCheckedVendors - 考虑把这个tranforms至$ HTTP transformResponce https://docs.angularjs.org/api/ng/service/ $ HTTP。 或者你可以创建你自己的承诺。 （使用$ q.defer https://docs.angularjs.org/api/ng/service/ $ q）。

使用服务器或工厂实际上并不重要。这是工厂：

var factory = {}; 
factory.getProducts: function() { 
     return promise 
} 
factory.getCategories: function() { 
     return promise 
} 
factory.getVendors: function() { 
     return promise 
} 
factory.getAllData: function() { 
    var promises = []; 
    promises.push(factory.getProducts()); 
    promises.push(factory.getCategories()); 
    promises.push(factory.getVendors()); 

    return $q.all(promises) 
} 
return factory; 

而且在CONTROLER你只需要： MyFactory.getAllData（），然后（...）