Angularjs中的缓存以及缓存清理,angularjs缓存清理

By admin in 4858美高梅 on 2019年4月16日

写在最前面:那篇博文是2篇文章组成,详细介绍了Angularjs中的缓存以及缓存清理,小说由新加坡尚学堂转发过来,欢迎大家阅读和评价。转发请注解出处,谢谢!

Angularjs中的缓存以及缓存清理,angularjs缓存清理

写在最终边:那篇博文是二篇小说组成,详细介绍了Angularjs中的缓存以及缓存清理,小说由北京尚学堂转发过来,欢迎大家阅读和评论。转发请注脚出处,多谢!

 

 

叁个缓存正是3个组件,它能够透明地囤积数据,以便现在能够更加快地劳动于请求。多次重复地取得财富可能会形成数据再度,消耗费时间间。由此缓存适用于变化性非常小的片段数额,缓存能够服务的央浼更加多,整连串统本性就能提拔更加多。
 

因为Angularjs中的缓存以及缓存清理,angularjs缓存清理。AngularJS的特色(or
浏览器本人的缓存?),angular默许的HTML模板加载都会被缓存起来。导致每便修改完模板之后都得时时供给排除浏览器的缓存来担保浏览器去获取最新的html模板,本人测试幸亏,但如若更新了服务器的沙盘内容,用户可不会每一个都合作你去排除浏览器的缓存。故那还真是个大标题。

转自:

 

 1、 $cacheFactory 简介 

  

$cacheFactory 是多个为具有Angular服务浮动缓存对象的劳务。在里面,
$cacheFactory 会创设四个暗许的缓存对象,就算大家并未展现地创立。

4858美高梅 ,要创造1个缓存对象,能够行使 $cacheFactory 通过一个ID创立贰个缓存:

var cache = $cacheFactory('myCache');

这些 $cacheFactory 方法能够承受五个参数:

cacheId (字符串):那一个 cacheId 正是创制缓存时的ID名称。能够经过 get()
方法应用缓存名称来引用它。

capacity
:那一个体量描述了在别的给定时期要采纳缓存存款和储蓄并保留的缓存键值对的最大数额。

 

[javascript] view
plain copy

$http

 

二、 缓存对象

缓存对象自小编有下列那个方法能够用来与缓存交互。

info() : info() 方法再次来到缓存对象的ID、尺寸和选用。

put() : put()
方法允许大家把任意JavaScript对象值格局的键(字符串)放进缓存中。cache.put(“hello”,”world”);

put() 方法会重返大家放入缓存中的值。

get() : get()
方法让大家能够访问一个键心心相印的缓存值。假使找到了那一个键,它会重临它的值;假设未有找到,它会回来
undefined 。cache.get(“hello”);

remove() : remove()
函数用于在找到1个键值对的景况下从缓存中移除它。即使未有找到,它就会再次来到undefined 。cache.remove(“hello”);

removeAll() : removeAll() 函数用于重新载入参数缓存,同时移除全数已缓存的值。

destory() : destory() 方法用于从 $cacheFactory
缓存注册表中移除内定缓存的有所引用。

 

 4858美高梅 14858美高梅 2

$http服务是根据$q劳动的,提供了promise封装,它承受3个布署对象参数,并回到3个promise对象。同时,它还提供了叁个法子用来定义Promise回调:success
和 error。

贰个缓存正是一个零件,它能够透明地蕴藏数据,以便以后能够更加快地劳动于请求。数十次重复地获得财富只怕会变成数据重复,消耗费时间间。由此缓存适用于变化性十分小的有些数目,缓存能够服务的乞求愈多,整种类统质量就能升官越来越多。
 

三、$http中的缓存

  $http()方法允许大家传递一个cache参数。当数码不会时时转移的时候,默许的$http缓存会特别有用。个中,暗许的$http缓存对象是 var cache =
$cacheFactory(‘$http’); 能够这样设置它

 

$http({
     method: 'GET',
     url: 'api/user.json',
     cache: true
})

  在那之中,缓存的键值为url, var userCache =
