Angular禁用缓存生产中的部分

Question

我正处于开发站点的过程中,但每次我将新版本上传到我的服务器时,用户需要清理缓存以查看更改,这个问题的解决方案是什么？

我尝试了两种方法来解决这个问题的答案:

第一种方式:

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);
    }
})

这不会抛出错误,但我不知道这个解决方案是否正确,如果有效,我需要做什么？

Answer 1

这是服务器配置的问题，以及它如何告诉浏览器缓存HTML用作模板部分的文件的问题。

了解浏览器缓存

您正在尝试执行此操作，$templateCache.remove(..)但这$templateCache.removeAll()是行不通的，因为模板尚未加载，或者浏览器将使用缓存版本重新加载它们。

您需要检查浏览器中的网络历史记录，以确保服务器正确处理 HTML 请求。发送您期望的缓存标头设置。对于每个部分，应该有一个302（未修改的）响应。当 HTML 文件发生更改时，服务器应将新修改的文​​件发送到浏览器。

另一个问题是服务器上的默认缓存持续时间可能太长。这告诉浏览器应该多久检查一次服务器以发送新版本的 HTML 文件。您可能希望将此持续时间缩短至 1 小时。

大多数网络服务器都预先配置为假设扩展名的文件.html永远不会改变并且是静态的。因此，默认设置是让浏览器尽可能长时间地缓存这些文件。

您可能想将这些文件重命名为类似名称.ahtml，并将其用作部分文件名。不应该有任何预定义的配置来强制兑现这些文件类型。

了解 $templateCache

这是 AngularJS 中一个非常简单的缓存服务。如果在内存中找不到该 URL，则会从服务器加载该 URL。下次当应用程序运行时需要该部分时，将使用内存版本。该服务器的使用与服务器/浏览器缓存无关。

模板的正确方式

最佳实践是创建一个包含应用程序所需的所有部分模板的 JavaScript 文件。该 JS 文件将调用$templateCache服务并添加这些模板。这提高了应用程序的启动性能，并消除了处理服务器/浏览器缓存的问题。

有几个 grunt 任务可以做到这一点。

https://www.npmjs.com/package/grunt-angular-templates

https://github.com/karlgoldstein/grunt-html2js

将其与 JavaScript 压缩器结合起来，并将所有 JS 合并到一个文件中，这样就可以顺利完成任务了。