angularjs - 使用页内 JSON 初始化 AngularJS $resource

Question

我正在使用 AngularJS 的 $resource 来获取和更新一个对象。为了节省页面加载的往返行程，我将 JSON 对象放在页面上的一个变量中。如何使用这些数据初始化 $resource 而不是调用 $get？

Answer 1

您可以使用new以下方法创建资源实例$resource：

window.somePreloadedJson = {
  id: 1,
  name: 'lancelot',
  quest: 'holy grail',
  color: 'blue',
};

app.factory('myResource', function($resource) {
  return $resource('/my/fake/:id', { id: '@id' });
});

...

$scope.resource = new myResource(window.somePreloadedJson);

这是 jsFiddle 上此技术的一个示例，它演示了$save,$delete等在创建的实例上按预期工作。（添加了一些调试代码来注销 HTTP 请求，而不是实际发出请求，因此您可以看到页面中会发出哪些请求。）

Answer 2

您可以使用此处angular-mocks.js提供的脚本。该脚本允许您在运行时拦截服务调用并替换响应，这对于测试目的非常有用。

例如，给定一个服务：

app.factory('MyService', ['$resource', function($resource) {
    return $resource('http://myservice/service', {}, {
        get: {
            method:'GET', 
            params:{}, 
            isArray:false
        }
    });
}]);

可以这样重定向：

app.config(function($provide) {
    $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
});

app.run(function($httpBackend) {
    $httpBackend.whenGET(new RegExp(".*/myservice/service.*")).respond(200, mockData.fake);
    ...
}

模拟数据在这样的地方定义：

var mockData = new Object();
mockData.fake = ...

要激活虚假服务，只需包含 angular-mocks 脚本和上述定义，切换到普通服务只需注释掉或删除它们。

Answer 3

没有更好的答案让我感到非常沮丧。这是我的解决方案。我不知道它是否符合蹩脚的条件，但它对我有用：

# Loading json data from the document into angular seems to be a pain.
# The sole purpose of this controller is to make that easier.

# Let's say you want to load up the following JSON: [{"name": "Joe", "id": 1}]
# AND you have an angularjs service called People with a list
# You would do the following:

# <any_element ng-controller='JsonDataController' data-json='[{"name": "Joe", "id": 1}]' data-service='People' data-binding='list'></any_element>
# The controller would then set People.list = JSON.parse($attrs.json)

# And that's all there is to it.

window.JsonDataController = ['$scope', '$attrs', '$injector', ($scope, $attrs, $injector) ->
  service = $injector.get($attrs.service)
  attributeName = $attrs.binding
  service[attributeName] = JSON.parse($attrs.json)
  ]

Answer 4

您可以使用自定义 $cacheFactory 使用数据初始化 $resource。

假设您有：

window.initData = {
    '/request1': 'a',
    '/request2': [1, 2, 3],
    '/request3': {c: 'c', d: 'd'}
};

首先，创建自定义缓存工厂：

angular.module('app').factory('PreloadedCache', function($cacheFactory, $window) {
    var PreloadedCache = $cacheFactory('preloadedCache');

    // Pre-populating the $resource cache
    angular.forEach($window.initData, function(item, key) {
        PreloadedCache.put(key, item);
    });

    // Overwrite the put cache function - prevent saving in two places
    PreloadedCache.put = function() {};

    return PreloadedCache;
});

然后，在资源操作上声明一个缓存属性（来自文档）：

cache - {boolean|Cache} - 如果为真，默认的 $http 缓存将用于缓存 GET 请求，否则如果使用 $cacheFactory 构建的缓存实例，此缓存将用于缓存。

{action1: {method:?, params:?, cache: PreloadedCache, ...},
action2: {method:?, params:?, isArray:?, headers:?, cache: PreloadedCache, ...},
...}