angularjs關於頁面模板清除的使用方法-js教程-PHP中文網

angularjs關於頁面模板清除的使用方法

不言

發布： 2018-07-20 09:40:07

原創

1447 人瀏覽過

這篇文章要跟大家介紹的內容是關於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",&#39;$locationProvider&#39;,&#39;$httpProvider&#39;,function ($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) {    
if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};
    }
    $httpProvider.defaults.headers.common["X-Requested-With"] = &#39;XMLHttpRequest&#39;;
    $httpProvider.defaults.headers.get[&#39;Cache-Control&#39;] = &#39;no-cache&#39;;
    $httpProvider.defaults.headers.get[&#39;Pragma&#39;] = &#39;no-cache&#39;;}]);

登入後複製

2、用隨機數，隨機數也是一個很不錯避免快取的的方法，即在連結 URL 參數後加上隨機數(一般加時間戳) 。用隨機時間，和隨機數一樣。

3、在狀態路由配置中，將cache配置項，配置為false。

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

登入後複製

3、angularJs的路由切換清除快取

angularJs預設範本載入都會被快取起來，使用的快取服務是$tempalteCache,發送模板請求的服務是$templateRequest，所以可以在路由切換時將上一個頁面的模板清除：

1.每次發送$http 請求模板完成後，可以調用$tempalteCache.remove(url)或$tempalteCache. removeAll 清除所有模板快取。

$rootScope.$on(&#39;$stateChangeStart&#39;,     //路由开始切换
    function (event, toState, toParams, fromState, fromParams) {        
    //路由开始切换，清除以前所有模板缓存
        if (fromState.templateUrl !== undefined) {
            $templateCache.remove(fromState.templateUrl);            
            // $templateCache.removeAll();        }
    });

$rootScope.$on(&#39;$stateChangeSuccess&#39;,       
//路由切换完成
    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 = [&#39;$templateCache&#39;, &#39;$http&#39;, &#39;$q&#39;, &#39;$sce&#39;, function($templateCache, $http, $q, $sce) {    
function handleRequestFn(tpl, ignoreRequestError) {
        handleRequestFn.totalPendingRequests++;

登入後複製

並在取得範本時，預設以$templateCache 作為cache使用，將取得到的使用模板數據，加入到$templateCache內保存。

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

登入後複製

所以可以透過禁掉緩存，在 $templateRequest 的原始碼中將 $tempalteCache去掉，達到清除模板快取的目的，不過這個一般不建議直接修改框架原始碼！