キャッシュの代替オプション：false状態プロバイダのfalse

Question

以下のようなテンプレート（HTMLビュー）のキャッシュを避けるために私の状態でcache：falseを使用しました。

.state('index.project_setup', { 
     url: '/:customerTag/project-setup', 
     templateUrl: 'app/views/common/customer/projects/setup_projects_wizard.html', 
     data: { pageTitle: 'Project Setup' }, 
     cache: false 
    }) 

変更をHTMLファイルに適用した後で、時々私はページを再読み込みするのではなく、ハードにリフレッシュする必要があります。それは私が行方不明の何か、またはこのことを達成するための方法がありますか？

Answer 1

角度テンプレートのキャッシュとブラウザのキャッシュには違いがあります。 Angularが最初にテンプレートを読み込むと、そのテンプレートのAJAXリクエストが発生し、$templateCacheというサービスにHTMLが格納されるため、まったく同じテンプレートが再度必要な場合は、AJAX呼び出しをスキップして使用しますHTMLは$templateCacheに格納されます。

あなたがあなたのページをリフレッシュしたら、$templateCacheサービスは角度がテンプレートのHTMLファイルが必要になりますと、それはAJAXを呼び出す発生しますので、もう一度、（すべてのJSが初期化されているため）初期化され、すべてのキャッシュされたHTMLなどはなくなっていますさ最初に$templateCacheに保存し、ここからキャッシュされたHTMLを使用します。

ブラウザがリフレッシュするたびにキャッシュを初期化しないため、以前にキャッシュされたファイルをリクエストすると、ブラウザはHTTPコールをスキップし、キャッシュされたバージョンを使用します利用可能です。

if (x.html exists in $templateCache) 
    return x.html from $templateCache 
else 
    AngularJS perform HTTP GET for x.html 
    if (browser has x.html cached version) 
     return x.html from browser cache and don't fire HTTP request 
    else 
     fire HTTP request for x.html and return the result 

しばらく一度の道あなた必要があり、「ハードリロード」あなたのテンプレートを次のとおりです。

は、だから我々は何が起こるだろうことは、次の擬似コードで、x.htmlという名前のテンプレートが必要と言うことができます。

、例えばテンプレートのURLに変更するクエリ文字列を、添付された開発のための私のソリューション：クエリ文字列であるため、常にHTMLファイルを取得するために、ブラウザの原因となる単純なトリックがある

.state('index.project_setup', { 
     url: '/:customerTag/project-setup', 
     templateUrl: 'app/views/common/customer/projects/setup_projects_wizard.html?v=' + Date.now(), 
     data: { pageTitle: 'Project Setup' }, 
     cache: false 
    }) 

（まあ、1ミリ秒でも同じです:)）、ブラウザがそのHTMLのHTTPリクエストを取得するたびに、それは以前のリクエストと一致せず、キャッシュを使用しません。