angularjs禁用整个html页面,angular如何强制不缓存？

因为AngularJs的特性(or 浏览器本身的缓存？)，angular默认的HTML模板加载都会被缓存起来。导致每次修改完模板之后都得经常需要清除浏览器的缓存来保证浏览器去获得最新的html模板。

angular 单页面开发，会存在和管理很多HTML和JS文件，缓存有时是个麻烦。在开发和测试阶段，F12调出调试工具，禁止缓存，F5刷新下就好了。

但是在客户那里缓存就体验效果不好，甚至认为有问题。

主要做几点就可以了，最主要的一点就是HTML和JS动态加载，点击菜单时再去加载。项目中的库文件一般不需要管他，一百年不变，解决缓存的主要是经常变化的部分，

如：修改了页面布局，前端js逻辑发生变动。。。

最主要的策略是，为项目加版本号，不管是HTML还是js、css文件，更新发布后，不需要客户清理缓存，只需F5刷一下即可。

1、在主页面HTML上禁止缓存

2、项目主样式，加版本号；

3、require的main文件管理常用文件的版本号；var appVersion = '?v=2018.10.1.2';

require.config({

paths: {

'lodash': 'static/lodash.min',

'jquery': 'static/jquery-1.11.3/jquery.min',

'jqueryMig': 'static/jquery-migrate-1.4.1.min',

'autocomplete': 'static/jquery-autocomplete/jquery.autocomplete.min',

'bootstrap': 'static/bootstrap-3.3.7-dist/js/bootstrap.min',

'angular': 'node_modules/angular/angular.min',

'ui-router': 'node_modules/angular-ui-router/release/angular-ui-router.min',

'select': 'static/bootstrap-select.min',

'select-zh': 'static/bootstrap-select-zh_CN.min',

'laydate': 'static/laydate/laydate',

'layer': 'static/layer/layer',

'app': 'app.js'+appVersion,

'masterRt': '01-master/masterRouter.js'+appVersion,

'autoSvc': 'service/autoSvc.js'+appVersion,

'layerSvc': 'service/layerSvc.js'+appVersion,

'datefmt': 'prototype/date.js'+appVersion,

},

shim: {

'bootstrap': ['jquery'],

'jqueryMig': ['jquery'],

'select': {deps: ['bootstrap'], exports: 'select'},

'select-zh': {deps: ['select'], exports: 'select-zh'},

'ui-router': ['angular'],

'app': ['ui-router'],

'masterRouter': ['app'],

'autocomplete': ['jquery','jqueryMig']

}

});

4、动态加载功能页面HTML时，加版本号；即angular拦截器的request时处理；app.factory('interceptor', function ($q, $location) {

return {

request: function (config) {

if (config.url.indexOf('/login/') === -1 && sessionStorage.session) {

var session = JSON.parse(sessionStorage.session);

config.headers['id'] = session.id;

config.headers['token'] = session.token;

}

// 禁止HTML缓存

if(config.url.indexOf('.html') > 0){

//var nocache = '?v=' + new Date().getTime();

var idx = config.url.indexOf('?v=');

if(idx === -1)

config.url += appVersion;

else{

config.url = config.url.substr(0, idx) + appVersion;

}

}

return config || $q.when(config);

},

response: function (response) {

if (response.config.url.indexOf('service') > -1) {

//todo 预处理请求结果

}

return response || $q.when(response);

},

responseError: function (response) {

if (response.status === 401) {// If our response status is unauthorized

$location.path('/main/index');// Redirect to the login screen

} else {

return $q.reject(response);// Reject our response

}

}

};

});

5、动态加载功能页面的js控制器和依赖js文件时，加版本号；// 延迟加载方法

app.loadJs = function (files) {

return {

ctrl: function ($q) {

// 禁止业务模块的js缓存

//var nocache = '?x=' + new Date().getTime();

for(var i=0; i

var idx = files[i].indexOf('?v=');

if(idx === -1)

files[i] += appVersion;

else{

files[i] = files[i].substr(0, idx) + appVersion;

}

}

var wait = $q.defer();

require(files, function () {

wait.resolve();

});

return wait.promise;

}

};

};

6、路由器的每个state定义时，动态加载js处理；.state('main.login', {

url: '/login',

templateUrl: modulePath + 'login.html',

controller: 'loginCtrl',

resolve: app.loadJs([modulePath + 'login.js'])

})

这样处理完，发布前端项目时，注意修改项目版本号。