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