在工厂

时间:2015-11-20 08:37:42

标签: angularjs

我知道在Angular.js中控制器之间共享数据的适当方法是使用工厂或服务。

app.controller('Controller1', function($scope, DataService) {
  DataService.getValues().then(
    function(results) {
      // on success
      console.log('getValues onsuccess');
    });
});

app.controller('Controller2', function($scope, DataService) {
  DataService.getValues().then(
    function(results) {
      // on success
      console.log('getValues onsuccess');
    });
});

app.factory('DataService', function($http) {
  var getValues = function() {
    console.log('making http request');
    return $http.get("/api/getValues");
  };

  return {
    getValues: getValues
  }
});

我有两个控制器在工厂中调用相同的方法两次 这一切都很好,一切都按照应有的方式运作。我唯一关心的是,两次提出同样的请求似乎有点不必要?
使用$ broadcast会更好吗?
或者我可以将我的代码结构不同,以便只调用一次服务吗?

3 个答案:

答案 0 :(得分:1)

您可以将请求的结果存储在工厂中,然后检索这些结果。

app.factory('DataService', function($http) {
  var values;
  var requestValues = function() {
    console.log('making http request');
    $http.get("/api/getValues").then(
        function(results){
            values = results;
        });
  };
  var getValues = function() {
    return values;
  };
  return {
    requestValues : requestValues,
    getValues: getValues
  }
});

答案 1 :(得分:1)

如果您的数据是静态的,并且可能不会经常发生变化,您可以执行以下操作:

app.factory('DataService', function($http) {
  self = this;
  this.isLoaded = false;
  this.results;

  this.getValues = function() {
    console.log('making http request');
    $http.get("/api/getValues").then(
      function(results) {
        // on success
        console.log('getValues onsuccess');
        self.isLoaded = true
        this.results = results;
        return results;
      })
    );
  };
})

在控制器中:

app.controller('Controller2', function($scope, DataService) {
  if(!DataService.isLoaded){
    results = DataService.getValues()
  }else{
    results = DataService.results;
  }
});

答案 2 :(得分:1)

您应该考虑在DataService中进行缓存。添加一个变量来保存来自http服务的结果和一个时间戳变量来存储它的检索时间。

如果对服务的第二次调用是在预设的时间段内(比方说,5秒),则不会进行http调用,并返回缓存中的数据。

app.factory('DataService', function($http) {
    var cachedValue = null;
    var lastGet = null;
    var getValues = function() {
        var timeNow = new Date();
        if (cachedValue == null || ((timeNow - lastGet) < 5000)) {
            console.log('making http request');
            lastGet = timeNow;
            cachedValue = $http.get("/api/getValues");
        } else console.log('returning cached value');
        return cachedValue;
    };

    return {
        getValues: getValues
    }
});