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

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后端，该后端将永久检索、添加、删除项目。因此，我希望摆脱服务中项数组的初始化，而不是从服务器检索它。我遇到了一些事情：

• getItems函数从角度多次调用(比如页面加载时调用5-6次，页面元素更改时调用更频繁)。因此，我希望避免每次在getItems函数中调用REST。
• 我可以在服务中创建一个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

$resources (从1.2开始) https://docs.angularjs.org/api/ngResource/service/$resource，它提供包装器与REST服务交互(CRUD)，并支持开箱即用的缓存。

示例：

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