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小时。

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

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

了解$ templateCache

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

模板正确的方法

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

有几项咕噜声任务可以做到这一点。

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

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

结合使用这个JavaScript缩小器并将所有JS连接到一个文件中，您就可以顺利完成。

Answer 2

这是一个非常直截了当的方法。每个部署都有一个唯一的哈希，它可以在HTTP拦截器中使用，为每个生产版本请求新的部分模板：

app.factory('cachebustInjector', function(conf) {
    // generated each deploy   
    var buster = 'kaqreFZ3MWcGzfS86iSiud'; 

    var cachebustInjector = {
        request: function(config) {    
            if (config.url.indexOf('static/angular_templates') > -1) {
                config.url += ['?v=', buster].join('');
            }
            return config;
        }
    };
    return cachebustInjector;
});

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('cachebustInjector');
}]);

Angular禁用缓存生产中的部分

2 个答案:

了解浏览器缓存

了解$ templateCache

模板正确的方法