本文使用的AngularJS是基于1.x版本的。
使用AngularJS做前端，路由都是静态配置的，久而久之发现每次新增加一个模块都要配置一下路由，实在有些麻烦，遂研究了一下能否动态配置路由信息
现状
项目中使用的是ui-router，因为要支持多级路由，所以没有使用默认的路由，代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
angular.module('app')
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('home', {
url: '/home',
controller: 'homeController',
templateUrl: 'views/home.html'
})
.state('feature1', {
url: '/feature1',
controller: 'feature1Controller',
templateUrl: 'views/feature1.html'
})
.state('feature2', {
url: '/feature2',
controller: 'feature2Controller',
templateUrl: 'views/feature2.html'
})
});
如此对 /home, /feature1, /feature2 这样的模块，每次增加一个就要做如下动作
- 添加state记录
- state,url,controller,templateurl都按照约定写好，否则不容易直接找到
- index.html 页面里要添加controller的js文件 这样下来，当模块达到十几或几十个的时候，首页就是一串JS的文件引入，config里面state也是很多定义，关键是，任何一个地方写错一个字母，功能就直接没用了。
解决
开始尝试像后台MVC一样，比如#/home, 就动态载入 views/home.html 配合 controllers/home.js，后来发现state不配置还是很难的。
退而求其次。
预定义一个数组，然后按自定义规则加载
1
var states = ["home","about","about.company","contact"];
然后根据名称，自动约定加载controller和view信息，关于controller的自动加载，使用了ocLazyLoad模块
核心代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
angular.module('app')
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
var states = ["home","about","about.company","contact"];
angular.forEach(states, function(state) {
var controllerName = state.replace(/\../g,function(m){
return m.replace(".","").toUpperCase()}
);
var state_parts = state.split(".");
var controllerFile = state_parts[0];
var url = "/"+state_parts[state_parts.length - 1];
$stateProvider.state(state, {
url: url,
templateUrl: 'views/' + state + '.html',
controller: controllerName + 'Controller',
resolve: {
deps:['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load ([
{
name: 'controllers',
files: [
'js/controllers/'+controllerFile+'.js'
]
}
])
}]
}
}) ;
})
});
使用此方法，还是不能像后端MVC那样自动解析，但是已经可以少些很多重复代码了。
【全文完】