angularjs 路由---angularjs 搭建前端框架

前端框架搭建：angularjs，nodejs 安装，git 安装

let toStateCache, fromStateCache, cssToBeEnableList = []

export default app => {
	document.domain='cnsuning.com'
    app.config(['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) => {
        mockFn($stateProvider, 'state')
        	
        // $urlRouterProvider.otherwise('/portal');

        let header = 'Header.';
        if(window != window.top){
        	header = ''
        	}
        $urlRouterProvider.otherwise(function ($injector) {
            var $state = $injector.get("$state");
            $state.go('Header.overview');
        });

        $stateProvider
            .state('Header', {
                abstract: true,
                cssUrl: 'business/components/headerCD/headerCD.css',
                templateUrl: 'business/components/headerCD/headerCD.html',
                controller: 'headerCD'
            })
            .state(header+'cleanup', {
                url: '/cleanup',
                templateUrl: 'business/components/cleanup/cleanup.html',
                cssUrl: 'business/components/cleanup/cleanup.css',
                controller: 'CleanUpCtrl'
            })
            .state(header+'dependency', {
                url: '/dependency',
                templateUrl: 'business/components/dependency/dependencyhigh.html',
                cssUrl: 'business/components/dependency/dependencyhigh.css',
                controller: 'DependencyCtrl'
            })
            .state(header+'logDetail', {
            	url: '/logDetail',
            	templateUrl: 'business/components/logDetail/logDetail.html',
            	cssUrl: 'business/components/logDetail/logDetail.css',
            	controller: 'logDetailCtrl'
            })
            .state(header+'overview', {
            	url: '/overview?appId/:appName',
            	templateUrl: 'business/components/buildRecord/buildRecordhigh.html',
            	cssUrl: 'business/components/buildRecord/buildRecordhigh.css',
            	controller: 'BuildRecordCtrl'
            })
            .state(header+'buildDetail', {
            	url: '/buildDetail/:recordId/:appId',
            	templateUrl: 'business/components/buildRecord/buildDetail/buildDetail.html',
            	cssUrl: 'business/components/buildRecord/buildDetail/buildDetail.css',
            	controller: 'BuildDetailCtrl'
            })
            .state(header+'appUpload',{
                url: '/appBuild/upload',
                templateUrl: 'business/components/buildRecord/upload/upload.html',
                cssUrl: 'business/components/buildRecord/upload/upload.css',
                controller: 'AppUploadCtrl'
                })
            .state(header+'appDeploy',{
            	 url: '/appBuild/deploy',
                 templateUrl: 'business/components/buildRecord/deploy/deploy.html',
                 cssUrl: 'business/components/buildRecord/deploy/deploy.css',
                 controller: 'deployCtrl'	
                })
            .state(header+'compomentRecord',{
                url: '/compoment',
                templateUrl: 'business/components/componentRecord/componentRecord.html',
                cssUrl: 'business/components/componentRecord/componentRecord.css',
                controller: 'ComponentRecordCtrl'	
                })
            .state(header+'componentUpload',{
                url: '/compoment/upload',
                templateUrl: 'business/components/componentRecord/upload/uploadhigh.html',
                cssUrl: 'business/components/componentRecord/upload/uploadhigh.css',
                controller: 'ComponentUploadCtrl'	
                })
            .state(header+'myComponent',{
            	url: '/myComponent?appId/:appName',
            	templateUrl: 'business/components/myComponent/myComponent.html',
            	cssUrl: 'business/components/myComponent/myComponent.css',
            	controller: 'myComponentCtrl'	
            })

//            .state(header+'myToggle',{
//            	url: '/myToggle/:tabIndex/:appName/:envType',
//            	templateUrl: 'business/components/myToggle/myToggle.html',
//            	cssUrl: 'business/components/myToggle/myToggle.css',
//            	controller: 'myToggleCtrl'	
//            })
            
             .state(header+'storeManager',{
            	url: '/storeManager?storename/:storetype',
            	templateUrl: 'business/components/storeManager/storeManager.html',
            	cssUrl: 'business/components/storeManager/storeManager.css',
            	controller: 'storeManagerCtrl'
            })
            
             .state(header+'addStore',{
            	url: '/storeManager/addStore',
            	templateUrl: 'business/components/storeManager/addStore/addStore.html',
            	cssUrl: 'business/components/storeManager/addStore/addStore.css',
            	controller: 'addStoreCtrl'	
            })
            
             .state(header+'searchLogger',{
            	url: '/storeManager/searchLogger',
            	templateUrl: 'business/components/storeManager/searchLogger/searchLogger.html',
            	cssUrl: 'business/components/storeManager/searchLogger/searchLogger.css',
            	controller: 'searchLoggerCtrl'	
            })
            
             .state(header+'cleanSetting',{
            	url: '/storeManager/cleanSetting',
            	templateUrl: 'business/components/storeManager/cleanSetting/cleanSetting.html',
            	cssUrl: 'business/components/storeManager/cleanSetting/cleanSetting.css',
            	controller: 'cleanSettingCtrl'	
            })
            
             .state(header+'NoticeSetting',{
            	url: '/storeManager/NoticeSetting',
            	templateUrl: 'business/components/storeManager/NoticeSetting/NoticeSetting.html',
            	cssUrl: 'business/components/storeManager/NoticeSetting/NoticeSetting.css',
            	controller: 'NoticeSettingCtrl'
            })

            .state(header+'myToggle',{
            	url: '/myToggle/:tabIndex/:appName/:envType/:type',
            	templateUrl: 'business/components/myToggle/myToggle.html',
            	cssUrl: 'business/components/myToggle/myToggle.css',
            	controller: 'myToggleCtrl'	
            })

                .state(header+'imageDetail', {
            	url: '/imageDetail/:recordId',
            	templateUrl: 'business/components/buildRecord/imageDetail/imageDetail.html',
            	cssUrl: 'business/components/buildRecord/imageDetail/imageDetail.css',
            	controller: 'BuildDetailCtrl'
            })
    }]);

    app.run(['$rootScope', 'LoginService', '$window', ($rootScope, LoginService, $window) => {
        document.domain = 'cnsuning.com'
        window.parent.ifr1Init && window.parent.ifr1Init($rootScope, $window, LoginService)
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
            toStateCache = toState
            fromStateCache = fromState
            // let params = /\/(\d+)$/.exec(location.href)
            // let projectId = params && params[1]
            $rootScope.projectId = toParams.projectId
        })

        //be careful, the time of removing css file is important, or the screen view would be flashing
        $rootScope.$on('$viewContentLoaded', function (event, viewConfig) {
            if (!toStateCache || !fromStateCache) return
            let sameName = getSameStateName(toStateCache, fromStateCache)
            let exceptName = toStateCache.name || ''
            removeCssList(sameName, exceptName)
            for (let i = 0; i < cssToBeEnableList.length; i++) {
                cssToBeEnableList.pop()()
            }
        })
    }])
}

