如何在版本更改时重新加载资源（HTML / CSS / JS） [英] How to reload resources (HTML/CSS/JS) on version change

问题描述

我有一个使用AngularJS，oclazyload，ui-router，bootstrap等的Web应用程序，我将来会有更新，我需要确保浏览器不会显示缓存的资源，即使有更新的版本可用。

为此我配置了我的Gruntfile（使用grunt-replace，grunt-prompt和grunt-bump）来追加版本号到我每次创建新版本时在index.html中的每个网址。

这工作正常，但由于我使用ui-router和oclazyload，因此我有很多资源只能在需要时加载，因此我试图实现一个Angular Http拦截器将版本号附加到每个XHR URL。然而，这会弄乱模板脚本（例如< script type =text / ng-templateid =menu-item.html>< / script> ） 。我确实添加了一些条件来避免这种情况发生，但是它感觉很不方便，而且很容易出错。

在Angular中有没有任何傻瓜式的解决方案/最佳实践？ JS，Grunt或任何其他方式？

预先感谢！

解决方案

您可以在没有缓存的情况下延迟加载资源：只需将缓存参数设置为 false 。
$ b 您也可以设置数组或单个文件的缓存属性。

有两种方法可以为加载函数定义配置选项。您可以使用第二个可选参数来定义您将加载的所有模块的配置，或者您可以为每个模块定义可选参数。
例如，这些是等价的（除了在第一个例子中前两个文件不会被缓存）：

  $ ocLazyLoad.load（[{
 files：['testModule.js'，'bower_components / bootstrap / dist / js / bootstrap.js']，
 cache ：false 
}，{
 files：['anotherModule.js']，
 cache：true 
}]）; 
  

和

  $ ocLazyLoad.load（
 ['testModule.js'，'bower_components / bootstrap / dist / js / bootstrap.js'，'anotherModule.js']，
 {cache：false} 
）; 
  

I have a Web Application using AngularJS, oclazyload, ui-router, bootstrap and so on and I'll have updates coming out in the future, and I need to make sure that the browsers won't keep showing the cached resources, even when an updated version is available.

For this I have configured my Gruntfile (using grunt-replace, grunt-prompt and grunt-bump) to append the version number to every URL in my index.html every time I create a new build.

This works fine, but since I use ui-router and oclazyload, I have lots of resources loading lazily and only on demand, so I tried to implement an Angular Http Interceptor to append the version number to every XHR URL. This however messes up template scripts (like <script type="text/ng-template" id="menu-item.html"></script>). I did add conditions to avoid this, but it feels very hacky and prone to error.

Is there any fool-proof solution / best-practice for this in Angular, vanilla JS, Grunt or any other way?

Thanks in advance!

解决方案

You can lazyload assets without cache: just set the cache parameter to false.

You can also set the cache property for an array or a single file.

There are two ways to define config options for the load function. You can use a second optional parameter that will define configs for all the modules that you will load, or you can define optional parameters to each module. For example, these are equivalent (except that the first two files won't be cached in the first example):

$ocLazyLoad.load([{
  files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'],
  cache: false
},{
  files: ['anotherModule.js'],
  cache: true
}]);

and

$ocLazyLoad.load(
  ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js'],
  {cache: false}
);

这篇关于如何在版本更改时重新加载资源（HTML / CSS / JS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！