So verwenden Sie das Löschen von Seitenvorlagen in AngularJS-js-Tutorial-php.cn

So verwenden Sie das Löschen von Seitenvorlagen in AngularJS

不言

Freigeben： 2018-07-20 09:40:07

Original

1548 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie AngularJS zum Löschen von Seitenvorlagen verwenden. Freunde in Not können sich darauf beziehen.

Beim Start des Projekts vor einigen Tagen traten einige neue Probleme auf. Beim Seitenwechsel wird die Vorlage der vorherigen Seite nicht rechtzeitig bereinigt, was zu einer Überlappung der Seiten führt. Die Ursache für dieses Problem ist: Zwischenspeicherung der Seitenvorlage. Das heißt, wenn die vorherige Seite beendet wird, löscht der Browser die Vorlage der vorherigen Seite nicht rechtzeitig. Daher bleibt beim Laden der neuen Seite die alte Seitenvorlage erhalten vorhanden, was zu Seitenüberlappungen führt.

Löschen des Vorlagencaches:

Das Löschen des Vorlagencaches umfasst das Löschen des Caches durch herkömmliche HTML-Tag-Einstellungen sowie das Löschen einiger Konfigurationen von AngularJs und das Umschalten des Routings AngularJs Clear

1. Das Folgende ist die traditionelle Methode zum Löschen des Browser-

HTMLmeta Einstellung „Cache löschen“

<!-- 清除缓存 --><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" />

Nach dem Login kopieren

Formular-Temporären Cache löschen

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

Nach dem Login kopieren

2. AngularJs-Konfiguration Cache löschen

1. Löschen Sie den Routing-Cache in der Routen-Routing-Konfiguration, fügen Sie den $httpProvider-Dienst ein und löschen Sie den Routing-Cache über die $httpProvider-Dienstkonfiguration.

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

Nach dem Login kopieren

2. Zufallszahlen sind auch eine sehr gute Möglichkeit, Caching zu vermeiden, das heißt, fügen Sie Zufallszahlen (normalerweise Zeitstempel) nach den Link-URL-Parametern hinzu. Verwenden Sie zufällige Zeiten, genau wie Zufallszahlen.

3. Konfigurieren Sie in der State-Routing-Konfiguration das Cache-Konfigurationselement auf „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配置})

Nach dem Login kopieren

3. Routenwechsel von angleJs löscht den Cache

Das Laden der AngularJs-Standardvorlage wird zwischengespeichert und der verwendete Cache-Dienst ist $tempalteCache, Der Dienst, der Vorlagenanfragen sendet, ist $templateRequest, sodass die Vorlage der vorherigen Seite gelöscht werden kann, wenn das Routing geändert wird:

1 Nachdem jede $http-Anfragevorlage gesendet wurde, können Sie $tempalteCache.remove( aufrufen. url) Oder $tempalteCache.removeAll löscht alle Vorlagencaches.

$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();    }
});

Nach dem Login kopieren

2. Verwenden Sie $provide.decorator, um den nativen $templateRequest-Dienst (AngularJs wird mit $provide service $templateRequest: $TemplateRequestProvider geliefert) neu zu schreiben. Im $TemplateRequestProvider-Dienst können wir sehen, dass der Dienst $tempalteCache (im Wesentlichen immer noch der Dienst $cacheFactory von AngularJs) standardmäßig verwendet wird.

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

Nach dem Login kopieren

Und beim Abrufen der Vorlage wird $templateCache als Cache verwendet Standardmäßig werden die erhaltenen Vorlagendaten zu $templateCache hinzugefügt und gespeichert.

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

Nach dem Login kopieren

Sie können also das Caching deaktivieren und $tempalteCache im Quellcode von $templateRequest entfernen, um den Vorlagencache zu leeren. Es wird jedoch im Allgemeinen nicht empfohlen, den Framework-Quellcode direkt zu ändern!

Verwandte Empfehlungen:

Verwenden Sie Slice, um Array-Methoden in JS zu kapseln

Informationen zum Vorgang des Addierens und Subtrahierens von Klassen in jQuery (Code beigefügt)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Löschen von Seitenvorlagen in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!