angularjsでページテンプレートのクリアを使用する方法-jsチュートリアル-php.cn

angularjsでページテンプレートのクリアを使用する方法

不言

リリース： 2018-07-20 09:40:07

オリジナル

1468 人が閲覧しました

この記事では、angularjs でページテンプレートをクリアする方法を紹介します。必要な友人は参考にしてください。

数日前のプロジェクトの立ち上げ中に、いくつかの新しい問題が発生しました。ページが切り替わると、前のページのテンプレートが時間内にクリーンアップされず、ページが重なる原因になります。この問題の原因は次のとおりです。ページテンプレートのキャッシュ、つまり、前のページが終了するときに、ブラウザが前のページのテンプレートを時間内に消去しないため、新しいページが読み込まれると、古いページテンプレートが残ったままになります。が存在するため、ページが重複してしまいます。

テンプレートキャッシュのクリア:

テンプレートキャッシュのクリアには、従来の HTML タグ設定のキャッシュのクリアに加え、angularJs の一部の設定のクリア、および angularJs のルーティング切り替えのクリアが含まれます

1 以下は従来のクリアです。ブラウザメソッド

HTMLmetaタグ設定クリアキャッシュ

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

ログイン後にコピー

クリアフォーム一時キャッシュ

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

ログイン後にコピー

2.ルートrou内のルーティングキャッシュをクリアします。設定、$httpProvider サービスを挿入し、$httpProvider サービスを構成し、ルーティングキャッシュをクリアします。

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. 乱数を使用する。乱数はキャッシュを回避する非常に良い方法です。つまり、リンク URL パラメーターの後に乱数 (通常はタイムスタンプ) を追加します。乱数と同じように、ランダムな時間を使用します。

3. 状態ルーティング設定で、キャッシュ設定項目を 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. angularJs

のルート切り替えによりキャッシュがクリアされますangularJsのデフォルトのテンプレート読み込みはキャッシュされます。使用されるキャッシュサービスは$tempalteCacheであり、テンプレートリクエストを送信するサービスは$templateRequestであるため、前のページのテンプレートのクリア:

1. 各 $http リクエストテンプレートが送信された後、$tempalteCache.remove(url) または $tempalteCache.removeAll を呼び出して、すべてのテンプレートキャッシュをクリアできます。

$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. $provide.decorator を使用してネイティブ $templateRequest (angularJs には $provide service $templateRequest: $TemplateRequestProvider が付属しています) サービスを書き換えます。 $TemplateRequestProvider サービスでは、$tempalteCache (本質的には angularJs の $cacheFactory サービス) サービスがデフォルトで使用されていることがわかります

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

ログイン後にコピー

そして、テンプレートを取得するときに、$templateCache がデフォルトでキャッシュとして使用されます。取得したテンプレートデータを$templateCacheに保存します。

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

ログイン後にコピー

したがって、キャッシュを無効にして、$templateRequest のソースコードから $tempalteCache を削除して、テンプレートキャッシュをクリアすることができます。ただし、フレームワークのソースコードを直接変更することは一般的に推奨されません。