angular 禁止緩存

angular 單頁面開發，會存在和管理不少HTML和JS文件，緩存有時是個麻煩。

在開發和測試階段，F12調出調試工具，禁止緩存F5刷新下就行了。

可是在客戶那裏緩存就體驗效果很差，甚至認爲有問題，聯繫客服，影響工做效率。

主要作幾點就能夠了，最主要的一點就是HTML和JS動態加載，點擊菜單時再去加載。

項目中的庫文件通常不須要管他，一百年不變，解決緩存的主要是常常變化的部分，

如：修改了頁面佈局，前端js邏輯發生變更。。。

最主要的策略是，爲項目加版本號，無論是HTML仍是js、css文件，更新發布後，

不須要客戶/實施同事 F12清緩存，只需F5刷一下便可。

一、在主頁面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">

二、項目主樣式，加版本號； <link href="static/iconFont/iconfont.css?v=1" rel="stylesheet"> 

三、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']
    }
});

四、動態加載功能頁面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
                }
            }
        };
    });

五、動態加載功能頁面的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;
            }
        };
    };

六、路由器的每一個state定義時，動態加載js處理；

            .state('main.login', {
                url: '/login',
                templateUrl: modulePath + 'login.html',
                controller: 'loginCtrl',
                resolve: app.loadJs([modulePath + 'login.js'])
            })

這樣處理完，發佈前端項目時，注意修改項目版本號，我這裏測試發佈在Nginx，轉發後臺處理的請求。

發佈後F5刷新便可，效果：