A few days ago, some new problems arose during the project launch. When switching pages, the templates of the previous page are not cleaned in time, which will cause overlap of pages. The reason for 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, resulting in the old page template still exists when the new page is loaded, and the page overlaps.
Template cache clear:
The clearing of template cache includes traditional HTML tag settings to clear the cache, as well as some configuration clearing of angularJs, and routing switching clearing of angularJs.
1. The following is the traditional method of clearing the browser
HTMLmeta tag settings clear cache
<!-- Clear cache --> <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" />
Clean up temporary form cache
<body onLoad="javascript:()">
2. angularJs configuration clear cache
1. Clear the routing cache. In the route routing configuration, inject $httpProvider service and clear the routing cache through the $httpProvider service configuration.
(["$stateProvider","$urlRouterProvider",'$locationProvider','$httpProvider',function ($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) {
if (!$) {
$ = {};
}
$["X-Requested-With"] = 'XMLHttpRequest';
$['Cache-Control'] = 'no-cache';
$['Pragma'] = 'no-cache';
}]);
2. Use random numbers. Random numbers are also a very good way to avoid cache, that is, add random numbers (usually timestamps) after linking URL parameters. Use random time, the same as random numbers.
3. In the status routing configuration, configure the cache configuration item to false.
.state("discountCoupon", {
url: "/discountCoupon",
templateUrl: "?" + new Date().getTime(),//Random number controller: 'discountCoupon',
cache: false,//cache configuration})
.state("customerPhone", {
url: "/customerPhone",
templateUrl: "?" + new Date().getTime(),//Random number controller: 'customerPhone',
cache: false,//cache configuration})
3. angularJs' routing switch clear cache
angularJs default template loading will be cached. The cache service used is $tempalteCache. The service that sends the template request is $templateRequest, so the template of the previous page can be cleared during routing switching:
1. After each sending $http request template is completed, you can call $(url) or $tempalteCache. removeAll to clear all template caches.
$rootScope.$on('$stateChangeStart', //Route switching starts function (event, toState, toParams, fromState, fromParams) {
//The route starts switching, clears all previous template caches if ( !== undefined) {
$();
// $();
}
});
$rootScope.$on('$stateChangeSuccess', //Route switching is completed function (event, toState, toParams, fromState, fromParams) {
//The route switching is successful, clear the previous page template cache if ( !== undefined) {
$();
// $();
}
});
2. Use $ Rewrite native $templateRequest (angularJs comes with $templateRequest: $TemplateRequestProvider) service. In the $TemplateRequestProvider service, we can see that the $tempalteCache (essentially 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) {
++;
And when obtaining the template, the default is $templateCache to be used as cache, and the obtained template data is added to the $templateCache to save.
return $(tpl, extend({
cache: $templateCache,
transformResponse: transformResponse
}, httpOptions))
['finally'](function () {
--;
})
.then(function (response) {
$(tpl, );
return ;
}, handleError);
Therefore, you can disable the cache and remove $tempalteCache in the source code of $templateRequest to achieve the purpose of clearing the template cache. However, this is generally not recommended to directly modify the framework source code!
Summarize
The above is the method of Angularjs to clear page templates introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!