AngularJs根据访问的页面动态加载Controller的解决方案
用Ng就是想做单页面应用(simplepageapplication),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的controller使得在手机端上,页面的首次打开速度变慢,今天我就和大家分享我是怎么改善这个缺点的,实现Controller的模块化加载
app.js
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
app.register={
controller:$controllerProvider.register,
directive:$compileProvider.directive,
filter:$filterProvider.register,
factory:$provide.factory,
service:$provide.service
};
});
在route时阻塞一下去加载需要的js,加载成功后再继续,不知道$script是什么的同学请点http://dustindiaz.com/scriptjs
$routeProvider.when('/:plugin',{
templateUrl:function(rd){
return'plugin/'+rd.plugin+'/index.html';
},
resolve:{
load:function($q,$route,$rootScope){
vardeferred=$q.defer();
vardependencies=[
'plugin/'+$route.current.params.plugin+'/controller.js'
];
$script(dependencies,function(){
$rootScope.$apply(function(){
deferred.resolve();
});
});
returndeferred.promise;
}
}
});
controller.js
app.register.controller('MyPluginCtrl',function($scope){
...
});
index.html
<divng-controller="MyPluginCtrl"> ... </div>
这样改造就可以实现route时动态去加载这个route所依赖的js,但是一般我们的webapp中route都有很多,每个都要写那么一堆代码,既难看又难于维护,我们不妨再优化一下
app.js
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
app.register={
controller:$controllerProvider.register,
directive:$compileProvider.directive,
filter:$filterProvider.register,
factory:$provide.factory,
service:$provide.service
};
app.asyncjs=function(js){
return["$q","$route","$rootScope",function($q,$route,$rootScope){
vardeferred=$q.defer();
vardependencies=js;
if(Array.isArray(dependencies)){
for(vari=0;i<dependencies.length;i++){
dependencies[i]+="?v="+v;
}
}else{
dependencies+="?v="+v;//v是版本号
}
$script(dependencies,function(){
$rootScope.$apply(function(){
deferred.resolve();
});
});
returndeferred.promise;
}];
}
});
$routeProvider.when('/:plugin',{
templateUrl:function(rd){
return'plugin/'+rd.plugin+'/index.html';
},
resolve:{
load:app.asyncjs('plugin/controller.js')
}
});
到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便可提高加载速度,这个方法不仅仅可以用在controller按需加载,而且可以用在其他js模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上
$routeProvider.when('/:plugin',{
templateUrl:function(rd){
return'plugin/'+rd.plugin+'/index.html';
},
resolve:{
load:app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
}
});
便可以了
PS:$script可以对需要加载的js进行判断,如果之前已经加载过了他会直接返回成功,也就是说只有在第一次进入日期选择界面时会去请求jquery.ui.datepicker.js退出去再进就不会去请求啦