javascript - 为 Controller 全局缓存 $resource api 请求

Question

我的 Angular 应用程序很大程度上依赖于一个 api 调用(例如 /api/example)。

我有多个路由、模块和 Controller 需要使用该 api 请求中的数据。例如我有:

public
|__feature1
  |__ feature1.controller.js
  |__ feature1.route.js
|__feature2
  |__ feature2.controller.js
  |__ feature2.route.js
|__core
  |__ core.controller.js
  |__ core.nav.controller.js
  |__ core.route.js
  |__ core.service.js
|__ app.js

每个功能 Controller 都需要来自 /api/example 的数据。

core.service.js的示例

angular.module('myApp')
.factory('MainService', ['$resource'
  function($resource) {
    return $resource('/api/example', {}, {
      get: {
        method: 'GET'
      }
    });
  }
]);

通常我会在 feature1/feature.controller.js 中做一些事情:

angular.module('feature1')
.controller('Feature1Ctrl', ['MainService',
  function(MainService){
    MainService
      .get()
      .$promise
      .then(function(data){
        console.log(data);
      });
  }
]);

然后我会在 feature2/feature2.controller.js

中执行相同的操作

angular.module('feature2')
.controller('Feature2Ctrl', ['MainService',
  function(MainService){
    MainService
      .get()
      .$promise
      .then(function(data){
        // do something with the SAME data again
        console.log(data);
      });
  }
]);

有没有一种方法可以让我的应用程序立即调用 API 并缓存请求数据，以便其他 Controller 无需发出多个请求即可访问它。

这样我基本上可以做一些类似的事情:

angular.module('core')
.controller('NavCtrl', ['MainServiceData',
  function(MainServiceData){
    // don't make request, just serve up data
    console.log(MainServiceData);
  }
]);

Answer 1

如果我理解正确的话，你可以毫不费力地缓存它。添加 cache : true 这样

angular.module('myApp')
.factory('MainService', ['$resource'
  function($resource) {
    return $resource('/api/example', {}, {
      get: {
        method: 'GET',
        cache : true // -- cached
      }
    });
  }
]);

我还建议您查看$cacheFactory如果您需要更复杂的解决方案。