項(xiàng)目的比較大，需要加載的js文件較多，為了提高首屏頁面的加載速度，需要對js文件進(jìn)行按需加載，然后網(wǎng)上參考了一些資料，自己也深入研究一番之后，實(shí)現(xiàn)了按需加載控制器js文件及指令js文件的效果；思路如下，1、借助ui-router里面的resolve屬性來實(shí)現(xiàn)預(yù)加載，2、需要借助$controllerProvider動(dòng)態(tài)去注冊控制器，$compileProvider動(dòng)態(tài)去注冊指令，3、需要借助$q來幫助我們實(shí)現(xiàn)異步加載，具體步驟如下所示；
1、在我們定義的app（在定義app.config（）的js文件內(nèi)）模塊上掛載注冊控制器和指令的屬性，如下所示
1 2 3 4 | app.register = {<br> //注意這里的$controllerProvider是內(nèi)置注冊控制器的屬性，$compileProvider是內(nèi)置的注冊指令的屬性 controller: $controllerProvider.register, directive: $compileProvider.directive } |
2、借助$q定義一個(gè)異步加載js文件的方法（在定義路由的js文件內(nèi)）
app.loadMyJs = function(js){ return function($rootScope, $q){ var deffer = $q.defer(),
deps=[];
angular.isArray(js) ? (deps = js) : deps.push(js);
require(deps,function(){
$rootScope.$apply(function(){
deffer.resolve();
});
}); return deffer.promise;
};
}
3、借助路由里面的resolve屬性，進(jìn)行配置需要加載的控制器文件及指令文件（在定義路由的js文件內(nèi)）
.state(,
4、通過第一步先掛載在app上的屬性來進(jìn)行動(dòng)態(tài)注冊控制器or指令
//注冊控制器（對應(yīng)的控制器js文件內(nèi)） app.register.controller(
//注冊指令（對應(yīng)的指令js文件內(nèi)）
app.register.directive("loading",function (){ return {
restrict: "AE",
replace: true,
template: "<div class='mask' ng-show='isLoading'><span>loading</span></div>"
}
});
如果有服務(wù)or過濾器需要按需加載也是類似的方法，另外如果是公共的服務(wù)，指令or過濾器等不需要進(jìn)行按需加載的文件就可以使用普通的angular.module()的方式來定義即可；
最后這只是實(shí)現(xiàn)按需加載js文件中的一種思路，希望對您有所幫助。
延伸閱讀
- 突破迷茫，實(shí)現(xiàn)自我 ——王*鑫 2020-06-11
- 獅子搏兔尚需全力，你必須全力以赴 2019-03-11
- 在萬碼學(xué)堂實(shí)現(xiàn)了我的人生夢想 2017-11-29
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- Android高仿qq及微信底部菜單的幾種實(shí)現(xiàn)方式 2017-07-26
- 擴(kuò)展entity framework core 實(shí)現(xiàn)默認(rèn)字符串長度,decimal精度,entity自動(dòng)注冊和配置 2017-07-26
- runtime實(shí)現(xiàn)對象存儲(chǔ)型數(shù)據(jù)庫——LHDB 2017-07-26
- 富文本編輯器UEditor自定義工具欄（一、基礎(chǔ)配置與字體、背景色、行間距、超鏈接實(shí)現(xiàn)） 2017-07-26
- UWP：使用Behavior實(shí)現(xiàn)Button點(diǎn)擊動(dòng)態(tài)效果 2017-07-26
- ReactiveSwift源碼解析(九) SignalProducerProtocol延展中的Start、Lift系列方法的代碼實(shí)現(xiàn) 2017-07-26
突破迷茫，實(shí)現(xiàn)自我 ——王*鑫