オブジェクトの取得と更新に AngularJS の $resource を使用しています。ページ読み込み時の往復を節約するために、ページの変数に JSON オブジェクトを用意しました。$get を呼び出すのではなく、このデータで $resource を初期化するにはどうすればよいですか?
4 に答える
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 リクエストを作成するのではなく、ログアウトするためのデバッグ コードが追加されているため、ページでどのようなリクエストが行われたかを確認できます。)
これがうまく答えられないことは私にとって盲目的にイライラします。これが私の解決策です。それがラメと見なされるかどうかはわかりませんが、私にとってはうまくいきます:
# 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)
]
ここ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スクリプトと上記の定義を含めるだけです。通常のサービスに切り替えるには、コメントアウトするか削除します。
カスタム $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} – true の場合、GET リクエストをキャッシュするためにデフォルトの $http キャッシュが使用されます。それ以外の場合、$cacheFactory で構築されたキャッシュ インスタンスの場合、このキャッシュがキャッシュに使用されます。
{action1: {method:?, params:?, cache: PreloadedCache, ...},
action2: {method:?, params:?, isArray:?, headers:?, cache: PreloadedCache, ...},
...}