1、定义index.html主页,对于通用的js就不用require依赖加载了,其中main.js作为主模块,用require添加系统路由模块。

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Wms</title>
     <link href="static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
     <link href="static/Site.css" rel="stylesheet"/>
     <script src="static/jquery-3.2.1.js"></script>
     <script src="static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
     <script src="node_modules/angular/angular.js"></script>
     <script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
     <script src="static/require.js"></script>
     <script src="main.js"></script>
 </head>
 <body>
 <div class="navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <ui-view></ui-view>
     </div>
 </div>
 </body>
 </html>

2、main.js启动模块,加载所有路由模块,app配置路由后启动App。(以下只定义了master路由模块,实际业务可能分很多模块)

 require.config({
     paths: {
         'app': './app',
         'masterRouter': './01-master/masterRouter'
     }
 });

 require(['app', 'masterRouter'], function (app, masterRouter) {
     app.config(masterRouter);
     angular.bootstrap(document, ['App']);
     console.log('系统已启动...');
 });

3、app.js模块就是angular定义的主模块(只负责定义,设置provider代理供其他辅助模块使用),设置必要的拦截器,例如请求中添加token令牌、返回后调用Service的预处理等。

 define([], function () {
     var app = angular.module('App', ['ui.router']);

     app.factory('interceptor', function ($q) {
         return {
             request: function (config) {
                 console.log(config.url);
                 if (config.url.indexOf('/login/') === -1) {
                     config.headers['token'] = '1234';
                 }
                 console.log(config.headers);
                 return config || $q.when(config);
             },
             response: function (response) {
                 if (response.config.url.indexOf('service') > -1) {
                     //todo 预处理请求结果
                 }
                 return response || $q.when(response);
             }
         };
     });

     app.config(function ($controllerProvider, $provide, $stateProvider, $urlRouterProvider, $httpProvider) {
         // 在app上定义动态注册代理方法
         app.ctrl = $controllerProvider.register;
         app.service = $provide.service;
         app.factory = $provide.factory;
         app.state = $stateProvider.state;

         $httpProvider.interceptors.push('interceptor');

         // 延迟加载方法
         app.loadJs = function (files) {
             return {
                 ctrl: function ($q) {
                     var wait = $q.defer();
                     require(files, function () {
                         wait.resolve();
                     });
                     return wait.promise;
                 }
             };
         };

         // 定义主菜单、默认页
         $stateProvider.state('main', {
             url: '/main',
             templateUrl: './00-menu/menu.html',
             controller: 'menuCtrl',
             resolve: app.loadJs(['./00-menu/menuCtrl.js'])
         }).state('main.index', {
             url: '/index',
             templateUrl: './00-menu/index.html',
             controller: 'indexCtrl',
             resolve: app.loadJs(['./00-menu/indexCtrl.js'])
         });

         // 默认页
         $urlRouterProvider.otherwise("main");
     });

     return app;
 });

4、masterRouter.js 主要负责master模块的路由,必须要在App启动前加载进来。resolve:app.loadJs就是根据实际用到的控制器模块动态加载js,实际上项目上最多的并不是像echars等的通用模块,而是各种controller的业务模块,不能一次性加载进来,否则启动页太慢了,才resolve根据需要动态加载。

 define(['app'], function (app) {
     return function ($stateProvider) {
         var modulePath = './01-master/';
         $stateProvider
             .state('main.userMng', {
                 url: '/users',
                 templateUrl: modulePath + 'users.html',
                 controller: 'usersCtrl',
                 resolve: app.loadJs([modulePath + 'usersCtrl.js'])
             })
             .state('main.roleMng', {
                 url: '/roles',
                 templateUrl: modulePath + 'roles.html',
                 controller: 'rolesCtrl',
                 resolve: app.loadJs([modulePath + 'rolesCtrl.js'])
             })
             .state('main.authMng', {
                 url: '/auth',
                 templateUrl: modulePath + 'auth.html',
                 controller: 'authCtrl',
                 resolve: app.loadJs([modulePath + 'authCtrl.js'])
             })
             .state('main.setting', {
                 url: '/setting',
                 templateUrl: modulePath + 'setting.html',
                 controller: 'settingCtrl',
                 resolve: app.loadJs([modulePath + 'settingCtrl.js'])
             })
             .state('main.whsMng', {
                 url: '/whs',
                 templateUrl: modulePath + 'whs.html',
                 controller: 'whsCtrl',
                 resolve: app.loadJs([modulePath + 'whsCtrl.js'])
             })
             .state('main.matsMng', {
                 url: '/mats',
                 templateUrl: modulePath + 'mats.html',
                 controller: 'matsCtrl',
                 resolve: app.loadJs([modulePath + 'matsCtrl.js'])
             })
             .state('main.suppliersMng', {
                 url: '/suppliers',
                 templateUrl: modulePath + 'suppliers.html',
                 controller: 'suppliersCtrl',
                 resolve: app.loadJs([modulePath + 'suppliersCtrl.js'])
             })
             .state('main.customersMng', {
                 url: '/customers',
                 templateUrl: modulePath + 'customers.html',
                 controller: 'customersCtrl',
                 resolve: app.loadJs([modulePath + 'customersCtrl.js'])
             });
     };
 });

5、usersCtrl.js 以用户users管理为例,的控制器模块的定义、和状态机state路由的定义。

 define(['app'], function (app) {

     app.ctrl('usersCtrl', function ($scope) {
         $scope.title = 'users';
     });

 });
             .state('main.userMng', {
                 url: '/users',
                 templateUrl: modulePath + 'users.html',
                 controller: 'usersCtrl',
                 resolve: app.loadJs([modulePath + 'usersCtrl.js'])
             })

6、以下是截图,首次启动加载的文件列表、及顺序。

2017.12.16 续 ==> 其实应该完全用require依赖,这样页面加载的顺序更加容易理解好看。

1、index.html页面简化。

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Wms</title>
     <link href="static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
     <link href="static/Site.css" rel="stylesheet"/>
     <script src="static/require.js" data-main="main"></script>
 </head>
 <body>
 <div class="navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <ui-view></ui-view>
     </div>
 </div>
 </body>
 </html>

2、main.js添加依赖关系。

 require.config({
     paths: {
         'jquery': './static/jquery-3.2.1',
         'bootstrap': './static/bootstrap-3.3.7-dist/js/bootstrap',
         'angular': './node_modules/angular/angular',
         'ui-router': 'node_modules/angular-ui-router/release/angular-ui-router',
         'app': './app',
         'masterRouter': './01-master/masterRouter'
     },
     shim: {
         'bootstrap': {
             deps: ['jquery'],
             exports: 'bootstrap'
         },
         'ui-router': {
             deps: ['angular'],
             exports: 'ui-router'
         },
         'app': {
             deps: ['ui-router'],
             exports: 'app'
         },
         'masterRouter': {
             deps: ['app'],
             exports: 'masterRouter'
         }
     }
 });

 // 有返回值的写在前面,方便填写注入的参数
 require(['app', 'masterRouter', 'jquery', 'bootstrap', 'angular', 'ui-router'], function (app, masterRouter) {
     app.config(masterRouter);
     angular.bootstrap(document, ['App']);
     console.log('系统已启动...');
 });

3、这次页面加载的顺序比较容易理解好看。

angular-ui-router动态加载模块的更多相关文章

  1. stevedore动态加载模块

    stevedore动态加载模块,stevedore使用setuptools的entry points来定义并加载插件.entry point引用的是定义在模块中的对象,比如类.函数.实例等,只要在im ...

  2. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  3. React router动态加载组件-适配器模式的应用

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...

  4. [driver]linux内核动态加载模块

    问题: 1. 把编译好的模块放到板子/lib/modules对应文件夹下,并且执行了depmod -a, 比如pl2303.ko, 那么下一次插入pl2303的串口线,是否可以识别,也就是自动加载pl ...

  5. Easy UI combogrid动态加载数据

    场景: datagrid的每一行允许编辑,一行中有一个字段,编辑时,提供下拉框选项,供选择. 下拉框选项有多个列.如下图所示:(点击红框内的下拉按钮,会弹出绿框内的内容) 要求: 每行弹出的下拉框内容 ...

  6. Apache动态加载模块

    添加步骤:如要额外安装cgi,先找到mod_cgi.c及mod_cgid.c.一般在apache安装包目录下,如 ./httpd-2.2.25/modules/generators .#编译安装 cg ...

  7. ubuntu动态加载模块简单模板

    1:简单代码 #include<linux/init.h> #include<linux/module.h> MODULE_LICENSE("GPL"); ...

  8. 配置动态加载模块和js分模块打包,生产环境和开发环境公共常量配置

    1. 话不多少 先上代码:  route.js  // 引用模板 分模块编译 const main = r => require.ensure([], () => r(require('. ...

  9. Python importlib 动态加载模块

    # 创建一个 src 文件夹,里面有一个 commons.py 文件,内容如下 def add(): print("add ....") # 创建一个 app.py 文件,内容如下 ...

随机推荐

  1. 他(he)(钟神)

    他[问题描述]一张长度为N的纸带,我们可以从左至右编号为0 −N(纸带最左端标号为0) .现在有M次操作,每次将纸带沿着某个位置进行折叠,问所有操作之后纸带的长度是多少.[输入格式]第一行两个数字N, ...

  2. Spring Data JPA @EnableJpaRepositories配置详解

    @EnableJpaRepositories注解用于Srping JPA的代码配置,用于取代xml形式的配置文件,@EnableJpaRepositories支持的配置形式丰富多用,本篇文章详细讲解. ...

  3. Android基于mAppWidget实现手绘地图(一)--简介

    http://lemberg.github.io/mappwidget/user_guide.html 最近在看一些导游类应用,发现一些景区的导览图使用的完全是自定义地图,也就是手绘地图.这种小范围使 ...

  4. SQL通用查询

    获取日期截取 ), ) --不要时间2002-1-1 ),) ----20020101 ),) ---06:05:05

  5. [hackerrank]The Love-Letter Mystery

    https://www.hackerrank.com/contests/w3/challenges/the-love-letter-mystery 简单题. #include <cstdlib& ...

  6. 【Sqlserver】修改数据库表中的数据:对缺失的数据根据已有的数据进行修补

    1 --查询时间范围内的数据 select * from dbo.point where wtime >'2014-05-01 23:59:59' and wtime< '2014-05- ...

  7. NYOJ 66 分数拆分

    分数拆分 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 现在输入一个正整数k,找到所有的正整数x>=y,使得1/k=1/x+1/y.   输入 第一行输入一个 ...

  8. C# Vista Command Link Control with Windows Forms

    using System; using System.Text; using System.Windows.Forms; using System.Runtime.InteropServices; u ...

  9. 清明培训 清北学堂 DAY1

    今天是李昊老师的讲授~~ 总结了一下今天的内容: 1.高精度算法 (1)   高精度加法 思路:模拟竖式运算 注意:进位 优化:压位 程序代码: #include<iostream>#in ...

  10. 对css语法中position值的理解

    1.static 正常定位,就是默认定位,根据他的top,right,bottom,left的值 2.relative 根据他top,right,bottom,left的值偏移 3.absolute ...