Heim > Artikel > Web-Frontend > So verwenden Sie das Löschen von Seitenvorlagen in AngularJS

So verwenden Sie das Löschen von Seitenvorlagen in AngularJS

不言Original: 2018-07-20 09:40:071485Durchsuche

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" />

Formular-Temporären Cache löschen

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

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

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配置})

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

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

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie Slice, um Array-Methoden in JS zu kapselnNächster Artikel：Verwenden Sie Slice, um Array-Methoden in JS zu kapseln

In Verbindung stehende Artikel

Mehr sehen