angularjs -- 頁面模板清除
前幾天項目在上線過程中，出現了一些新問題。頁面在切換時由於前一個頁面的模板清理不及時，會造成頁面的重疊。導致這個問題的原因是：頁面模板緩存，即上一個頁面退出時，瀏覽器沒有及時清空上一個頁面的模板，導致新頁面加載時，舊頁面模板依然存在，從而頁面出現重疊。
模板緩存清除：
模板緩存的清除包括傳統的 HTML標簽設置清除緩存，以及angularJs的一些配置清除，和angularJs的路由切換清除
1、以下是傳統的清除瀏覽器的方法
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()">
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 -- 頁面模板清除