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

时间:2016-04-06 01:33:21

标签: angularjs angularjs-service angularjs-factory

我一直在围绕" 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 $ scope中。

我需要一个方法,例如:

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.
    }

我很抱歉,如果这很长,但我想描述我尝试的不同的事情。我知道我可以让它发挥作用,但我想学习正确的方法,或者几种正确的方法。

1 个答案:

答案 0 :(得分:1)

总是回报承诺更好:

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

return $q.all(promises)

如果你还不满意在每个控制器中你应该调用createProductList,getCheckedVendors - 考虑将这个转换放到$ http transformResponce https://docs.angularjs.org/api/ng/service/ $ http。 或者您可以创建自己的承诺。 (使用$ q.defer https://docs.angularjs.org/api/ng/service/ $ q)。

使用servie或工厂实际上并不重要。这是工厂:

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;

在控制器中你只需要: MyFactory.getAllData()。然后(...)