AngularJS 实现按需异步加载
习惯了 seajs 的异步加载方式,也想着 angular 也能同样使用异步加载,但是事实不随人愿。
angularjs 和 requirejs 一样,使用的是预先加载的方式组织模块(这和 seajs 的懒加载正好相反),当一个单页面应用的模块越来越多时,也就意味着需要预加载的模块也会越来越多,这也许也就说明了 angular 更适合用来开发轻应用。
正式开始
路由我使用了angular-ui-router,模块加载器是 requirejs
//路由
{
state : 'login',
templateUrl : 'login/login.html',
controller : 'loginCtrl',
resolve: {
realCtrl : function ($q) {
var def = $q.defer();
require(['/features/login/login.js'], function (loginCtrl) {
def.resolve(loginCtrl)
$rootScope.$apply();
});
return def.promise;
}
}
},
// 获得$controllerProvider
app.config(function($controllerProvider) {
app.registerController = $controllerProvider.register;
// ...
})
// loginControler
app.registerController('loginCtrl', function ($scope) {
// do something
});