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
});

參考

angular應用如何實現按需加載