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  阅读(1688)  评论(0编辑  收藏

导航