AngularJS实际项目应用——模块路由

本项目利用了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"
                    }
                }
            },...

下面我们看怎么从启动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);
					});
				});
            }]);
    }])

{	"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"
        },......

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;
    }

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;

    });

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);
				}
		}]); 
	}
});

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;
    }
});

还好就是这个加载机制写完之后基本就不用动了，以后只需改模块下的路由文件就行了。麻烦一次，以后省事

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!