zoukankan      html  css  js  c++  java
  • 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、这次页面加载的顺序比较容易理解好看。

  • 相关阅读:
    494 Target Sum 目标和
    493 Reverse Pairs 翻转对
    492 Construct the Rectangle 构建矩形
    491 Increasing Subsequences 递增子序列
    488 Zuma Game 祖玛游戏
    486 Predict the Winner 预测赢家
    485 Max Consecutive Ones 最大连续1的个数
    483 Smallest Good Base
    Django Form组件
    Django Auth组件
  • 原文地址:https://www.cnblogs.com/jonney-wang/p/8047457.html
Copyright © 2011-2022 走看看