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 = toStatefromStateCache = 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) returnlet 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 = truecssToBeEnableList.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) returnlet exceptArr = exceptFile.split('.'),exceptStr = '',exceptName = ''if (exceptFile.match('.')) {exceptArr.forEach(e => {exceptName += exceptName ? '.' + e : eexceptStr += ':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 : eif (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])} elsebreak}return result
}

前端框架：

angularjs 路由---angularjs 搭建前端框架相关推荐

【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...
requirejs搭建前端框架
1. 文件结构 2. base.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 requirejs.config({ b ...
web前端框架——一些简单理解
以下为百度内容+自己总结: 前端框架一般指用于简化网页设计的框架,前端框架分很多种,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件.可以把bootstrap也叫作前端框架,也可以把jQu ...
django项目如何连接前端_工作笔记前端小白如何搭建前端项目
"前言,来到杭州差不多有两年左右了,大小小做过不少项目.之前都是有技术大佬在前面抗住.作为菜鸡的本人只要在大佬后面听大佬指挥摸鱼划水就行.最近公司接到一个新项目,由于大佬们纷纷出走,于是搭建 ...
【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
前端框架——bootstrap/knockoutjs/angularjs
前端框架--bootstrap/knockoutjs/angularjs 转载于:https://blog.51cto.com/caochun/1854522
从Java的角度理解前端框架，nodejs，reactjs，angularjs，requirejs，seajs
从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs [前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你 ...
基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
基于 AngularJS 的个推前端云组件探秘
本文为个推投稿,根据个推 Web 前端首席架构师姜季廷在 Meetup 野狗技术沙龙第三期的技术分享整理而成.他从 Angular 的特性.组件化之路以及个推云组件最佳实践和经验分享等维度为大家解读了 ...

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

angularjs 路由---angularjs 搭建前端框架相关推荐

最新文章

热门文章