溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Angularjs如何實現頁面模板清除的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。
模板緩存清除：
模板緩存的清除包括傳統的 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如何實現頁面模板清除的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
