快捷導(dǎo)航

詳解Angular中$cacheFactory緩存的使用

更新時間：2016年08月19日 09:31:22 作者：薛陳磊

這篇文章主要介紹了Angular中$cacheFactory緩存的使用,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

最近在學(xué)習(xí)使用angular,慢慢從jquery ui轉(zhuǎn)型到用ng開發(fā)，發(fā)現(xiàn)了很多不同點，繼續(xù)學(xué)習(xí)吧；

　　首先創(chuàng)建一個服務(wù)，以便在項目中的controller中引用，服務(wù)有幾種存在形式，factory();service();constant();value();provider();其中provider是最基礎(chǔ)的，其他服務(wù)都是基于這個寫的，具體區(qū)別這里就不展開了，大家可以看看源碼；服務(wù)是各個controller之間通話的重要形式，在實際項目中會用的很多，下面是代碼：

angular.module('yourApp').factory('myCache',function($cacheFactory){
return $cacheFactory('myData');
});

　　這里‘myCache'是服務(wù)名稱，且是唯一，針對一個特定的緩存對象，存在于瀏覽器中，供控制器引用：

angular.module('yourApp').
controller('userCtrl',['$scope','$http','myCache',function($scope,$http,myCache){　　　　 //監(jiān)測是否已經(jīng)存在緩存數(shù)據(jù)，如果有就獲取然后該干嘛干嘛去
var cache=myCache.get('myData');
if(cache){
$scope.variable=cache;
}else{
//從接口獲取數(shù)據(jù)，put到緩存中
var jurl='/data/getdata';
$http({
url: jurl,
method: "GET",
data: "{'query':'somevalue'}",
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
//something in success　　　　　　　　　　
}).error(function (data, status, headers, config) {
//something in error
});
}
}])

頁面第一次打開時，會從接口中獲取數(shù)據(jù)，當(dāng)頁面發(fā)生路由跳轉(zhuǎn)時，這些數(shù)據(jù)是一直被緩存的，路由跳轉(zhuǎn)到有需求的頁面，監(jiān)測到已經(jīng)被緩存，就不用向服務(wù)器請求數(shù)據(jù)了，如果是頁面被關(guān)閉或者是刷新了頁面，緩存會丟失，重新向、請求數(shù)據(jù)并緩存；

這是個簡單的示例，在實際項目中的數(shù)據(jù)會復(fù)雜些，比如為了頁面優(yōu)化減少而將頁面數(shù)據(jù)集合請求，減少數(shù)據(jù)請求次數(shù)，獲取到數(shù)據(jù)后分配的route的各個template中，數(shù)據(jù)結(jié)構(gòu)會復(fù)雜些；

目前還沒有緩存比較大的數(shù)據(jù)的示例，理論上這里的cache是javascript中的一個object對象，所以應(yīng)用中cache的大小限制或大小對瀏覽器頁面性能的影響，還不是很清楚，繼續(xù)深扒，發(fā)現(xiàn)了不同點再來續(xù)更。

以上所述是小編給大家介紹的詳解Angular中$cacheFactory緩存的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: