本项目利用了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",
"type":"ngload",
"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',
'$controllerProvider',
'$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)一次性加载进来。
还好就是这个加载机制写完之后基本就不用动了,以后只需改模块下的路由文件就行了。麻烦一次,以后省事