How to use page template clearing in angularjs

This article introduces to you how to use angularjs to clear page templates. It has certain reference value. Friends in need can refer to it.

During the launch of the project a few days ago, some new problems arose. When the page is switched, the template of the previous page is not cleaned up in time, which will cause the pages to overlap. The cause of this problem is: page template cache, that is, when the previous page exits, the browser does not clear the template of the previous page in time, causing the old page template to still exist when the new page is loaded, resulting in page overlap.

Template cache clearing:

Template cache clearing includes traditional HTML tag settings clearing the cache, as well as some configuration clearing of angularJs, and routing switching of angularJs Clear

1. The following is the traditional method of clearing the browser

##HTMLmeta Tag setting clear Cache

Clear form temporary cache

2. AngularJs configuration clear cache

1. Clear the routing cache. In the route routing configuration, inject the $httpProvider service and clear the routing cache through the $httpProvider service configuration.

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. Use random numbers. Random numbers are also a very good way to avoid caching, that is, add random numbers (usually timestamps) after the link URL parameters. Use random times, the same as random numbers.

3. In the state routing configuration, configure the cache configuration item to 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. Route switching of angularJs clears cache

angularJs default template loading will be cached, and the cache service used is $tempalteCache, The service that sends template requests is $templateRequest, so the template of the previous page can be cleared when routing is switched:

1. After each $http request template is sent, you can call $tempalteCache.remove(url) Or $tempalteCache.removeAll clears all template caches.

$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. Use $provide.decorator to rewrite the native $templateRequest (angularJs comes with $provide service $templateRequest: $TemplateRequestProvider) service. In the $TemplateRequestProvider service, we can see that the $tempalteCache (essentially still the $cacheFactory service of angularJs) service is used by default.

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

And when obtaining the template, $templateCache is used as the cache by default, and the obtained Template data is added to $templateCache and saved.

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);

So you can disable the cache and remove $tempalteCache in the source code of $templateRequest to clear the template cache. However, it is generally not recommended to modify the framework source code directly!

Related recommendations:

Use slice to encapsulate array methods in JS

About the operation of adding and subtracting classes in jQuery ( Code attached)

The above is the detailed content of How to use page template clearing in angularjs. For more information, please follow other related articles on the PHP Chinese website!