缓存的备用选项:状态提供程序中的false

Question

我在我的状态中使用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文件后，有时我需要硬刷新页面，而不只是重新加载。那么是我遗漏了什么呢，还是有什么方法可以完成这件事呢？

Answer 1

Angular模板缓存和你的浏览器缓存是有区别的。当Angular第一次加载模板时，它将触发对该模板的AJAX请求，然后将HTMLin存储为名为$templateCache的服务，因此如果再次需要完全相同的模板，它将跳过AJAX调用，并使用存储在$templateCache中的HTML。

一旦刷新了页面，$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

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

我的开发解决方案是将一个不断变化的查询字符串附加到模板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请求时，它将不会与先前的请求匹配，也不会使用缓存。