Существует различие между кэшированием угловых шаблонов и кешированием браузера. Когда Angular загружает шаблон в первый раз, он будет запускать запрос AJAX для этого шаблона, а затем сохранить HTMLin в службе с именем $templateCache
, поэтому, если тот же самый шаблон потребуется снова, он пропустит вызов AJAX и будет использовать HTML хранится в $templateCache
.
После того, как вы обновили свою страницу, инициализируется услуга $templateCache
(так как все JS инициализированы), и все кэшированные HTML-файлы исчезли, поэтому снова, когда Angular потребует HTML-файл для шаблона, он вызовет вызов AJAX в первый раз, сохраните его в $templateCache
, а затем используйте кешированный HTML здесь.
Ваш браузер, с другой стороны, не «инициализирует» свой кеш при каждом обновлении, поэтому, если вы запросите файл, который был кэширован до этого, браузер пропустит HTTP-вызов и будет использовать свою кешированную версию, если он доступный.
Так позволяет сказать, что нам нужен шаблон с именем x.html
, что будет происходить следующий псевдо-код:
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
Это путь вы должны «жесткий Reload» шаблоны каждый раз в то время.
Мое решение для развития, прикрепляет изменяющуюся строку запроса в шаблон URL, например:
.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
})
Это простой трюк, который заставляет браузер всегда извлечь файл HTML, поскольку строка запроса никогда не будет одинаковым (ну, это будет одинаково в течение 1 миллисекунды :)), поэтому каждый раз, когда браузер получит HTTP-запрос для этого HTML, он не будет соответствовать предыдущим запросам и не будет использовать кеш.