AngularJs でテンプレートのキャッシュを無効にする方法

この記事では、AngularJs でテンプレートのキャッシュを無効にする方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして一緒に見てみましょう

この記事では、AngularJs でテンプレートのキャッシュを無効にする方法を紹介し、みんなで共有し、自分用にメモを残しておきます。

AngularJs (またはキャッシュ) の特性のため、ブラウザ自体の?)、Angular のデフォルトの HTML テンプレートの読み込みはキャッシュされます。その結果、テンプレートを変更するたびに、ブラウザが最新の HTML テンプレートを取得できるようにするためにブラウザのキャッシュをクリアする必要があることがよくあります。自分でテストするのは問題ありませんが、サーバーのテンプレートのコンテンツが更新されると、すべてが更新されるわけではありません。ユーザーはブラウザのキャッシュをクリアすることに協力します。ですから、これは本当に大きな問題なのです。

app.config(function($routeProvider, $locationProvider) { 
 $routeProvider 
  .when('/Book/:bookId/ch/', { 
  templateUrl: 'chapter.html', 
  controller: 'ChapterController' 
 }); 
});

方法 1: テンプレート ファイル パスの後にタイムスタンプ (またはその他の乱数) を追加して、AngularJs に毎回サーバーから新しいテンプレートを強制的にロードさせます

app.config(function($routeProvider, $locationProvider) { 
 $routeProvider 
  .when('/Book/:bookId/ch/', { 
  templateUrl: 'chapter.html' + '?datestamp=' + (new Date()).getTime(), 
  controller: 'ChapterController' 
 }); 
});

しかし、この方法はあまりにも見苦しいです。 。 。 。

方法 2: $templateCache を使用してキャッシュをクリアします

// 禁止模板缓存 
app.run(function($rootScope, $templateCache) { 
  $rootScope.$on('$routeChangeStart', function(event, next, current) { 
    if (typeof(current) !== 'undefined'){ 
      $templateCache.remove(current.templateUrl); 
    } 
  }); 
});

ルーティング アドレスを構成した後、このコードを app.config の後に追加して、AngularJs が templateUrl をキャッシュしないようにします。

上記は私があなたのためにまとめたものです。

関連記事:

vueで全文読み取りを実装する方法

vueでdom要素を取得する方法

jsで変換タイムスタンプ形式を実装する方法

vueプロジェクトをnginxにデプロイする( 詳細チュートリアル)

JavaScript でコンテンツを追加する要素のスクロール バー ループを実装する方法

vue+swiper でサイド スライド メニュー効果を実装する方法

以上がAngularJs でテンプレートのキャッシュを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。