0

service.js から返されるリソース オブジェクトをキャッシュして、API を何度もヒットさせず、応答時間を速くしたい。どのように使用できますか？いくつかのサンプルを試しましたが、うまくいきませんでした。

私のcontroller.js

app.controller('MyCtrl2', ['$scope', '$rootScope', '$location', 'UserFactory', 'ProductFactory', '$q', 'Reddit', function ($scope, $rootScope, $location, UserFactory, ProductFactory, $q, Reddit) {

  $scope.casualShirts = function () {
    console.log("casualshirts");
    $rootScope.home = ProductFactory.home.query({productcategory: 'Men Casual Shirts'});

    var pagesShown = 1;
    var pageSize = 21;

    $scope.paginationLimit = function(data) {
        //alert("34");
        return pageSize * pagesShown;
    };
    $scope.hasMoreItemsToShow = function() {
        return pagesShown < ($rootScope.home.length / pageSize);
    };
    $scope.showMoreItems = function() {
        pagesShown = pagesShown + 1;
    };
    $location.path('/view2');
}

}]);

私のservice.js

services.factory('ProductFactory', ['$resource', '$rootScope', '$cacheFactory', function ($resource, $rootScope, $cacheFactory) {
/*alert("I am here service");*/
console.log("casualshirts service");
return  {


    home: $resource('/rest/products/:productcategory', {}, {
        query: {method: 'GET', isArray: true,cache: $cacheFactory, },
        create: {method: 'POST'}
    })
}]);

また、しばらくするとキャッシュが更新される有効期限を設定するにはどうすればよいですか。

jsfiddle は非常に役立ちます。ここにいるすべての素晴らしい人に感謝します。

4

2 に答える 2

4

cacheプロパティはブール値または $cacheFactory サービス自体ではなく、$cacheFactory によって作成されたキャッシュ オブジェクトである必要があるため、$resource 宣言は少しずれていると思います。ドキュメントから：

cache – {boolean|Cache} – true の場合、GET リクエストをキャッシュするためにデフォルトの $http キャッシュが使用されます。それ以外の場合、$cacheFactory で構築されたキャッシュ インスタンスの場合、このキャッシュがキャッシュに使用されます。

に設定するtrueと、デフォルトでキャッシングが機能するはずです

 home: $resource('/rest/products/:productcategory', {}, {
    query: {method: 'GET', isArray: true, cache: true },
    create: {method: 'POST'}
})

デフォルトの $http キャッシュではなく独自のキャッシュ オブジェクトを使用する場合は、次のようにクレートします。

var myCache = $cacheFactory('myCache');

その後、myCache.removeAll()メソッドを使用していつでもクリアできます。https://docs.angularjs.org/api/ng/service/ $cacheFactoryを参照してください

デモ

myCache以下は、$cacheFactory で作成されたカスタム キャッシュ ( ) の使用を示すスニペットであり、キャッシュが期待どおりに機能することを示しています。

あなたのコードに大まかに基づいていますが、表示したいものを示すために変更する必要がありました。

var app = angular.module('app', ['ngResource']);

app.controller('myCtrl', function($scope, $resource, $cacheFactory, ProductFactory) {
	$scope.products = [];
	var myCache = $cacheFactory.get('myCache');
  
 	$scope.getProducts = function() {
    	ProductFactory.home.query({id: $scope.id})
  						   .$promise.then(function(product) {
                           		$scope.products = product;
                      			$scope.cache = myCache.info();
                      		});
    };
  
    $scope.clearCache = function() {
        myCache.removeAll();
        $scope.cache = myCache.info();
    };
  
  
});


app.factory('ProductFactory', function ($resource, $rootScope, $cacheFactory) {

  var myCache = $cacheFactory('myCache');
  
	return  {
    	home: $resource(
          	'http://jsonplaceholder.typicode.com/photos/', {}, 
          		{
        			query: {method: 'GET', isArray: true,cache: myCache },
        			create: {method: 'POST'}
				}
        	)
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.js"></script>

<div ng-app="app" ng-controller="myCtrl">
  
  <p><strong>Hint:</strong> open devtools and look at the network tab as you run this demo.
    You'll see that the request for a specific ID only occurrs once as long as the
    cache is not cleared.</p>
  
  Enter a product ID (1 - 5000): <input ng-model="id">
  <button ng-click="getProducts()">Get Products</button>
  
  <h3>Products:</h3>
  <pre>{{ products }}</pre>
  
  <h3>myCache:</h3>
  <pre>{{ cache }}</h3>
  
  <button ng-click="clearCache()">Clear myCache</button>
  
  
</div>

于 2014-09-22T16:39:46.203 に答える