我正在开发站点,但每次我将新版本上传到我的服务器时,用户都需要清理那里的缓存才能看到更改,这个问题的解决方案是什么?
我尝试了两种方法来解决这里问题的答案:
第一种方式:
myApp.run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$templateCache.removeAll();
});
});
但是这种方式在 ui.bootstrap
及其抛出错误方面存在问题。
第二种方式:
$rootScope.$on("$stateChangeStart", function( event, toState, current ) {
if (typeof(current) !== 'undefined'){
$templateCache.remove(current.templateUrl);
}
})
这不会引发错误,但我不知道这个解决方案是否正确,如果有效,我需要做什么?
最佳答案
这是服务器配置的问题,以及它如何告诉浏览器缓存用作模板部分的 HTML
文件。
了解浏览器缓存
您正在尝试执行 $templateCache.remove(..)
和 $templateCache.removeAll()
这不会起作用,因为模板还没有尚未加载,或者浏览器将使用缓存版本重新加载它们。
您需要检查浏览器中的网络历史记录,以确保服务器正确处理 HTML 请求。发送您期望的用于缓存的 header 设置。对于每个部分,应该有一个 302
(未修改)响应。当 HTML 文件发生变化时,服务器应将新的修改后的文件发送给浏览器。
另一个问题是您在服务器上的默认缓存持续时间可能太长。这告诉浏览器应该多久检查一次服务器以发送新版本的 HTML 文件。您可能希望将此持续时间减少到 1 小时。
大多数 Web 服务器都预先配置为假定扩展名为 .html
的文件永远不会更改并且是静态的。所以默认设置是让浏览器尽可能长时间地缓存这些文件。
您可能希望将这些文件重命名为类似.ahtml
的名称,并将其用作您的部分文件名。不应有任何预定义的配置来强制兑现这些文件类型。
了解 $templateCache
这是 AngularJS 中一个非常简单的缓存服务。如果在内存中找不到该 URL,则会从服务器加载它。下次在应用程序运行时需要该部分时,将使用内存版本。此服务器的使用与服务器/浏览器缓存无关。
正确使用模板
最佳做法是创建一个包含应用程序所需的所有部分模板的 JavaScript 文件。此 JS 文件将调用 $templateCache
服务并添加这些模板。这提高了应用程序的启动性能,并消除了处理服务器/浏览器缓存的问题。
有几个 grunt 任务可以做到这一点。
https://www.npmjs.com/package/grunt-angular-templates
https://github.com/karlgoldstein/grunt-html2js
结合这将是一个 JavaScript 压缩器并将所有 JS 合并到一个文件中,您就可以顺利进行了。
关于javascript - Angular 在生产中禁用缓存的部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27647435/