如何强制浏览器重新加载 angular 模板文件而不缓存它？

Question

加载 javascript 文件时，我可以通过在加载文件时添加一个版本来强制浏览器不使用缓存，例如

<script src="~/angular/myapp/app.js?version=123"></script>

我在我的 angular 应用程序中这样做：

$routeProvider.when("/", {
  controller: "userController",
  controllerAs: "vm",
  templateUrl: "Path/to/Template/Index.html"
});

如何确保我对 Index.html 所做的任何更改都不会被缓存？或者出于某种原因这不是问题？

angular 1.x

Answer 1

您可以对 Index.html 文件执行相同的操作。只需像对 js 文件所做的那样附加一个 "cache buster" 查询字符串。有一些技术可以做到这一点，但一个简单的 Date.now() 时间戳应该可以证明目标 ...

$routeProvider.when('/', {
  controller: 'userController',
  controllerAs: 'vm',
  templateUrl: `Path/to/Template/Index.html?t=${Date.now()}`
});

如果您的应用程序变得越来越复杂，并且您希望完全阻止模板缓存，您可以使用一些中间件来实现...

angular.module('preventTemplateCache').factory('preventTemplateCache', function($injector) {
  return {
    'request': function(config) {
      if (config.url.indexOf('views') !== -1) {
        config.url = `${config.url}?t=${Date.now()}`
      }
      return config;
    }
  }
}).config(function($httpProvider) {
  $httpProvider.interceptors.push('preventTemplateCache');
});

以上示例假设您的模板目录为 views。

最后，正如一条评论所指出的，如果您只是想阻止本地开发的缓存，您可以通过浏览器开发工具切换设置以禁用缓存资源。

如何强制浏览器重新加载 angular 模板文件而不缓存它？

How to force a browser to reload angular template file and not cache it?

javascript

angularjs

angularjs-templates