angularjs 和 requirejs 一樣，使用的是預(yù)先加載的方式組織模塊（這和 seajs 的懶加載正好相反），當(dāng)一個單頁面應(yīng)用的模塊越來越多時，也就意味著需要預(yù)加載的模塊也會越來越多，這也許也就說明了 angular 更適合用來開發(fā)輕應(yīng)用。

正式開始

路由我使用了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)
   });
   return def.promise;
  }
 }
},

// 獲得$controllerProvider
app.config(function($controllerProvider) {
 app.registerController = $controllerProvider.register;
 // ...
})

// loginControler
app.registerController('loginCtrl', function ($scope) {
 // do something
});

angular應(yīng)用實(shí)現(xiàn)按需加載的方法

我們有個系統(tǒng)是用angular開發(fā)的，是一個單頁面應(yīng)用，隨著系統(tǒng)的迭代，首屏代碼已經(jīng)過于龐大，所以對系統(tǒng)進(jìn)行改造。

我們主要面臨3個問題

1.是否需要模塊加載框架？

2.異步加載回來的頁面組件，如何注冊？

3.在什么時機(jī)加載頁面組件？

針對第一個問題，由于angular自身已經(jīng)有一套模塊化方案，再引入模塊加載框架有點(diǎn)冗余，而且整體改造量比較大，所以不考慮。

因此只是實(shí)現(xiàn)了一個loadscript方法，用來加載組件。稍微需要注意的是加載多個文件時候的串并行，和避免頁面重復(fù)切換時的重復(fù)加載。

第二個問題比較蛋疼，angular有“啟動”的說法，“啟動”發(fā)生在domcontentloaded之后，會把所有注入到主模塊中的依賴編譯一遍。

啟動之后再想使用controller、deractive等api，會直接報錯

目前來看，解決這個問題，只有一個方法，就是利用主模塊的provider主動注冊controller，但是由于provider不能直接使用，所以我們把它存在主模塊下面。

通過存下來的方法，可以用來注冊異步加載回來的頁面組件。缺點(diǎn)就是這樣子所有子頁面都掛在主模塊下了。
針對第三個問題，由于運(yùn)營平臺是單頁面應(yīng)用，最好的加載時機(jī)應(yīng)該是路由監(jiān)聽到哈希變化時，但是由于我們的路由是寫死的靜態(tài)配置，一開始沒找到什么好的辦法。
后來發(fā)現(xiàn)了這樣一個api