Question

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

我有一个工厂，它为我提供了一个资源对象，一个宁静的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;
    }
});

控制器调用服务，以获取所需的数据：

控制器1

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

控制器2,3,4 ...

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

现在我不知道一个正确的方法，实现一个从所有控制器访问的数据源＆＃34;。我不想对所有数据发出请求，对于每个控制器启动，它应该只进行一次。

如何自动更改所有其他控制器的数据，当产品在一个控制器中更新时，服务应该进行更新（尚未实施），当更新成功时，他们会集中数据＆＃34;应该改变，以及所有控制器数据。

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

Answer 1

如果您将$http与缓存选项一起使用，则只有一个控制器会生成＆＃34; real＆＃34;请求，所有其他人将从缓存中获取产品。

$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服务集中数据

1 个答案: