AngularJs 禁止模板缓存的方法

本文介绍了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缓存起来。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS实现Model缓存的方式

    在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope的某个变量. 有的直接把对象赋值给Scope变量:有的在Provider中返回一个对象再赋值给Scope变量:有的在Provider中返回一个构造函数再赋值给Scope变量.本篇来一一体验. 首先自定义一个directive,用来点击按钮改变一个scope变量值. angular .module('

  • AngularJS中的缓存使用

    缓存篇 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory与缓存对象 $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量.举个生动

  • 详解AngularJS中$http缓存以及处理多个$http请求的方法

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. 1.处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.

  • 使用Angular缓存父页面数据的方法

    angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的. 但有些问题也许资料比较少,最近遇到过一个要缓存父页面的问题,就是点击进入子页后,再返回时父页面的数据要缓存下来,包括滚动条的位置.再做的过程当中查过 许多资料,都说的不很详细,今天把方法记录下来,供参考. 要想缓存,要用到嵌套路由(ui-router):    有三个嵌套的方法: 使用"点标记法",例如:.state('contacts

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • AngularJS在IE下取数据总是缓存问题的解决方法

    本文实例讲述了AngularJS在IE下取数据总是缓存问题解决方法.分享给大家供大家参考,具体如下: 问题: 在使用AngularJS发出请求(GET)获取服务端数据,然后再绑定到页面中,你会发现在IE中总是显示原来的数据结果.这时候我们就会知道,IE做了缓存. 解决办法: 我们可以在AngularJS的配置中通过$httpProvider来设置其不缓存.具体如下所示: ngApp.config(function ($httpProvider) { // Initialize get if no

  • Angularjs在360兼容模式下取数据缓存问题的解决办法

    测试提了一个bug,在360浏览器兼容模式下,删除页面数据需要手动刷新浏览器才能看到最新的数据.首先要复现当时的问题,很容易就复现了,但是发现在360浏览器兼容模式下无法打开开发者工具.好在经过反复重装之后,终于打开了开发者工具,经过跟踪发现,第一次删除数据时可以正常刷新,第二次或以后的删除将无法刷新,跟踪代码,发现通过异步请求的数据正常的返回并且绑定了.点击搜索按钮,也无法实现刷新,但是点击分页,发现可以翻页.初步推断是浏览器缓存了异步请求数据,跟踪比较返回的数据发现,推断是正确的.于是从网上

  • AngularJs 禁止模板缓存的方法

    本文介绍了AngularJs 禁止模板缓存的方法,分享给大家,也给自己留个笔记,具有如下: 因为AngularJs的特性(or 浏览器本身的缓存?),angular默认的HTML模板加载都会被缓存起来.导致每次修改完模板之后都得经常需要清除浏览器的缓存来保证浏览器去获得最新的html模板,自己测试还好,但如果更新了服务器的模板内容,用户可不会每个都配合你去清除浏览器的缓存.故这还真是个大问题. app.config(function($routeProvider, $locationProvid

  • 关于angularJs清除浏览器缓存的方法

    缓存篇 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. 浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能.但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据.像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的. 以下是传统的清除浏览器的方法 meta方法

  • 在(ASP/PHP/JSP/html/js)中禁止ajax缓存的方法集锦

    ajax缓存有好处,但也有坏处,缓存有时候会导致误操作,影响用户体验,若你的WEB项目不需要ajax缓存功能,可按下述方法来禁止ajax缓存. 一.在ASP中禁止ajax缓存: '放在ASP网页最开头部分 Response.expires=0 Response.addHeader("pragma","no-cache") Response.addHeader("Cache-Control","no-cache, must-revalid

  • 模板视图和AngularJS之间冲突的解决方法

    本文实例讲述了模板视图和AngularJS之间冲突的解决方法.分享给大家供大家参考,具体如下: 问题: 在php的mvc视图中,我们需要在加载的过程中 传递一些数据给模板: 如: 这里是某个 controller $data['users'] = {something from databases}; $this->load->view('home/index',$data); 这里是对应的视图 <div ng-controller="loadData"> &l

  • 禁止IIS缓存静态文件的方法(png,js,html等)

    禁止IIS缓存静态文件的方法(png,js,html等)

    禁止IIS缓存静态文件(png,js,html等)背景:IIS为了提高性能,默认情况下会对静态文件js,html,gif,png等做内部缓存,这个缓存是在服务器iis进程的内存中的.IIS这么做在很大程度上可以提高静态文件的访问性能,在正常情况下只要静态文件更新了IIS也会更新缓存.但是如果更新的静态文件很多就有可能出现缓存不更新的情况. 弯路:我遇到这样一个场景,服务器循环更新上万张股票行情图片,IIS也会对图片进行缓存,由于更新的频率很高,文件很多,就出现了IIS缓存文件超过几十分钟都无法更

  • JavaWeb禁止浏览器缓存当前Web页面的方法

    所谓浏览器缓存,是指当第一次访问网页时,浏览器会将这些网页缓存到本地,当下一次再访问这些被缓存的网页时,浏览器就会直接从本地读取这些网页的内容,而无需再从网络上获取. 虽然浏览器提供的缓存功能可以有效地提高网页的装载速度,但对于某些需要实时更新的网页,这种缓存机制就会影响网页的正常显示.幸好在HTTP响应消息头中提供了三个字段可以关闭客户端浏览器的缓存功能.下面三条语句分别使用这三个字段来关闭浏览器的缓存: response.setDateHeader("Expires", 0); r

  • Angularjs实现页面模板清除的方法

    前几天项目在上线过程中,出现了一些新问题.页面在切换时由于前一个页面的模板清理不及时,会造成页面的重叠.导致这个问题的原因是:页面模板缓存,即上一个页面退出时,浏览器没有及时清空上一个页面的模板,导致新页面加载时,旧页面模板依然存在,从而页面出现重叠. 模板缓存清除: 模板缓存的清除包括传统的 HTML标签设置清除缓存,以及angularJs的一些配置清除,和angularJs的路由切换清除 1.以下是传统的清除浏览器的方法 HTMLmeta标签设置清除缓存 <!-- 清除缓存 --> <

  • AngularJS获取json数据的方法详解

    AngularJS获取json数据的方法详解

    本文实例讲述了AngularJS获取json数据的方法.分享给大家供大家参考,具体如下: 学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信息,展示在前端.Ok,需求很简单,那么我们就开始实现所提的功能需求. 代码框架 前端的代码通常包含三部分:html, css, 和JavaScript,我们使用html编写视图文件,css来进行视图样式控制,J

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

随机推荐