[转]angular 禁止缓存

本文转自：https://www.cnblogs.com/jonney-wang/p/9797906.html

angular 单页面开发，会存在和管理很多HTML和JS文件，缓存有时是个麻烦。

在开发和测试阶段，F12调出调试工具，禁止缓存F5刷新下就好了。

但是在客户那里缓存就体验效果不好，甚至认为有问题，联系客服，影响工作效率。

主要做几点就可以了，最主要的一点就是HTML和JS动态加载，点击菜单时再去加载。

项目中的库文件一般不需要管他，一百年不变，解决缓存的主要是经常变化的部分，

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

最主要的策略是，为项目加版本号，不管是HTML还是js、css文件，更新发布后，

不需要客户/实施同事 F12清缓存，只需F5刷一下即可。

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

    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">

2、项目主样式，加版本号； <link href="static/iconFont/iconfont.css?v=1" rel="stylesheet">

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<files.length; 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'])
            })

这样处理完，发布前端项目时，注意修改项目版本号，我这里测试发布在Nginx，转发后台处理的请求。

发布后F5刷新即可，效果：