AngularJs 禁止模板缓存的方法


Posted in Javascript onNovember 28, 2017

本文介绍了AngularJs 禁止模板缓存的方法,分享给大家,也给自己留个笔记,具有如下:

因为AngularJs的特性(or 浏览器本身的缓存?),angular默认的HTML模板加载都会被缓存起来。导致每次修改完模板之后都得经常需要清除浏览器的缓存来保证浏览器去获得最新的html模板,自己测试还好,但如果更新了服务器的模板内容,用户可不会每个都配合你去清除浏览器的缓存。故这还真是个大问题。

app.config(function($routeProvider, $locationProvider) { 
 $routeProvider 
  .when('/Book/:bookId/ch/', { 
  templateUrl: 'chapter.html', 
  controller: 'ChapterController' 
 }); 
});

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

app.config(function($routeProvider, $locationProvider) { 
 $routeProvider 
  .when('/Book/:bookId/ch/', { 
  templateUrl: 'chapter.html' + '?datestamp=' + (new Date()).getTime(), 
  controller: 'ChapterController' 
 }); 
});

不过这种方法太不美观了。。。。

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

// 禁止模板缓存 
app.run(function($rootScope, $templateCache) { 
  $rootScope.$on('$routeChangeStart', function(event, next, current) { 
    if (typeof(current) !== 'undefined'){ 
      $templateCache.remove(current.templateUrl); 
    } 
  }); 
});

在配置 路由地址后,即在app.config之后添加这段代码,可禁止AngularJs将templateUrl缓存起来。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 #Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 #Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 #Javascript
Vue实现web分页组件详解
Nov 28 #Javascript
基于vue2实现左滑删除功能
Nov 28 #Javascript
JavaScript生成简单等差数列
Nov 28 #Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 #Javascript
You might like
php中mysql模块部分功能的简单封装
2011/09/30 PHP
微信支付扫码支付php版
2016/07/22 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
JS实现复制功能
2017/03/01 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
Python设计模式之命令模式简单示例
2018/01/10 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
小学教师学期末自我评价
2013/09/25 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
中学生打架检讨书
2014/10/13 职场文书
党性分析自查总结
2014/10/14 职场文书
世界气象日活动总结
2015/02/27 职场文书
开学典礼校长致辞
2015/07/29 职场文书