角型テンプレートのバージョン

Question

ユーザーがブラウザにキャッシュされたテンプレートを持っているため、アプリで予期しない問題が頻繁に発生することがわかりました。 私は$window.location.reload(true)を試しましたが、それでもクロムはキャッシュからテンプレートを提供します。

テンプレートURLにバージョンクエリパラメータを動的に追加するような簡単な方法はありますか？

Answer 1

他の類似の質問でも、人々は$templateCacheを使用し、すべてを一度にロードすることを約束しました。これは私が探していたソリューションではなく、アプリケーションのサイズを増やし、角度ui-routerによって提供される遅延ロードを犠牲にしてアプリの最初の読み込み時間を増やすためです。

ですから、以下は私が行ったことです。 バージョンを含む値プロバイダを作成しました。 このファイルは縮小され、インデックスページに含まれているため、ページと共にロードされます。

angular.module('my-app').value('version', 'X.X.X'); 

は私が州、ディレクティブでも中のすべての私のtemplateUrl NGが-含ま $httpサービスを介してロードされるため、テンプレートを取り出す時に、私はクエリパラメータを注入できることに気づきました。だから私は、アプリの設定ブロック内の行、次の追加：

angular.module('my-app').config(['$httpProvider', function($httpProvider){ 
    $httpProvider.interceptors.push(['$q', 'version', function($q, version) { 
     return { 
      'request': function (request) { 
       if (request.url.substr(-5) == '.html') { 
        request.params = { 
         v: version 
        } 
       } 
       return $q.resolve(request); 
      } 
     } 
    }]); 
}]); 

だから、私のすべてのテンプレートはバージョン番号で呼ばれ、今のブラウザはバージョンが増加した場合にロードするために、新しいテンプレートを待ちます。 定期的にAPIを介してバージョンの更新を確認します。新しいバージョンが検出された場合は、ユーザーにページの再読み込みを促します。ユーザーの承認では、私は$window.location.reload(true)

を経由して、それをリロード更新

次の新しいバージョンをチェックするスニペットです。ユースケースによって異なります。ここでは特別なリリースサイクルがあるので、各ウィンドウのフォーカスと最初の読み込み時に新しいバージョンを確認します。

Answer 2

インターセプタなしでは、テンプレートURLにポストフィックスバージョン変数を追加できます。 templateUrl： 'scripts/apps/blabla.html？version？ver =' + version