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

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

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

angularjs 和 requirejs 一樣，使用的是預(yù)先加載的方式組織模塊（這和 seajs 的懶加載正好相反），當(dāng)一個(gè)單頁面應(yīng)用的模塊越來越多時(shí)，也就意味著需要預(yù)加載的模塊也會(huì)越來越多，這也許也就說明了 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)按需加載的方法

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

我們主要面臨3個(gè)問題

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

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

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

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

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

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

啟動(dòng)之后再想使用controller、deractive等api，會(huì)直接報(bào)錯(cuò)

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

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

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

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

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

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

最新評(píng)論