javascript - AngularJS 集中数据和 Restful 服务

Question

我在设计 AngularJS 应用程序时需要帮助。

我有一个工厂，它为我提供了一个 restful web 服务的资源对象。

product.factory("productResource", function ($resource) {
    var resource = $resource("/fooo/rest/products/:id", {}, {
        query: {
            method: "GET",
            isArray: true
        }
    });
    return resource;
});

我有一个服务，它提供了一种方法来查询资源工厂中的所有产品。

product.service("productDao", function (productResource) {
    this.getProductModel = function () {
        var data = productResource.query(function () {
        });
        return data;
    }
});

Controller 调用服务，以获取他们需要的数据:

Controller 1

header.controller("header.selection.product", function ($scope, productDao) {
        $scope.products = null;
        productDao.getProductModel().$promise.then(function (result) {
            $scope.products = result;
        });
    });

Controller 2,3,4...

它们看起来几乎相同，但它们将数据用于不同的目的。

现在我不知道正确的方法来实现从所有 Controller 访问的“数据源”。我不想请求所有数据，对于每个 Controller 启动，它应该只请求一次。

我如何自动更改所有其他 Controller 的数据，当产品在一个 Controller 中更新时，该服务应该进行更新(尚未实现)，当更新成功时，他们的“集中数据”应该更改，并且所有 Controller 数据。

我读到有关为此目的使用 rootScope 的信息，但有人说，不要只创建工厂/服务。

Answer 1

如果您将 $http 与缓存选项一起使用，则只有一个 Controller 会发出“真实”请求，所有其他 Controller 将从缓存中获取产品。

$http.get(url, { cache: true })

或者您可以从工厂内部发出结果并让 Controller 监听。

  getProducts: ->
    url = productsApiEndPoint

    $http.get(url, { cache: true })
      .then(
        (data) ->
          $rootScope.$emit('YourFactory.getProducts', data);
        (error) ->
          //handle error
      )

我更喜欢第一种方法。更清晰。

您可以使用 mediator pattern并协调数据流。创建一个将成为你的中介的服务，当数据到达时从该服务发送到你的 Controller 。当 Controller 更改数据时从 Controller 发送到该服务，然后服务将发送回其余 Controller

在您的工厂上将数据发送到中介服务:

product.factory("productResource", function ($resource) {
    var resource = $resource("/fooo/rest/products/:id", {}, {
        query: {
            method: "GET",
            isArray: true
        }
    });

    resource.query(...)
    .$promise.then(function(products) {
      $rootScope.$emit('ProductsFetched', products);
    });
});

在您的中介服务上监听并发送给 Controller 。

product.service("productDao", function (productResource) {
   $rootScope.$on('ProductsFetched', function(data){
     $rootScope.$emit('ProductsChange', data);
   });

   $rootScope.$on('ProductsChangeFromControllers', function(data){
     $rootScope.$emit('ProductsChange', data);
   });
});

在你的 Controller 上监听并发送给中介服务:

header.controller("header.selection.product", function ($scope, productDao) {
        var products = null;
        $rootScope.$on('ProductsChange',function(data){
           products = data;
        });

        // do something with the products
        $rootScope.$emit('ProductsChangeFromControllers', products);

    });

也许有一些语法错误，但我只是想告诉你如何构建它。