如何使用靜態JSON內容對角度$ http cache（$ cacheFactory）進行初始化？

Question

我的目標是通過在$cacheFactory中緩存一些靜態JSON對象來使$http在我的本地文件系統上工作。我希望完全避免網絡請求，並只使用緩存的內容。

問題是$http正在發出服務器請求，無論緩存內容是否存在。我的代碼如下。

緩存廠

myApp.factory('jsonCache', function($cacheFactory){ 
    // create new cache object 
    // (tried $cacheFactory.get('$http') as well, but same result) 
    var cache = $cacheFactory('jsonCache'); 

    // put static value in cache 
    cache.put('/json/file1.json', {"key":"value"}); 

    return cache; 
}); 

廠使用$ HTTP

myApp.factory('AjaxFactory', function($http, jsonCache){ 

    console.log(jsonCache.info()); // {id: 'jsonCache', size: 1} 

    // this will make a request to "http://localhost/json/file1.json" 
    // even though there is an entry for that URL in the cache object 
    $http.get('/json/file1.json', {cache: jsonCache}).success(/* ... */); 

    return { /* ... */ }; 
}); 

在這一點上，我想這可能是我使用的cache.put()的數據格式，但不確定。

Answer 1

我居然能得到它的工作根據需要對這個花掉http://plnkr.co/edit/x1nfjwEoJOxzZN5PUyrX?p=preview

angular.module("myApp", []) 

.factory('jsonCache', function($cacheFactory) { 
    // create new cache object 
    // (tried $cacheFactory.get('$http') as well, but same result) 
    var cache = $cacheFactory('jsonCache'); 

    // put static value in cache 
    cache.put('file1.json', { 
    "key": "From Cache Factory" 
    }); 

    return cache; 
}) 

.factory('jsonFactory', function($http, jsonCache) { 

    var get = function(url) { 
    return $http.get(url, { 
     cache: jsonCache 
    }); 
    }; 

    return { 
    get: get 
    }; 

}) 

.controller("Ctrl", function($scope, jsonFactory, jsonCache) { 
    $scope.cacheInfo = jsonCache.info(); 

    jsonFactory.get('file1.json').success(function(res) { 
    $scope.json = res; 
    }); 
}); 

我認爲我的原始代碼的問題是許多第三方模塊依賴項之一的結果。 （！DOH）

我的，因爲它是代碼的解決方法，是如下：

myApp.factory('jsonFactory', function($http, $q, jsonCache){ 
    var get = function(url){ 
    var data = jsonCache.get(url); 

    // if data exists in cache, wrap in promise and return 
    // or do regular $http get 
    if(data){ 
     return $q(function(resolve, reject){ resolve(data); }); 
    } else { 
     return $http.get(url); 
    } 
    }; 

    return { 
    get: get 
    }; 
}); 

Answer 2

請參考下面的演示代碼，讚揚應該幫助你有點

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

 
app.config(function($stateProvider, $urlRouterProvider) { 
 
    // 
 
    // For any unmatched url, redirect to /state1 
 
    $urlRouterProvider.otherwise("/state1"); 
 
    // 
 
    // Now set up the states 
 
    $stateProvider.state('state1', { 
 
     url: "/state1", 
 
     template: "<h1>State1 </h1> <pre>{{cache | json}}</pre>", 
 
     controller: 'state1Ctrl' 
 
    }) 
 
    .state('state2', { 
 
     url: "/state2", 
 
     template: "<h1>State2 </h1><pre>{{cache | json}}</pre>", 
 
     controller: 'state2Ctrl' 
 
    }); 
 

 
}); 
 

 

 
app.controller('state1Ctrl', function($scope, myCache) { 
 

 
    var cache = myCache.cache.get('jsonCache'); 
 

 

 

 
    //check if cached data exist 
 

 
    if (cache) { 
 

 
    //use cached data 
 
    $scope.cache = myCache.cache.get('jsonCache'); 
 

 
    //if not update cache 
 
    } else { 
 
    myCache.update().success(function(data) { 
 

 
     //set cache 
 
     myCache.cache.put('jsonCache', data.info); 
 

 
     console.log(myCache.cache.info()); 
 

 

 
     //get cached data 
 
     $scope.cache = myCache.cache.get('jsonCache'); 
 

 
    }).error(function() { 
 

 
     console.log("error"); 
 
    }); 
 
    } 
 

 
}); 
 
app.controller('state2Ctrl', function($scope, myCache) { 
 
    var cache = myCache.cache.get('jsonCache'); 
 

 

 
    if (cache) { 
 
    $scope.cache = myCache.cache.get('jsonCache'); 
 

 
    } else { 
 
    myCache.update().success(function(data) { 
 

 
     myCache.cache.put('jsonCache', data.info); 
 

 
     console.log(myCache.cache.info()); 
 

 
     $scope.cache = myCache.cache.get('jsonCache'); 
 

 
    }).error(function() { 
 

 
     console.log("error"); 
 
    }); 
 
    } 
 

 
}); 
 
app.factory('myCache', function($cacheFactory, $http) { 
 
    // create new cache object 
 

 
    var cache = $cacheFactory('jsonCache'); 
 

 
    // put static value in cache 
 
    function update() { 
 
    alert("update") 
 
    return $http.get("https://ws.spotify.com/search/1/track.json?q=kaizers+orchestra"); 
 
    } 
 
    return { 
 
    cache: cache, 
 
    update: update 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
 
<script src=" 
 
       https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script> 
 

 
<meta charset="utf-8"> 
 
<title>JS Bin</title> 
 

 
<body ng-app="app"> 
 
    <div ui-view></div> 
 
    <!-- We'll also add some navigation: --> 
 
    <a ui-sref="state1">State 1</a> 
 
    <a ui-sref="state2">State 2</a> 
 
</body>