function addResolve(obj) {
    obj.resolve = {
        css: ['$q', '$state', ($q, $state) => {
            var deferred = $q.defer();

            if (obj.cssUrl) {
                let csslink = document.createElement('link')
                csslink.setAttribute('rel', 'stylesheet')
                csslink.setAttribute('type', 'text/css')
                csslink.setAttribute('href', obj.cssUrl)
                csslink.setAttribute('data-name', obj.name)
                csslink.addEventListener('load', e => {
                    let styleSheet = csslink.sheet || csslink.styleSheet;
                    //如果可以在加载css文件的同时disabled，应该可以避免闪烁
                    styleSheet.disabled = true
                    cssToBeEnableList.push((sheet => {
                        return function () {
                            sheet.disabled = false
                        }
                    })(styleSheet))
                    deferred.resolve()
                })
                document.head.appendChild(csslink)
            } else {
                deferred.resolve()
            }

            return deferred.promise;
        }]
    }
    return obj
}

function mockFn(obj, name) {
    let old = obj[name]
    obj[name] = function () {
        arguments[1].name = arguments[0]
        return old.call(obj, arguments[0], addResolve(arguments[1]))
    }
}

/**
 * 
 */
function removeCssList(sameName, exceptFile) {
    if (!sameName.length) return

    let exceptArr = exceptFile.split('.'),
        exceptStr = '',
        exceptName = ''

    if (exceptFile.match('.')) {
        exceptArr.forEach(e => {
            exceptName += exceptName ? '.' + e : e
            exceptStr += ':not([data-name="' + exceptName + '"])'
        })
    }
    let links = document.querySelectorAll('head>link[data-name]' + exceptStr)
    for (let i = 0; i < links.length; i++) {
        let link = links[i]

        if (sameName.length === 0) {
            document.head.removeChild(link)
        } else {
            let name = ''
            let r = sameName.every(e => {
                name += name ? '.' + e : e
                if (name !== link.dataset.name) {
                    return true
                }
            })
            if (r)
                document.head.removeChild(link)
        }
    }
}

/**
 * get the same part between toState.name and fromState.name
 */
function getSameStateName(toState, fromState) {
    let toStateName = toState.name.split('.'),
        fromStateName = fromState.name.split('.'),
        result = []

    for (let i = 0; i < toStateName.length; i++) {
        if (toStateName[i] === fromStateName[i]) {
            result.push(toStateName[i])
        } else
            break
    }
    return result
}

前端框架：