Angular 局部视图中的脚本加载 - 缓存问题
Angular Script Loading inside partial view - caching issues
我在 Angular 应用程序的局部视图中加载 JavaScripts 时遇到问题。
这是我的设置:ui-router
将请求 /profile
的 ui-view
设置为 <app-home-profile></app-home-profile>
。
appHomeProfile
指令设置如下:
app.directive('appHomeProfile', function() {
return {
restrict: 'E',
templateUrl: 'templates/user/profile.html',
controller: ...,
controllerAs: 'profileCtrl'
}
});
现在,在 profile.html
文件中我包含了标准 HTML 并且在它的底部有一些 JavaScript 依赖项:
<script type="text/javascript" src="/javascripts/myScript1.js"></script>
<script type="text/javascript" src="/javascripts/myScript2.js"></script>
问题是服务器日志显示 Angular 正在向请求添加时间戳,因此不允许缓存任何脚本!
在文档的 head
中以 "usual" 方式加载的脚本不会发生这种情况。
GET /javascripts/myScript1.js?_=1437207405398 200 2.356 ms - 22524
GET /javascripts/myScript2.js?_=1437207405399 200 1.873 ms - 29695
感谢任何有关如何解决此问题的帮助!
谢谢,
尼克
与 jQuery 相反,Angular 不支持请求模板中的 <script>
,因为 jqLite 简化了实现。可以修复.
它在您的示例中起作用的原因是因为您在您的应用程序中使用 jQuery,所以它管理 DOM 而不是 jqLite。添加 AJAX 请求中的时间戳以禁用浏览器缓存,这是 jQuery 的默认行为。它可以被禁用
app.config(function () {
angular.element.ajaxSetup && angular.element.ajaxSetup({ cache: true });
});
我在 Angular 应用程序的局部视图中加载 JavaScripts 时遇到问题。
这是我的设置:ui-router
将请求 /profile
的 ui-view
设置为 <app-home-profile></app-home-profile>
。
appHomeProfile
指令设置如下:
app.directive('appHomeProfile', function() {
return {
restrict: 'E',
templateUrl: 'templates/user/profile.html',
controller: ...,
controllerAs: 'profileCtrl'
}
});
现在,在 profile.html
文件中我包含了标准 HTML 并且在它的底部有一些 JavaScript 依赖项:
<script type="text/javascript" src="/javascripts/myScript1.js"></script>
<script type="text/javascript" src="/javascripts/myScript2.js"></script>
问题是服务器日志显示 Angular 正在向请求添加时间戳,因此不允许缓存任何脚本!
在文档的 head
中以 "usual" 方式加载的脚本不会发生这种情况。
GET /javascripts/myScript1.js?_=1437207405398 200 2.356 ms - 22524
GET /javascripts/myScript2.js?_=1437207405399 200 1.873 ms - 29695
感谢任何有关如何解决此问题的帮助!
谢谢, 尼克
与 jQuery 相反,Angular 不支持请求模板中的 <script>
,因为 jqLite 简化了实现。可以修复
它在您的示例中起作用的原因是因为您在您的应用程序中使用 jQuery,所以它管理 DOM 而不是 jqLite。添加 AJAX 请求中的时间戳以禁用浏览器缓存,这是 jQuery 的默认行为。它可以被禁用
app.config(function () {
angular.element.ajaxSetup && angular.element.ajaxSetup({ cache: true });
});