快捷導(dǎo)航

AngularJS 實(shí)現(xiàn)按需異步加載實(shí)例代碼

更新時(shí)間：2015年10月18日 10:08:30 作者：jimmyYY

這篇文章主要介紹了AngularJS 實(shí)現(xiàn)按需異步加載實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

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

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

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

angularjs 和 requirejs 一樣，使用的是預(yù)先加載的方式組織模塊（這和 seajs 的懶加載正好相反），當(dāng)一個(gè)單頁(yè)面應(yīng)用的模塊越來(lái)越多時(shí)，也就意味著需要預(yù)加載的模塊也會(huì)越來(lái)越多，這也許也就說(shuō)明了 angular 更適合用來(lái)開發(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è)面應(yīng)用，隨著系統(tǒng)的迭代，首屏代碼已經(jīng)過(guò)于龐大，所以對(duì)系統(tǒng)進(jìn)行改造。

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

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

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

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

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

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

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

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

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

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