快捷導(dǎo)航

詳解Angular中$cacheFactory緩存的使用

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

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

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

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

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

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

angular.module('yourApp').
controller('userCtrl',['$scope','$http','myCache',function($scope,$http,myCache){　　　　 //監(jiān)測(cè)是否已經(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í)，會(huì)從接口中獲取數(shù)據(jù)，當(dāng)頁面發(fā)生路由跳轉(zhuǎn)時(shí)，這些數(shù)據(jù)是一直被緩存的，路由跳轉(zhuǎn)到有需求的頁面，監(jiān)測(cè)到已經(jīng)被緩存，就不用向服務(wù)器請(qǐng)求數(shù)據(jù)了，如果是頁面被關(guān)閉或者是刷新了頁面，緩存會(huì)丟失，重新向、請(qǐng)求數(shù)據(jù)并緩存；

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

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

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

您可能感興趣的文章: