Angularjs 缓存的备选选项：状态提供程序中为false

我在我的状态中使用了cache:false来避免模板（html视图）缓存，如下所示

.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文件后，有时我需要硬刷新页面，而不仅仅是重新加载。那么，这是我缺少的还是有什么方法可以完成这件事呢？

角度模板缓存和浏览器缓存之间有区别。 当Angular第一次加载模板时，它将触发该模板的AJAX请求，然后将HTMLin存储在一个名为

$templateCache

的服务中，因此如果再次需要完全相同的模板，它将跳过AJAX调用，并将使用存储在

$templateCache

中的HTML

刷新页面后，

$templateCache

服务将初始化（因为所有的JS都已初始化），所有缓存的HTMLs都将消失，因此当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

这就是你们必须每隔一段时间“硬加载”你们的模板的方式

我的开发解决方案是将更改的查询字符串附加到模板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毫秒内保持相同：），所以每次浏览器将获得该HTML的HTTP请求时，它将不匹配以前的请求，并且不会使用缓存