Angular 缓存 $resource 结果

Question

我正在寻找一种在 angular js 应用程序中缓存语言翻译的方法。

在申请中，有很多表格需要翻译。为了获得可用的语言，我使用 $resource 从我们的语言 API.

中获取它们

首先，我在应用程序运行()

上创建了一个空的语言数组

angular
  .module('admin', [])
  .run(['$rootScope',
    function($rootScope) {
      $rootScope.languages = [];
    }
  )
;

然后我创建一个服务来处理翻译和语言查询

angular
  .module('admin')
  .factory('Utils', ['$rootScope', 'Language',
    function($rootScope, Language) {
      var utils = {};

      utils.getLanguages = function() {
        if ($rootScope.languages.length > 0) {
          return $rootScope.languages;
        }

        var languages = Language.query(function(data) {
          $rootScope.languages = data;
        });

        return languages;
      }

      return utils;
    }
  )
;

并在控制器中

angular
  .module('admin')
  .controller('CategoryController', ['$scope', 'Utils',
    function($scope, Utils) {
      $scope.languages = Utils.getLanguages();
    }
  ])
;

这就是我缓存 $resource 结果的方式。您如何看待这个解决方案？可以在 $rootScope 中缓存吗？

我想要缓存结果的原因是因为我需要大多数控制器中的语言，所以我不想每次访问新状态时都请求语言 API。

Answer 1

您可以对实施进行一些改进。

您不需要使用 $rootScope 来保存语言然后通过服务公开它。您可以很好地使用服务并将结果缓存在服务中。

像这样应该是更好的选择

angular.module('admin')
    .factory('LanguageCache', ['$rootScope', 'Language',
function ($rootScope, Language) {
    var service = {};
    var cache;

    service.getLanguages = function () {
        if (cache) {
            return cache;
        }

        var languages = Language.query(function (data) {
            cache = data;
        });

        return cache;
    }

    return service;
});

这样语言缓存将可用于需要它的服务。它不会污染全局$rootScope对象。

Angular 缓存 $resource 结果

Angular Cache $resource Result

javascript

caching

angularjs