angularjs - 部署后清除模板缓存

Question

我想确保我的用户在部署后看到我的 Angular 应用程序的最新版本。在这种情况下清除模板缓存的正确策略是什么？

我读到你可以做的地方 $templateCache.removeAll()在 app.run ，但是我认为这会完全禁用缓存吗？

Answer 1

您将需要编写一个拦截器并“捕获”所有模板请求 - 您应该能够在此拦截器中添加一个 URL 参数，该参数将对您的模板 Assets 进行版本控制。

例子:

// App .config()
$httpProvider.interceptors.push(function($templateCache) {
  return {
    'request' : function(request) {
      if($templateCache.get(request.url) === undefined) { // cache miss
          // Item is not in $templateCache so add our query string
          request.url = request.url + '?appVersion=' + appService.getConfig().version;
      }
      return request;
  }
};

每次部署新版本时，您当然都需要更新此应用程序配置(通过构建任务，您可以自动更新此文件)。您可能需要添加额外的检查(例如，比较 URL 路径是否以“.html”结尾)，以确保您不会高调实际的 HTTP 请求。

下行这种方法的一个特点是有时您可能有一个尚未更新的模板，并且您不希望浏览器缓存被破坏。如果这是您的情况，那么您应该为每个添加某种 md5(templateContent) --- 这也可以在构建时通过 Grunt/Gulp 实现。