angular-ui-router动态加载模块
1、定义index.html主页，对于通用的js就不用require依赖加载了，其中main.js作为主模块，用require添加系统路由模块。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>Wms</title> 6 <link href="static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/> 7 <link href="static/Site.css" rel="stylesheet"/> 8 <script src="static/jquery-3.2.1.js"></script> 9 <script src="static/bootstrap-3.3.7-dist/js/bootstrap.js"></script> 10 <script src="node_modules/angular/angular.js"></script> 11 <script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script> 12 <script src="static/require.js"></script> 13 <script src="main.js"></script> 14 </head> 15 <body> 16 <div class="navbar navbar-inverse navbar-fixed-top"> 17 <div class="container"> 18 <ui-view></ui-view> 19 </div> 20 </div> 21 </body> 22 </html>
2、main.js启动模块，加载所有路由模块，app配置路由后启动App。（以下只定义了master路由模块，实际业务可能分很多模块）
1 require.config({ 2 paths: { 3 'app': './app', 4 'masterRouter': './01-master/masterRouter' 5 } 6 }); 7 8 require(['app', 'masterRouter'], function (app, masterRouter) { 9 app.config(masterRouter); 10 angular.bootstrap(document, ['App']); 11 console.log('系统已启动...'); 12 });
3、app.js模块就是angular定义的主模块（只负责定义，设置provider代理供其他辅助模块使用），设置必要的拦截器，例如请求中添加token令牌、返回后调用Service的预处理等。
1 define([], function () { 2 var app = angular.module('App', ['ui.router']); 3 4 app.factory('interceptor', function ($q) { 5 return { 6 request: function (config) { 7 console.log(config.url); 8 if (config.url.indexOf('/login/') === -1) { 9 config.headers['token'] = '1234'; 10 } 11 console.log(config.headers); 12 return config || $q.when(config); 13 }, 14 response: function (response) { 15 if (response.config.url.indexOf('service') > -1) { 16 //todo 预处理请求结果 17 } 18 return response || $q.when(response); 19 } 20 }; 21 }); 22 23 app.config(function ($controllerProvider, $provide, $stateProvider, $urlRouterProvider, $httpProvider) { 24 // 在app上定义动态注册代理方法 25 app.ctrl = $controllerProvider.register; 26 app.service = $provide.service; 27 app.factory = $provide.factory; 28 app.state = $stateProvider.state; 29 30 $httpProvider.interceptors.push('interceptor'); 31 32 // 延迟加载方法 33 app.loadJs = function (files) { 34 return { 35 ctrl: function ($q) { 36 var wait = $q.defer(); 37 require(files, function () { 38 wait.resolve(); 39 }); 40 return wait.promise; 41 } 42 }; 43 }; 44 45 // 定义主菜单、默认页 46 $stateProvider.state('main', { 47 url: '/main', 48 templateUrl: './00-menu/menu.html', 49 controller: 'menuCtrl', 50 resolve: app.loadJs(['./00-menu/menuCtrl.js']) 51 }).state('main.index', { 52 url: '/index', 53 templateUrl: './00-menu/index.html', 54 controller: 'indexCtrl', 55 resolve: app.loadJs(['./00-menu/indexCtrl.js']) 56 }); 57 58 // 默认页 59 $urlRouterProvider.otherwise("main"); 60 }); 61 62 return app; 63 });
4、masterRouter.js 主要负责master模块的路由，必须要在App启动前加载进来。resolve：app.loadJs就是根据实际用到的控制器模块动态加载js，实际上项目上最多的并不是像echars等的通用模块，而是各种controller的业务模块，不能一次性加载进来，否则启动页太慢了，才resolve根据需要动态加载。
1 define(['app'], function (app) { 2 return function ($stateProvider) { 3 var modulePath = './01-master/'; 4 $stateProvider 5 .state('main.userMng', { 6 url: '/users', 7 templateUrl: modulePath + 'users.html', 8 controller: 'usersCtrl', 9 resolve: app.loadJs([modulePath + 'usersCtrl.js']) 10 }) 11 .state('main.roleMng', { 12 url: '/roles', 13 templateUrl: modulePath + 'roles.html', 14 controller: 'rolesCtrl', 15 resolve: app.loadJs([modulePath + 'rolesCtrl.js']) 16 }) 17 .state('main.authMng', { 18 url: '/auth', 19 templateUrl: modulePath + 'auth.html', 20 controller: 'authCtrl', 21 resolve: app.loadJs([modulePath + 'authCtrl.js']) 22 }) 23 .state('main.setting', { 24 url: '/setting', 25 templateUrl: modulePath + 'setting.html', 26 controller: 'settingCtrl', 27 resolve: app.loadJs([modulePath + 'settingCtrl.js']) 28 }) 29 .state('main.whsMng', { 30 url: '/whs', 31 templateUrl: modulePath + 'whs.html', 32 controller: 'whsCtrl', 33 resolve: app.loadJs([modulePath + 'whsCtrl.js']) 34 }) 35 .state('main.matsMng', { 36 url: '/mats', 37 templateUrl: modulePath + 'mats.html', 38 controller: 'matsCtrl', 39 resolve: app.loadJs([modulePath + 'matsCtrl.js']) 40 }) 41 .state('main.suppliersMng', { 42 url: '/suppliers', 43 templateUrl: modulePath + 'suppliers.html', 44 controller: 'suppliersCtrl', 45 resolve: app.loadJs([modulePath + 'suppliersCtrl.js']) 46 }) 47 .state('main.customersMng', { 48 url: '/customers', 49 templateUrl: modulePath + 'customers.html', 50 controller: 'customersCtrl', 51 resolve: app.loadJs([modulePath + 'customersCtrl.js']) 52 }); 53 }; 54 });
5、usersCtrl.js 以用户users管理为例，的控制器模块的定义、和状态机state路由的定义。
1 define(['app'], function (app) { 2 3 app.ctrl('usersCtrl', function ($scope) { 4 $scope.title = 'users'; 5 }); 6 7 });
1 .state('main.userMng', { 2 url: '/users', 3 templateUrl: modulePath + 'users.html', 4 controller: 'usersCtrl', 5 resolve: app.loadJs([modulePath + 'usersCtrl.js']) 6 })
6、以下是截图，首次启动加载的文件列表、及顺序。
2017.12.16 续 ==> 其实应该完全用require依赖，这样页面加载的顺序更加容易理解好看。
1、index.html页面简化。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>Wms</title> 6 <link href="static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/> 7 <link href="static/Site.css" rel="stylesheet"/> 8 <script src="static/require.js" data-main="main"></script> 9 </head> 10 <body> 11 <div class="navbar navbar-inverse navbar-fixed-top"> 12 <div class="container"> 13 <ui-view></ui-view> 14 </div> 15 </div> 16 </body> 17 </html>
2、main.js添加依赖关系。
1 require.config({ 2 paths: { 3 'jquery': './static/jquery-3.2.1', 4 'bootstrap': './static/bootstrap-3.3.7-dist/js/bootstrap', 5 'angular': './node_modules/angular/angular', 6 'ui-router': 'node_modules/angular-ui-router/release/angular-ui-router', 7 'app': './app', 8 'masterRouter': './01-master/masterRouter' 9 }, 10 shim: { 11 'bootstrap': { 12 deps: ['jquery'], 13 exports: 'bootstrap' 14 }, 15 'ui-router': { 16 deps: ['angular'], 17 exports: 'ui-router' 18 }, 19 'app': { 20 deps: ['ui-router'], 21 exports: 'app' 22 }, 23 'masterRouter': { 24 deps: ['app'], 25 exports: 'masterRouter' 26 } 27 } 28 }); 29 30 // 有返回值的写在前面，方便填写注入的参数 31 require(['app', 'masterRouter', 'jquery', 'bootstrap', 'angular', 'ui-router'], function (app, masterRouter) { 32 app.config(masterRouter); 33 angular.bootstrap(document, ['App']); 34 console.log('系统已启动...'); 35 });
3、这次页面加载的顺序比较容易理解好看。
posted on 2017-12-16 19:48 jonney_wang 阅读(2184) 评论(0) 编辑 收藏 举报
