Question

AngularJS项目中如何实现按需加载js文件？

Answer 1

使用angularjs + requirejs就可以实现js文件的按需加载。
实现代码如下：
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)
}
});
})
});
});

Answer 2

用过RequireJS+AngularJS实施，但感觉没有必要用AMD的模式加载JS文件。
1、AMD的加载看起来不错，但在最终的生产环境中，JS文件还是建议压缩成一个文件，这样的效果可能更快；
2、AngularJS本身就可以写成模块来进行加载，如果嫌管理不方便，那么，看看自己项目中文件夹的排列，文件的命名等，这些方式来管理前端代码感觉更方便；
AMD的加载看起来不错，但在通常情况下，感觉没有太大的必要使用AMD去加载JS、CSS、HTML等。