AngularJS 通過路由支持多視圖應用， 可以根據(jù)路由動態(tài)加載所需的視圖， 在 AngularJS 的文檔中有詳細的介紹， 網(wǎng)上也有不少教程， 就不用介紹了！

隨著視圖的不斷增加，js文件會越來越多，而 AngularJS 默認需要把全部的js都一次性加載，使用起來非常不便， 因此按需加載模塊的需求會越來越強，不過，AngularJS 并沒有實現(xiàn)按需加載。

習慣了 seajs 的異步加載方式，也想著 angular 也能同樣使用異步加載，但是事實不隨人愿。

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

正式開始

路由我使用了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應用實現(xiàn)按需加載的方法

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

我們主要面臨3個問題

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

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

3.在什么時機加載頁面組件？

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

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

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

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

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

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

大概是說，在$routeChangeSuccess之前，我們還可以做些東西，把加載時機放在這里最適合不過啦
具體實現(xiàn)大概是這樣子

至此，這個方案已經(jīng)通了，剩下什么工作？
1.整理代碼，使代碼更通用化，我們以后開發(fā)新頁面，只需要在路由配置里這樣寫就可以啦

2.把現(xiàn)有頁面都改造一下，由于之前沒有按需加載，不同頁面之間的service耦合嚴重，今后我們開發(fā)新頁面，就要注意不同頁面之間共用的service最好放在component下面

3.改構(gòu)建，給路由里的js引用換成cdn路徑。

最新評論