AngularJs でテンプレートのキャッシュを無効にする方法-jsチュートリアル-php.cn

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

小云云

リリース： 2017-12-07 15:52:53

オリジナル

1170 人が閲覧しました

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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