angular-ui-router動態加載模塊

時間 2019-11-20

標籤 angular router 動態加載模塊欄目 AngularJS 简体版

原文原文鏈接

一、定義index.html主頁，對於通用的js就不用require依賴加載了，其中main.js做爲主模塊，用require添加系統路由模塊。css

 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>

二、main.js啓動模塊，加載全部路由模塊，app配置路由後啓動App。（如下只定義了master路由模塊，實際業務可能分不少模塊）html

 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 });

三、app.js模塊就是angular定義的主模塊（只負責定義，設置provider代理供其餘輔助模塊使用），設置必要的攔截器，例如請求中添加token令牌、返回後調用Service的預處理等。node

 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 });

四、masterRouter.js 主要負責master模塊的路由，必需要在App啓動前加載進來。resolve：app.loadJs就是根據實際用到的控制器模塊動態加載js，實際上項目上最多的並非像echars等的通用模塊，而是各類controller的業務模塊，不能一次性加載進來，不然啓動頁太慢了，才resolve根據須要動態加載。jquery

 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 });

五、usersCtrl.js 以用戶users管理爲例，的控制器模塊的定義、和狀態機state路由的定義。bootstrap

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             })

六、如下是截圖，首次啓動加載的文件列表、及順序。promise

2017.12.16 續 ==> 其實應該徹底用require依賴，這樣頁面加載的順序更加容易理解好看。app

一、index.html頁面簡化。ide

 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>

二、main.js添加依賴關係。ui

 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 });