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、这次页面加载的顺序比较容易理解好看。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
