Comment utiliser la suppression des modèles de page dans AngularJS-js tutoriel-php.cn

Comment utiliser la suppression des modèles de page dans AngularJS

不言

Libérer： 2018-07-20 09:40:07

original

1457 Les gens l'ont consulté

Cet article vous présente comment utiliser angulairejs pour effacer les modèles de page. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lors du lancement du projet il y a quelques jours, de nouveaux problèmes sont apparus. Lorsque la page change, le modèle de la page précédente n'est pas nettoyé à temps, ce qui entraînera un chevauchement des pages. La cause de ce problème est la suivante : la mise en cache du modèle de page, c'est-à-dire que lorsque la page précédente se ferme, le navigateur n'efface pas le modèle de la page précédente à temps. Par conséquent, lorsque la nouvelle page est chargée, l'ancien modèle de page est toujours conservé. existe, ce qui entraîne un chevauchement des pages.

Vidage du cache des modèles :

La suppression du cache des modèles inclut les paramètres de balises HTML traditionnels vidant le cache, ainsi qu'une certaine suppression de la configuration d'angularJs et la commutation de routage de angulaireJs Clear

1. Voici la méthode traditionnelle pour effacer la balise

HTMLmeta du navigateur. paramètre effacer le 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" />

Copier après la connexion

Effacer le cache temporaire du formulaire

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

Copier après la connexion

2. 🎜 >1. Effacez le cache de route. Dans la configuration de la route, injectez le service $httpProvider et effacez le cache de route via la configuration du service $httpProvider.

2. Utilisez des nombres aléatoires. Les nombres aléatoires sont également un très bon moyen d'éviter la mise en cache, c'est-à-dire d'ajouter des nombres aléatoires (généralement des horodatages) après les paramètres de l'URL du lien. Utilisez des heures aléatoires, comme des nombres aléatoires.

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

Copier après la connexion

3. Dans la configuration du routage d'état, configurez l'élément de configuration du cache sur 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配置})

Copier après la connexion

3. Le commutateur de routage d'angularJs efface le cache le chargement du modèle par défaut d'angularJs sera mis en cache et le service de cache utilisé est $ templateCache, le service qui envoie les requêtes de modèle est $templateRequest, donc le modèle de la page précédente peut être effacé lorsque le routage est commuté :

1 Après l'envoi de chaque modèle de requête $http, vous pouvez appeler $. tempalteCache.remove( url) ou $tempalteCache removeAll efface tous les caches de modèles.

2. Utilisez $provide.decorator pour réécrire le service natif $templateRequest (angularJs est livré avec $provide service $templateRequest: $TemplateRequestProvider). Dans le service $TemplateRequestProvider, nous pouvons voir que le service $tempalteCache (essentiellement toujours le service $cacheFactory d'angularJs) est utilisé par défaut,

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

Copier après la connexion

et lors de l'obtention du modèle, $templateCache est utilisé comme cache par défaut, et seront obtenues. Les données du modèle obtenues sont ajoutées à $templateCache et enregistrées.

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

Copier après la connexion

Vous pouvez donc désactiver le cache et supprimer $tempalteCache du code source de $templateRequest pour vider le cache du modèle. Cependant, il n'est généralement pas recommandé de modifier directement le code source du framework !

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

Copier après la connexion

Recommandations associées :

Utilisez slice pour encapsuler les méthodes de tableau dans JS

À propos de l'opération d'ajout et de soustraction de classes dans jQuery (Code ci-joint)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!