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

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

现在我不知道实现 "datasource" 的正确方法，它可以从所有控制器访问。我不想请求所有的数据，对于每个控制器启动，它应该只请求一次。

如何自动更改所有其他控制器的数据，当产品在一个控制器中更新时，该服务应该进行更新（尚未实现），当更新成功时，他们 "centralized data" 应该更改，以及所有控制器数据。

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

Answer 1

如果您将 $http 与缓存选项一起使用，则只有您的一个控制器会发出 "real" 请求，所有其他控制器将从缓存中获取产品。

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

或者您可以 emit 来自工厂内部的结果，让控制器听取。

  getProducts: ->
    url = productsApiEndPoint

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

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

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

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

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);
    });
});

在你的中介服务上监听并发送给控制器。

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

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

在你的控制器上监听并发送给中介服务：

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);

    });

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

AngularJS 集中数据和 restful 服务

AngularJS centralized data with restful services

javascript

rest

service

controller

angularjs