Angularjs--page template cleanup

A few days ago in the course of the project, there have been some new problems. Page in the switch due to the previous page template cleanup is not timely, will cause the page overlap. The cause of this problem is: page template caching, that is, when the previous page exited, the browser did not clear the template of the previous page in time, resulting in the new page load, the old page template still exists, resulting in overlapping pages.

Template Cache cleanup:

The purge of the template cache includes the traditional HTML tag settings to clear the cache , as well as some angularJs of the configuration , and the angularJs of the routing switch cleared

1, the following is the traditional method of clearing the browser

　　HTMLmeta tag settings Clear cache

<!--Clear Cache -<Metahttp-equiv= "Cache-control"content= "No-cache, No-store, must-revalidate" /><Metahttp-equiv= "Pragma"content= "No-cache" /><Metahttp-equiv= "Expires"content= "0" />

Clean up the form form temporary cache

<onLoad= "Javascript:document.formName.reset ()">

2. Angularjs Configuration Clear Cache

1, clear the route cache, in the route routing configuration, inject $httpprovider service, through the $httpprovider service configuration, clear the route cache.

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, with random number, random number is also a very good way to avoid caching, that is, after the link URL parameter plus a random number (generally timestamp). Use random time, same as random number.

3. In the status routing configuration, configure the cache configuration item to false.

. State ("Discountcoupon", {URL:"/discountcoupon", templateurl: "discountcoupon.html?" + new  Date (). GetTime (),//random number controller:' Discountcoupon ', cache: false ,//cache configuration }). State ("Customerphone", {URL:"/customerphone", templateurl: "customerphone.html?" + new   Date (). GetTime (),//random number controller:' Customerphone ', cache: false ,//cache configuration })

3. AngularJs Routing switch clears the cache

Angularjs The default template load is cached, the cache service used is $tempalteCache, and the service that sends the template request is $templaterequest, so you can clear the template for the previous page when routing the switch:

1. You can call $tempalteCache. Remove (URL) or $tempalteCache after each send $http request template is complete. RemoveAll clears all template caches.

$rootScope. $on (' $stateChangeStart ',//Route start Switch    function(event, ToState, Toparams, FromState, fromparams) {//The route starts switching, clearing all previous template caches        if(Fromstate.templateurl!==undefined)            {$templateCache. Remove (Fromstate.templateurl); //$templateCache. RemoveAll ();}}); $rootScope. $on (' $stateChangeSuccess ',//Route switching Complete    function(event, ToState, Toparams, FromState, fromparams) {//successful routing switch clears the previous page template cache    if(Fromstate.templateurl!==undefined)        {$templateCache. Remove (Fromstate.templateurl); //$templateCache. RemoveAll ();    }});

2. Use the $provide. Decorator rewrite the native $templateRequest (angularJs $provide service $templateRequest: $TemplateRequestProvider) service. In the $TemplateRequestProvider service we can see that $tempalteCache (essentially or angularJs $cacheFactory service) is used by default Service,

 This function ($templateCache, $http, $q, $sce) {    function  handlerequestfn (TPL, Ignorerequesterror) {        handlerequestfn.totalpendingrequests+ +;

And when you get the template, the default is to use the $templateCache as the cache, and the obtained template data is added to the $templateCache save.

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, in the $templateRequest source code will $tempalteCache removed, to clear the template cache, but this is generally not recommended to directly modify the framework source code!

Angularjs--page template cleanup