Как можно удалить из кэша шаблоны AngularJS, когда они изменяются на сервере?

Question

У нас есть проект Angular, в котором шаблоны менялись много раз благодаря нашей среде Agile. Браузеры, похоже, сильно кешируют шаблоны из-за типа файла html. Это означает, что когда бизнес выходит на наш сайт разработчиков после обновления, они иногда видят старые шаблоны. Как мы можем быть уверены, что при внесении изменений в шаблоны пользователь загружает новый шаблон вместо загрузки из кэша?

Answer 1

Используйте такие инструменты, как grunt-filerev ( https://github.com/yeoman/grunt-filerev) для статической ревизии. Они в основном добавляют хэш содержимого файла, так что кэширование становится невозможным.

Answer 2

Мы используем Jade и для предотвращения кеширования у нас есть переменная, основанная на времени, которое добавляется в конец наших JS/CSS-включений (style.css? V =2012881). Поскольку у нас уже есть appVersion через эту переменную, я решил выставить эту переменную, используя угловой модуль и константу:

script.
      angular.module('appVersion',[]).constant('appVersion',#{curDate});

В моем основном угловом модуле у меня есть:

.config(['$httpProvider','appVersion',function($httpProvider,appVersion){
  $httpProvider.interceptors.push(function() {
      return {
       'request': function(config) {
           if(!config.cached && config.url.indexOf('.html') > -1){
            if(config.url.indexOf("?") > -1){
              config.url = config.url.replace("?","?v="+appVersion+"&");
            }
            else{
              config.url += "?v="+appVersion;
            }
           }
           return config;
        }
      };
    });
}])

Поскольку шаблоны загружаются с использованием $ http.get, я добавил перехватчик, который определяет, является ли запрос запросом шаблона, и добавляет appVersion к запросу, если он есть. Таким образом, у нас одинаковые версии для CSS, JS и HTML.