cache.get(‘api/user.json’) 

  1. app.config(function($routeProvider, $locationProvider) {  
  2.   $routeProvider  
  3.    .when(‘/Book/:bookId/ch/’, {  
  4.     templateUrl: ‘chapter.html’,  
  5.     controller: ‘ChapterController’  
  6.   });  
  7. });  

 

 1、 $cacheFactory 简介 

  

$cacheFactory 是二个为具备Angular服务浮动缓存对象的服务。在里面,
$cacheFactory 会创建三个暗中认可的缓存对象,就算我们并不曾出示地创立。

要创设三个缓存对象,能够运用 $cacheFactory 通过八个ID创制一个缓存:

var cache = $cacheFactory('myCache');

本条 $cacheFactory 方法能够承受多少个参数:

cacheId (字符串):这一个 cacheId 正是创设缓存时的ID名称。能够经过 get()
方法运用缓存名称来引用它。

capacity
:这些容积描述了在其余给按期期要采取缓存存款和储蓄并保留的缓存键值对的最大数据。

 

4、自定义缓存

  通过自定义的缓存来让$http发起呼吁也相当粗略,只需把cache值设为对应缓存对象名称就能够

 

$http({
     method: 'GET',
     url: 'api/user.json',
     cache: myCache
})

 

  大概经过config配置来设置每一种$http请求的缓存对象,而不必像上面的事例中,往每三个$http请求中投入配置

