本项目利用了ui-router-extras库的特性，实现了路由的动态加载，即对路由按照模块进行切割，只有用户真正访问某个模块下的页面时，才会去加载对应的模块文件，配置路由。设想一下如果项目有几十个路由甚至更多，用ui-router的方式在app启动时候用config方法去配置，会显得臃肿低效率。如果项目由多个人开发，那么每个人都需要更改自己模块下路由的配置，很容易造成代码冲突。
具体ui-router-extras库的功能，请参考https://christopherthielen.github.io/ui-router-extras/#/home。
先看一下项目某个模块的目录结构：
会看到每个模块下都会有自己的路由配置文件，里面长什么样，看代码：
define([],function() {
return {
routers: {
"app.system": {
url: "/system","abstract": true,dependencies: [ "modules/../layout/layout.controller.js" ],views: {
"content": {
template: "<div ui-view='app.system'></div>",}
}
},"app.system.user-role": {
url: "/user-role",dependencies: [ "modules/system/user/role/role.controller.js" ],views: {
"app.system": {
templateUrl: "modules-esxi/system/user/role/role.html",controller: "RoleCtrl"
}
}
},...基本上就是个配置文件，和ui-router的路由配置很类似，这个文件是要进行二次处理的，才能给$stateProvider用。
下面我们看怎么从启动app开始，配置动态加载路由的功能：
1）在app的module中配置ui-router-extras，告诉ui-router-extras当用户访问某个url没有对应路由时，需要动态加载的文件
.config([
'$futureStateProvider','$controllerProvider',function($futureStateProvider,$controllerProvider) {
$futureStateProvider.stateFactory('ngload',["$q","futureState",ngloadStateFactory]);
$futureStateProvider.addResolve(['$injector','$http',function ($injector,$http) {
return $http.get(cmpConfig.appPath + 'app.cloud.routers.json').then(function(resp){
angular.forEach(resp.data.routers,function (fstate) {
$futureStateProvider.futureState(fstate);
});
});
}]);
}])
2）app.cloud.routers.json
{ "success":true,"routers":[
{
"stateName":"app.vm","url":"/vm","type":"ngload","src":"modules/vm/app-vm.module.js"
},{
"stateName":"app.system","url":"/system","src":"modules/system/app-system.module.js"
},......例如，当浏览器的url访问/system/user-role时，ui-router会报错，因为这时并没有配置url映射，然后ui-router-extras就会去用ngload的factory方法加载modules/system/app-system.module.js
3）ngload的factory方法代码：
function ngloadStateFactory($q,futureState) {
var ngloadDeferred = $q.defer();
var files = ['ngload','angularaMD'];
if(angular.isArray(futureState.src)){
for(var i=0;i<futureState.src.length;i++){
files.push("ngload!" + require.toUrl(futureState.src[i]));
}
}
else{
files.push("ngload!" + require.toUrl(futureState.src));
}
require(files,function ngloadCallback(ngload,angularaMD,result) {
angularaMD.processQueue();
ngloadDeferred.resolve(undefined);
});
return ngloadDeferred.promise;
}这里才会真正调用require方法load相应的module文件。
4）看module文件内容，上篇文章已经看过了：
define(["require","angular",'utils/routerHelper','modules/system/system.routes',"angular-select"],function (require,ng,routerHelper,routerCfg) {
var module = angular.module('app.system',['ngAnimate',"ui.router","ui.bootstrap","ui.select",'ngSanitize']);
routerHelper.call(module,routerCfg);
return module;
});这里会调用routerHelper的方法处理路由配置文件
5）接着看routerHelper怎么处理的：
define(["require",'utils/dependencyResolver','angular-route',"angular"],function(require,dependencyResoLeverFor) {
return function(routerCfg){
var self = this;
this.config([
'$stateProvider','$urlRouterProvider','$locationProvider','$compileProvider','$filterProvider','$provide',function($stateProvider,$urlRouterProvider,$locationProvider,$controllerProvider,$compileProvider,$filterProvider,$provide){
self.controller = $controllerProvider.register;
self.directive = $compileProvider.directive;
self.filter = $filterProvider.register;
self.factory = $provide.factory;
self.service = $provide.service;
if(routerCfg.routers){
angular.forEach(routerCfg.routers,function(router,path){
var tempRouter = {
'url':router['url'],resolve:dependencyResoLeverFor(router.dependencies)
};
if(router['views']){
angular.forEach(router.views,function(view){
var tplUrl = view.templateUrl;
view["templateProvider"] = ["$templateCache","$q","$http",function($templateCache,$q,$http){
var deferred = $q.defer(),tplStr = $templateCache.get(tplUrl);
if(tplStr){
deferred.resolve(tplStr);
}
else{
$http.get(tplUrl.indexOf("/") != 0 ? cmpConfig.appPath + tplUrl : tplUrl).then(function(resp){
deferred.resolve(resp.data);
});
}
return deferred.promise;
}];
delete view.templateUrl;
});
tempRouter['views'] = router['views'];
}
if(router['abstract']){
tempRouter['abstract'] = router['abstract'];
}
$stateProvider.state(path,tempRouter);
});
}
if(routerCfg.defaultRoutePaths){
$urlRouterProvider.otherwise(routerCfg.defaultRoutePaths);
}
}]);
}
});这里需要处理对应的controller文件和template文件的动态加载，有些路径处理的逻辑，根据自己项目需求处理就行。上面的重点其实就是借助ui-router的resolve和templateProvider机制，动态require相应的文件，最后再用$stateProvider实现真正的路由配置。这一系列工作完成后，ui-router-extras会重新进行路由，就可以访问/system/user-role对应的页面了。
6）上面的代码里面还有个dependencyResoLeverFor方法，就是利用require方法加载依赖的controller文件
define([],function(){
return function(dependencies){
var deFinition ={
resolver: ['$q','$rootScope',function($q,$rootScope){
var deferred = $q.defer();
for(var i=0;i<dependencies.length;i++){
dependencies[i] = require.toUrl(dependencies[i]);
}
require(dependencies,function(){
$rootScope.$apply(function(){
deferred.resolve();
});
});
return deferred.promise;
}]
}
return deFinition;
}
});
至此，路由模块的功能全部处理完毕，看起来很复杂，那么为什么要搞这么复杂，而不是直接利用ui-router处理。在一开始也说了几点，还有一个主要的原因是整个项目需要借助requirejs动态加载相应的module文件，这样就不需要bootstrap app的时候把所需模块文件（*.module.js）一次性加载进来。
还好就是这个加载机制写完之后基本就不用动了，以后只需改模块下的路由文件就行了。麻烦一次，以后省事