AngularJS模塊管理問(wèn)題的非常規(guī)處理方法
1.起因
自己一直做winform，有幸從某個(gè)大神手里接了一個(gè)node.js,express,angularJS等集眾多開(kāi)源框架的一個(gè)項(xiàng)目，趕鴨子上架，于是一邊學(xué)習(xí)，一邊用自己以往的思中去整理，重構(gòu)代碼；
2.問(wèn)題
在某幾個(gè)環(huán)境下，需要用BootStrap的模態(tài)框，咱是學(xué)win的么。。 自然而然的想到將boosStrp的模態(tài)框整成一個(gè)通用的東西，四處調(diào)用 。。。
于是用patial引用對(duì)話框文件，對(duì)話框本身用anglurJS進(jìn)行了服務(wù)器相關(guān)的通訊 。
后來(lái)發(fā)現(xiàn)，當(dāng)只用一個(gè)的時(shí)候是好用的，如果多次引用 （調(diào)用不同的數(shù)據(jù)）那么只有一個(gè)好使。。
3.分析
查了一些資料才明白， angular.bootstrap 這個(gè)調(diào)用在頁(yè)面上只能執(zhí)行一次，多執(zhí)行就不好用了，而我之前將所有的angular.module都寫成了單獨(dú)的JS文件中，每一個(gè)JS文件最后都調(diào)用了 angular.bootstrap 所以，自然而然的會(huì)掛掉；
4.期待
于是，想有一種解決機(jī)制，讓我可以隨意的partial各種文件到頁(yè)面中， 并且js文件之間不會(huì)重復(fù)引用 ，angulurJS也能完美執(zhí)行；
5.解決
親們——雖然這個(gè)方式有點(diǎn)惡心，但是絕對(duì)直接有效；
思路就是把所有的AngularJS模塊動(dòng)態(tài)維護(hù)在一個(gè)全局?jǐn)?shù)組，然后進(jìn)行動(dòng)態(tài)的加載
不說(shuō)了，貼代碼
在框架頁(yè)（layout ...)head處引用 angulurinit.js文件，代碼如下：
Array.prototype.indexOf = function (val) {
for( var i = 0; i < this.length; i++) {
if(this[i] == val) return i;
}
return - 1;
};
var jsModules = new Array();
function Confirm(val){
if (jsModules.indexOf(val) > -1)
return;
else
jsModules.push(val);
};
將每一個(gè)anglur.js模塊內(nèi)的
angular.bootstrap(document, [modulename]);
替換成
Confirm(modulename);
在layout（布局頁(yè)？我也不知道叫啥，反正是那個(gè)公共的框架頁(yè)）尾部加入angulur.js文件，代碼如下：
(function () {
var app = angular.module('app', jsModules);
angular.bootstrap(document, ['app']);
})();
嘿嘿~~ 我惡心了。。。 惡心到您了沒(méi)？
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
相關(guān)文章
AngularJS基礎(chǔ) ng-options 指令詳解
本文主要介紹AngularJS ng-options 指令,這里對(duì)ng-options指令的知識(shí)做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了Angular如何由模板生成DOM樹(shù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Angular實(shí)現(xiàn)雙向折疊列表組件的示例代碼
本篇文章主要介紹了Angular實(shí)現(xiàn)雙向折疊列表組件的示例代碼，分為左右兩組，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
AngularJS 依賴注入詳解和簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 依賴注入,這里對(duì)依賴注入做了詳細(xì)介紹講解,并提供效果圖和示例代碼以便學(xué)習(xí)參考2016-07-07
下面小編就為大家?guī)?lái)一篇基于angularJS的表單驗(yàn)證指令介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
AngularJS入門知識(shí)之MVW類框架的編程思想探討
這篇文章主要介紹了AngularJS入門知識(shí)之MVW類框架的編程思想探討,本文通過(guò)實(shí)現(xiàn)兩個(gè)簡(jiǎn)單的業(yè)務(wù)需求,探討AngularJS和傳統(tǒng)的JavaScript控制DOM實(shí)現(xiàn)方式的差別,并嘗試?yán)斫?MVW此類框架在流行的Web前端開(kāi)發(fā)中的編程思想,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了深入講解AngularJS中的自定義指令的使用,AngularJS是一款熱門的JavaScript開(kāi)發(fā)庫(kù),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Angularjs為ng-click事件傳遞參數(shù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06![Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的寫法](http://img.jbzj.com/images/xgimg/bcimg8.png)
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的寫法
本篇文章主要介紹了Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的區(qū)別，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了Angular CLI 安裝和使用教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09