angularjs -- 頁面模板清除

時間 2020-06-09

原文原文鏈接

　　前幾天項目在上線過程當中，出現了一些新問題。頁面在切換時因爲前一個頁面的模板清理不及時，會形成頁面的重疊。致使這個問題的緣由是：頁面模板緩存，即上一個頁面退出時，瀏覽器沒有及時清空上一個頁面的模板，致使新頁面加載時，舊頁面模板依然存在，從而頁面出現重疊。javascript

模板緩存清除：

　　模板緩存的清除包括傳統的 HTML標籤設置清除緩存，以及angularJs的一些配置清除，和angularJs的路由切換清除html

一、如下是傳統的清除瀏覽器的方法java

　　HTMLmeta標籤設置清除緩存
瀏覽器

<!-- 清除緩存 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

　　清理form表單臨時緩存緩存

<body onLoad="javascript:document.formName.reset()">

二、angularJs配置清除緩存app

　　一、清除路由緩存，在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'; }]);

　　二、用隨機數，隨機數也是一種很不錯避免緩存的的方法，即在連接 URL 參數後加上隨機數(通常加時間戳) 。用隨機時間，和隨機數同樣。ide

　　三、在狀態路由配置中，將cache配置項，配置爲false。ui

.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配置 })

三、angularJs的路由切換清除緩存this

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去掉，達到清除模板緩存的目的，不過這個通常不建議直接修改框架源代碼！