app.config(function($httpProvider){
    $httpProvider.defaults.cache = $cacheFactory('myCache',{capacity: 20})

 

  在这之中,capacity会动用”近期缓存最久未采纳算法”,正是说,加如缓存体量为20,以后已经缓存了缓存十多少个,当第壹二个想要被缓存的时候,最久最小未被选用的缓存键值对会被拔除,以便腾出空间容纳第二三个缓存。

先讲到那里,接下去再看看《【新加坡前端培养和练习】Angularjs中的缓存清理》,

壹、清除模板缓存

 

[javascript] view plain copy  

  1. .run(function($rootScope, $templateCache) {    
  2.             $rootScope.$on(‘$routeChangeStart’, function(event, next, current) {    
  3.                 if (typeof(current) !== ‘undefined’){    
  4.                     $templateCache.remove(current.templateUrl);    
  5.                 }    
  6.             });    
  7.         });   
  8. 东京前端培养和操练  shsxt.com/html伍

2、html增添随机参数

 

[javascript] view plain copy  

  1. .state(“content”, {  
  2.                url: “/”,  
  3.                views:{  
  4.                    “bodyInfo”:{templateUrl: ‘tpls/bodyInfo.html?’+ +new Date(),  
  5.                        controller:’bodyInfoCtrl’},  
  6.                    “header”:{templateUrl: ‘tpls/header.html?’+ +new Date(),  
  7.                        controller:’headerCtrl’  
  8.                    },  
  9.                    “footer”:{templateUrl: ‘tpls/footer.html?’+ +new Date(),  
  10.                        controller:’footerCtrl’  
  11.                    }  
  12.                }  
  13.             })  

[html] view plain copy  

  1. <link rel=”stylesheet” href=”stylesheets/main.css?version=1.0.3″>  

三、清除route缓存

 

[javascript] view plain copy  

  1. .config([‘$stateProvider’, ‘$urlRouterProvider’,’$locationProvider’,’$httpProvider’,function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) {  
  2. //         $urlRouterProvider.when(“”, “/home”);  
  3.             $urlRouterProvider.otherwise(‘/’);  
  4.              if (!$httpProvider.defaults.headers.get) {  
  5.               $httpProvider.defaults.headers.get = {};  
  6.             }  
  7.             $httpProvider.defaults.headers.common[“X-Requested-With”] = ‘XMLHttpRequest’;  
  8.             $httpProvider.defaults.headers.get[‘Cache-Control’] = ‘no-cache’;  
  9.             $httpProvider.defaults.headers.get[‘Pragma’] = ‘no-cache’;  
  10. 香江前端培养和训练  shsxt.com/html5

对此Angularjs中的缓存介绍,推荐阅读《【法国首都前端培养和陶冶】Angularjs中的缓存》;如需越来越多前端技术小说,请点击
法国巴黎前端培养和锻炼

写在最前方:那篇博文是二篇小说组成,详细介绍了Angularjs中的缓存以及缓存清理,小说由…

方法一:在模板文件路线后加时间戳(or
其余随机数),强制AngularJs每一次从服务器加载新的沙盘

[javascript] view
plaincopy4858美高梅 34858美高梅 4

二、 缓存对象

缓存对象自作者有下列那个点子能够用来与缓存交互。

info() : info() 方法再次回到缓存对象的ID、尺寸和抉择。

put() : put()
方法允许大家把任意JavaScript对象值格局的键(字符串)放进缓存中。cache.put(“hello”,”world”);

put() 方法会再次来到大家放入缓存中的值。

get() : get()
方法让大家能够访问贰个键一见依然的缓存值。假若找到了那一个键,它会重返它的值;假若未有找到,它会回来
undefined 。cache.get(“hello”);

remove() : remove()
函数用于在找到二个键值对的事态下从缓存中移除它。倘诺未有找到,它就会回来
undefined 。cache.remove(“hello”);

removeAll() : removeAll() 函数用于复位缓存,同时移除全部已缓存的值。

destory() : destory() 方法用于从 $cacheFactory
缓存注册表中移除钦命缓存的具有引用。

 

[javascript] view
plain copy

 

三、$http中的缓存

  $http()方法允许大家传递三个cache参数。当数码不会时时转移的时候,暗中同意的$http缓存会尤其有用。当中,默许的$http缓存对象是 var cache =
$cacheFactory(‘$http’); 能够那样设置它

 

$http({
     method: 'GET',
     url: 'api/user.json',
     cache: true
})

  在那之中,缓存的键值为url, var userCache =
cache.get(‘api/user.json’) 

 4858美高梅 54858美高梅 6

  1. $http({method:”GET”, url:”/someUrl”}).  
  2.     success(function(data, status, headers, config){  
  3.         //当异步请求成功重临响应时触发  
  4.     }).error(function(data, status, headers, config){  
  5.         //当产生特别时触发  
  6.     });  

肆、自定义缓存

  通过自定义的缓存来让$http发起呼吁也异常的粗略,只需把cache值设为对应缓存对象名称就可以

 

$http({
     method: 'GET',
     url: 'api/user.json',
     cache: myCache
})

 

  只怕通过config配置来设置每个$http请求的缓存对象,而不要像上边的事例中,往每一个$http请求中投入配置

app.config(function($httpProvider){
    $httpProvider.defaults.cache = $cacheFactory('myCache',{capacity: 20})

 

  个中,capacity会利用”近日缓存最久未利用算法”,正是说,加如缓存体积为20,未来早已缓存了缓存1几个,当第壹1个想要被缓存的时候,最久最小未被应用的缓存键值对会被解决,以便腾出空间容纳第三三个缓存。

先讲到那里,接下去再看看《【新加坡前端培养和锻炼】Angularjs中的缓存清理》,

一、清除模板缓存

 

[javascript] view
plain copy

 

  1. .run(function($rootScope, $templateCache) {    
  2.             $rootScope.$on(‘$routeChangeStart’, function(event, next, current) {    
  3.                 if (typeof(current) !== ‘undefined’){    
  4.                     $templateCache.remove(current.templateUrl);    
  5.                 }    
  6.             });    
  7.         });   
  8. 新加坡前端培养和陶冶  shsxt.com/html伍

二、html增加随机参数

 

[javascript] view
plain copy

 

  1. .state(“content”, {  
  2.                url: “/”,  
  3.                views:{  
  4.                    “bodyInfo”:{templateUrl: ‘tpls/bodyInfo.html?’+ +new Date(),  
  5.                        controller:’bodyInfoCtrl’},  
  6.                    “header”:{templateUrl: ‘tpls/header.html?’+ +new Date(),  
  7.                        controller:’headerCtrl’  
  8.                    },  
  9.                    “footer”:{templateUrl: ‘tpls/footer.html?’+ +new Date(),  
  10.                        controller:’footerCtrl’  
  11.                    }  
  12.                }  
  13.             })  

[html] view
plain copy

 

  1. <link rel=”stylesheet” href=”stylesheets/main.css?version=1.0.3″>  

三、清除route缓存

 

[javascript] view
plain copy

 

  1. .config([‘$stateProvider’, ‘$urlRouterProvider’,’$locationProvider’,’$httpProvider’,function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) {  
  2. //         $urlRouterProvider.when(“”, “/home”);  
  3.             $urlRouterProvider.otherwise(‘/’);  
  4.              if (!$httpProvider.defaults.headers.get) {  
  5.               $httpProvider.defaults.headers.get = {};  
  6.             }  
  7.             $httpProvider.defaults.headers.common[“X-Requested-With”] = ‘XMLHttpRequest’;  
  8.             $httpProvider.defaults.headers.get[‘Cache-Control’] = ‘no-cache’;  
  9.             $httpProvider.defaults.headers.get[‘Pragma’] = ‘no-cache’;  
  10. 东京前端培养和磨练  shsxt.com/html五

对此Angularjs中的缓存介绍,推荐阅读《【东京前端培养和磨炼】Angularjs中的缓存》;如需越多前端本领小说,请点击
巴黎前端培养和练习

  1.  <pre name=”code” class=”javascript”>app.config(function($routeProvider, $locationProvider) {  
  2.   $routeProvider  
  3.    .when(‘/Book/:bookId/ch/’, {  
  4.     templateUrl: ‘chapter.html’ + ‘?datestamp=’ + (new Date()).getTime(),  
  5.     controller: ‘ChapterController’  
  6.   });  
  7. });  

 

只是那种措施太不佳看了。。。。

 

方法二:使用$templateCache清除缓存

鉴于常用的http请求就那么二种,$http服务完成了对应的简便方法,比方说:
$http.get
$http.post
$http.put
$http.delete
$http.head
$http.jsonp

[javascript] view
plain copy

$http为每便请求自动增多了HTTP
header,可因此$httpProvider.defaults.headers来安插相关内容。

 4858美高梅 74858美高梅 8

$httpProvider.defaults.headers.common设置了具有请求都会含有的头新闻:

  1. // 禁止模板缓存  
  2. app.run(function($rootScope, $templateCache) {  
  3.     $rootScope.$on(‘$routeChangeStart’, function(event, next, current) {  
  4.         if (typeof(current) !== ‘undefined’){  
  5.             $templateCache.remove(current.templateUrl);  
  6.         }  
  7.     });  
  8. });  

Accept: application/json, text/plain, * / *
x-Requested-With: XMLHttpRequest

在安顿路由地点后,即在app.config之后增多那段代码,可禁止AngularJs将templateUrl缓存起来。

$httpProvider.defaults.headers.post设置了POST请求的默许请求头:

Content-Type: application/json

$httpProvider.defaults.headers.put设置了PUT请求的暗中同意请求头:

Content-Type: application/json

此外,关于$http的cache天性,推荐看一下那篇文章。

那正是说$http的相关内容,就先到此结束。

 

现行反革命,我们发轫看看$resource,供给留意的是,该服务须要我们手动加载angular-resource.js文件~
$resource服务的基本价值在于:提要求开荒者与RESTful风格Web瑟维斯s交互的越来越好的用户体验,它包裹了对比低端的$http,那样就不供给前端开辟者写大批量的异步请求代码了。

$resource服务的布局格局:

 

[javascript] view
plaincopy4858美高梅 94858美高梅 10

 

  1. $resource(url[, paramDefaults][, actions]);  

url

 

字符串类型,当中能够出现占位符,占位符要以“:”为前缀,倘若系统的域名带端口号的话,要求手动转义:
应当那样传入:

 

[javascript] view
plaincopy4858美高梅 114858美高梅 12

 

  1. $resource(“”);  

那种气象在ng的一.2.0rc一版本早已不设有了,端口号会被辨认而不要求手工转义~~

 

paramDefaults(可选)

目的类型,用于安装参数的暗许值,它设置的数值能够被actions(第多少个参数)实行覆盖。假诺设置的参数值是函数,那么该函数将要历次获得其值时被执行(有那么点废话的情致)。

对此设置的尚未出现在url模板(第2个参数)中的参数,将会以search
query的办法丰硕,例如:
如果url模板为/codingcool/:author,paramDefaults为{author:”kazaff”,
profession:”geek”},那么最后的呼吁url会产生:
/codingcool/kazaff?profession=geek

若果参数值是以“@”初叶的,那么其诚实值将会从数据对象中领到,后边会有例子。

actions(可选)

对象类型,用来定义$resource提供的能够接纳办法,表明细节和$http一样。

上面再来看一下$resource的再次回到值:
重返值的类型是目标,它蕴涵了和点名服务api(即url)实行交互的富有办法,暗中认可会蕴含如下私下认可方法:

 

[javascript] view
plaincopy4858美高梅 134858美高梅 14

 

  1. { ‘get’:    {method:’GET’},  
  2.   ‘save’:   {method:’POST’},  
  3.   ‘query’:  {method:’GET’, isArray:true},  
  4.   ‘remove’: {method:’DELETE’},  
  5.   ‘delete’: {method:’DELETE’}  
  6. };  

 

那个方法会调用内置的$http服务~

当异步请求成功,数据从劳动器端取回后,被装进到多少个$resource服务的3个对象实例中,这些指标足以被save,remove,delete方法间接操作,那种封装并提供轻松的CRUD操作的点子,使得开荒者能够感受到被赏识啊!呵呵~

[javascript] view
plaincopy4858美高梅 154858美高梅 16

 

  1. var User = $resource(‘/user/:userId’, {userId:’@id’});  
  2. var user = User.get({userId:123}, function() {  
  3.   user.abc = true;  
  4.   user.$save();  
  5. });  

瞩目上面代码中的”@id”和”$save()”,使用了@后,当实行$save时,user.id就会被视作userId的值来发送请求。

那种办法封装Ajax,不仅仅使得代码更加文雅,而且还能够匹配ng的视图渲染:当数码尚未回到以前,模板引擎不会渲染,一旦异步数据获得成功,会活动触发模板引擎的渲染机制把数据显现到视图中。

末尾,看1个总结的事例:

AngularJS的$resource

[html] view
plaincopy4858美高梅 174858美高梅 18

 

  1. <!DOCTYPE html>  
  2. <html ng-app=”Demo”>  
  3. <head>  
  4. <meta charset=utf-8 />  
  5. <title>ngResource DEMO</title>  
  6. </head>  
  7. <body>  
  8.     <div ng-controller=”GeekListCtrl”>  
  9.         <ul>  
  10.             <li ng-repeat=”geek in geeks”>  
  11.                 <a href=”#” ng-click=”show({{geek.id}})”>{{geek.name}}</a>  
  12.             </li>  
  13.         </ul>  
  14.         <div ng-show=”user”>  
  15.             {{user.msg}}  
  16.         </div>  
  17.     </div>  
  18.      
  19.     <script src=”./src/angular.js”></script>  
  20.     <script src=”./src/angular-resource.js”></script>  
  21.     <script type=”text/javascript”>  
  22.         var Demo = angular.module(‘Demo’, [“ngResource”])  
  23.                     .factory(‘Geek’, function ($resource){  
  24.                         return $resource(“geek/:geekId.json”, {}, {  
  25.                             query: {  
  26.                                 method: “GET”,  
  27.                                 params: {geekId: “list”},  
  28.                                 isArray: true  
  29.                             }  
  30.                         });  
  31.                     });  
  32.   
  33.         function GeekListCtrl($scope, Geek){  
  34.             $scope.geeks = Geek.query();  
  35.             $scope.show = function(id){  
  36.                 $scope.user = Geek.get({geekId: id});  
  37.             };  
  38.         }  
  39.   
  40.         function GeekDetailCtrl($scope, $routeParams, Geek){  
  41.             $scope.geek = Geek.get({geekId: $routeParams.geekId}, function(geek){  
  42.                 console.dir(geek);  
  43.             });  
  44.         }  
  45.     </script>  
  46. </body>  
  47. </html>  

转自:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有