189 8069 5689

Angularjs如何实现页面模板清除的方法-创新互联

这篇文章主要介绍了Angularjs如何实现页面模板清除的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联公司是一家专业提供建始企业网站建设,专注与成都网站设计、成都做网站、HTML5、小程序制作等业务。10年已为建始众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。js有什么特点

1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。

模板缓存清除:

  模板缓存的清除包括传统的 HTML标签设置清除缓存,以及angularJs的一些配置清除,和angularJs的路由切换清除

1、以下是传统的清除浏览器的方法

  HTMLmeta标签设置清除缓存




  清理form表单临时缓存

2、angularJs配置清除缓存

  1、清除路由缓存,在route路由配置中,注入$httpProvider服务,通过$httpProvider服务配置,清除路由缓存。

app.config(["$stateProvider","$urlRouterProvider",'$locationProvider','$httpProvider',function ($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) {
  if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
  }
  $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
  $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
  $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

  2、用随机数,随机数也是一种很不错避免缓存的的方法,即在链接 URL 参数后加上随机数(一般加时间戳) 。用随机时间,和随机数一样。

  3、在状态路由配置中,将cache配置项,配置为false。

.state("discountCoupon", {
  url: "/discountCoupon",
  templateUrl: "discountCoupon.html?" + new Date().getTime(),    //随机数
  controller: 'discountCoupon',
  cache: false,    //cache配置
})
.state("customerPhone", {
  url: "/customerPhone",
  templateUrl: "customerPhone.html?" + new Date().getTime(),    //随机数
  controller: 'customerPhone',
  cache: false,    //cache配置
})

3、angularJs的路由切换清除缓存

angularJs默认 模板加载都会被缓存起来,使用的缓存服务是 $tempalteCache, 发送模板请求的服务是$templateRequest,所以可以在路由切换时将上一个页面的模板清除:

  1.每次发送 $http 请求模板完成后,可以调用 $tempalteCache.remove(url)  或 $tempalteCache. removeAll 清除所有模板缓存。

$rootScope.$on('$stateChangeStart',   //路由开始切换
  function (event, toState, toParams, fromState, fromParams) {
    //路由开始切换,清除以前所有模板缓存
    if (fromState.templateUrl !== undefined) {
      $templateCache.remove(fromState.templateUrl);
      // $templateCache.removeAll();
    }
  });
$rootScope.$on('$stateChangeSuccess',    //路由切换完成
  function (event, toState, toParams, fromState, fromParams) {
  //路由切换成功,清除上一个页面模板缓存
  if (fromState.templateUrl !== undefined) {
    $templateCache.remove(fromState.templateUrl);
    // $templateCache.removeAll();
  }
});

  2.使用 $provide.decorator 改写原生的 $templateRequest (angularJs 自带 $provide服务里  $templateRequest: $TemplateRequestProvider)服务。在 $TemplateRequestProvider 服务里面我们可以看到默认使用了 $tempalteCache (本质还是 angularJs 的  $cacheFactory 服务) 服务,

this.$get = ['$templateCache', '$http', '$q', '$sce', function($templateCache, $http, $q, $sce) {
  function handleRequestFn(tpl, ignoreRequestError) {
    handleRequestFn.totalPendingRequests++;

并在获取模板时,默认以 $templateCache 作为 cache使用,将获取到的模板数据,添加到 $templateCache内保存。

return $http.get(tpl, extend({
  cache: $templateCache,
  transformResponse: transformResponse
}, httpOptions))
  ['finally'](function () {
  handleRequestFn.totalPendingRequests--;
})
  .then(function (response) {
    $templateCache.put(tpl, response.data);
    return response.data;
  }, handleError);

所以可以通过禁掉缓存,在 $templateRequest 的源码中将 $tempalteCache去掉,达到清除模板缓存的目的,不过这个一般不建议直接修改框架源代码!

感谢你能够认真阅读完这篇文章,希望小编分享的“Angularjs如何实现页面模板清除的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网页题目:Angularjs如何实现页面模板清除的方法-创新互联
分享链接:http://cdxtjz.cn/article/doisip.html

其他资讯