详解Angular中$cacheFactory缓存的使用

前端技术 2023/09/09 JavaScript

最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧;

  首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码;服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码:

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

  这里‘myCache\'是服务名称,且是唯一,针对一个特定的缓存对象,存在于浏览器中,供控制器引用:

angular.module(\'yourApp\').
controller(\'userCtrl\',[\'$scope\',\'$http\',\'myCache\',function($scope,$http,myCache){     //监测是否已经存在缓存数据,如果有就获取然后该干嘛干嘛去
var cache=myCache.get(\'myData\');
if(cache){
$scope.variable=cache;
}else{
//从接口获取数据,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
});
}
}])

页面第一次打开时,会从接口中获取数据,当页面发生路由跳转时,这些数据是一直被缓存的,路由跳转到有需求的页面,监测到已经被缓存,就不用向服务器请求数据了,如果是页面被关闭或者是刷新了页面,缓存会丢失,重新向、请求数据并缓存;

这是个简单的示例,在实际项目中的数据会复杂些,比如为了页面优化减少而将页面数据集合请求,减少数据请求次数,获取到数据后分配的route的各个template中,数据结构会复杂些;

目前还没有缓存比较大的数据的示例,理论上这里的cache是javascript中的一个object对象,所以应用中cache的大小限制或大小对浏览器页面性能的影响,还不是很清楚,继续深扒,发现了不同点再来续更。

以上所述是小编给大家介绍的详解Angular中$cacheFactory缓存的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持!

本文地址:https://www.stayed.cn/item/24211

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。