angularjs+requirejs按需加载

很久没上过csdn了，久到忘记了密码。事情多了，记性也不好，上来更新一下最近自己遇到的问题，也算是写个备忘录。

问题

是这样的，angularjs是预加载方式。一个应用模块不多的时候到无所谓。但是一个大型应用预加载还是很难让人接受的。网上看到一些解决方案，用ocLazyLoad的挺多，我试着用了一次，个人感觉配置麻烦。于是就有了下面的解决方案：我用的是angularjs + requirejs

解决方案

define(['app','navData'], function (app) {
app.config(function($stateProvider, $urlRouterProvider, $controllerProvider, navData){
app.registerController = $controllerProvider.register;
app.loadJs = function(js){
return function($rootScope, $q){
var def = $q.defer(), deps=[];

angular.isArray(js) ? (deps = js) : deps.push(js);
require(deps,function(){
$rootScope.$apply(function(){
def.resolve();
});
});
return def.promise;
};
}

$urlRouterProvider.otherwise('/memory');
angular.forEach(navData, function(it){
var st = it.state.split(/\./gi),
ctrlPath = 'controllers/' + st[0],
ctrlName = 'ctrl.' + st[0]
;
$stateProvider.state(st[0],{
url : '/' + st[0],
templateUrl : 'tpls/' + st[0] + '.html',
controller : ctrlName,
resolve:{
deps:app.loadJs(ctrlPath)
}
});
})
});
});

关键

这句是将controller的注册引用到registerController上

app.registerController = $controllerProvider.register;

下面是state赋值时需要注意到的，loadJs实现上面有，就是异步加载需要的模块（不重要的内容用 … 省略）

...
resolve:{
deps:app.loadJs(ctrlPath)
}
...

然后注册controller的时候这样做（这里是loadJs需要异步加载的模块）

define(['app'],function(app){
app.registerController('ctrl.memory',function(){});
});

Demo

下面是我写的Demo，有不懂的可以下载来看看。

https://github.com/zhoulijie/angularjs-controller-load-on-demand