Question

我已经创建了一个代表我的应用程序中的模型的服务（angular.js）：

angular.module("MyApp").factory('ItemService', function() {

  this.items = [1, 2, 3];

  this.getItems = function() {
    return items;
  };

  this.addItem = function(i) { ... };
  this.deleteItem = function(i) { ... };

  return this;

});

和我的控制员：

angular.module('ItemController', function($scope, ItemService) {
  $scope.getItems = function() {
    return ItemService.getItems();
  };
});

现在我想将我的服务连接到REST后端，该后端会永久地检索，添加，删除项目。所以我想摆脱我的服务中的items数组的初始化，并希望从服务器中检索它。我遇到的一些事情：

getItems函数从Angular多次调用（如页面加载时为5-6次，页面元素更改时更常见）。所以我想避免每次在getItems函数中进行REST api调用。
我可以在我的服务中创建一个init（）方法，使用REST请求初始化items数组。但是如何确保在调用getItems之前完成此初始化。
我可以在getItems（）中创建一个条件来检查items数组是否为null。如果是这样，请从后端初始化它，如果没有返回已保存的数组。
注意：getItems不是唯一使用items数组的函数。例如addItem，deleteItem等也使用它。

许多方法可以做同样的事情，但使用Angular.js执行此操作的正确/最佳方法是什么？

Answer 1

我会通过利用可用作角度ng模块一部分的$ cacheFactory服务来实现。此服务将帮助您在浏览器端放置，删除和从缓存中获取对象。

来实施：

1）在您的服务中注入$ cacheFactory

angular.module("MyApp").factory('ItemService', ['$cacheFactory',function($cacheFactory)

2）使用基本缓存模式修改getItems方法

var items = $cacheFactory.get('cachedItems')
if (!items){
   //make a $http call
   items = $http.get to your url
   //set the retrieved object in cache
   $cacheFactory.put('cachedItems',items);   
}
return items;

3）在您的其他添加/删除/更新方法中，我将在服务器端更新成功后清除缓存

$cacheFactory.remove('cachedItems');

您可以在此处找到有关$ cacheFactory的更多详细信息：https://docs.angularjs.org/api/ng/service/ $ cacheFactory

Answer 2

Angular $资源（从1.2开始）https://docs.angularjs.org/api/ngResource/service/ $资源它提供了与REST服务交互（CRUD）的包装器，并支持开箱即用的缓存。

示例：

var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(user) {
  user.abc = true;
  user.$save();
});

将服务连接到REST API的正确方法

2 个答案: