angular-ui-router动态加载模块
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动态加载模块的更多相关文章
- stevedore动态加载模块
stevedore动态加载模块,stevedore使用setuptools的entry points来定义并加载插件.entry point引用的是定义在模块中的对象,比如类.函数.实例等,只要在im ...
- OrchardCore 如何动态加载模块？
前言 今天,我们再次讨论下OrchardCore,通过初期调研,我们项目采用OrchardCore底层设施支持模块化,同时根据业务场景,额外还需支持二次开发,于是有了本文,若有不同解决方案,欢迎留言探 ...
- Python_getattr+__import__ 实现动态加载模块、类对象或函数
__import__() 语法 __import__(name[, globals[, locals[, fromlist[, level]]]]) 参数 name -- 字符串,模块的导入路径 说明 ...
- AngularJs 动态加载模块和依赖
最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- [driver]linux内核动态加载模块
问题: 1. 把编译好的模块放到板子/lib/modules对应文件夹下,并且执行了depmod -a, 比如pl2303.ko, 那么下一次插入pl2303的串口线,是否可以识别,也就是自动加载pl ...
- nginx平滑升级、在线添加模块（tengine 动态加载模块）
http://www.orzace.com/how-to-upgrade-nginx/ 下面是nginx替换成tengine再加上lua 模块,(tengine-2.0.1版本暂时无法动态加载lua模 ...
- Easy UI combogrid动态加载数据
场景: datagrid的每一行允许编辑,一行中有一个字段,编辑时,提供下拉框选项,供选择. 下拉框选项有多个列.如下图所示:(点击红框内的下拉按钮,会弹出绿框内的内容) 要求: 每行弹出的下拉框内容 ...
- Apache动态加载模块
添加步骤:如要额外安装cgi,先找到mod_cgi.c及mod_cgid.c.一般在apache安装包目录下,如 ./httpd-2.2.25/modules/generators .#编译安装 cg ...
随机推荐
- Qt自动填写表单并点击按钮，包括调用js方法
本篇博客参阅了很多其他大牛的文章,具体找不到了,还望包涵>_< 因为其他博客大都是只有主要代码,对于像我这种菜鸟,根本摸不着头脑,以此想总结一下,帮助新手尽快实现功能... 主要是调用了C ...
- [HAOI2008] 排名系统
题目链接:戳我 要注意因为数可能会对应很多人,但是输出的时候要按照添加的顺序输出.所以我们不能将相同值的节点合并,用set维护.就算值相同也只能新开节点. 然后就没有什么了...懒得写哈希表..直接上 ...
- 使用git命令提示“不是内部或外部命令
问题描述: 打开windows的cmd,在里面打git命令会提示“不是内部或外部命令,也不是可运行的程序” 解决办法: 找到git安装路径中bin的位置,如:D:\Program Files\Git\ ...
- 洛谷P5158 【模板】多项式快速插值
题面 传送门 前置芝士 拉格朗日插值,多项式多点求值 题解 首先根据拉格朗日插值公式我们可以暴力\(O(n^2)\)插出这个多项式,然而这显然是\(gg\)的 那么看看怎么优化,先来看一看拉格朗日插值 ...
- BZOJ2243 [SDOI2011]染色（LCT）
传送门 明明是道树剖的题…… 然而我硬生生做成了LCT 虽然的确用LCT只是板子啦(LCT的题哪道不是板子) 就是把颜色打上标记,然后基本就是板子 //minamoto #include<bit ...
- easyui里面的API=====》 load
在easyui里面有个API load,这个API实用性质很强,可以直接帮我加载页面的数据到想需要的相应输入框里面,但是也要注意,这些将要被填入数据的输入框里面的属性有个要求:其中输入框里面的name ...
- lua小试牛刀
function function max(num1, num2) if(num1 > num2) then result = num1; else result = num2; end ret ...
- sql92和sql99
sql1992sql分类 1.笛卡尔积 (表乘表) 2.等值连接 表的连接条件使用“=” 3.非等值连接 表的连接条件使用“>.>=. <.<=.!=.any等” 4.自连接 ...
- vue嵌套路由-query传递参数（三）
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
- C#集合之可观察的集合
如果需要集合中的元素何时删除或添加的信息,可以使用ObservableCollection<T>类.这个类是为WPF定义的,这样UI就可以得知集合的变化.这个类在程序集WindowsBas ...