AngularJS模組管理問題的非常規處理方法

　　這篇文章主要介紹了AngularJS模組管理問題的非常規處理方法，算是一個無奈之舉，分享給小夥伴，大家可以參考下。

　　1.起因

　　自己一直做winform，有幸從某個大神手裡接了一個node.js,express,angularJS等集眾多開源架構的一個項目，趕鴨子上架，於是一邊學習，一邊用自己以往的思中去整理，重構代碼;

　　2.問題

　　在某幾個環境下，需要用BootStrap的模態框，咱是學win的麼。。 自然而然的想到將boosStrp的模態框整成一個通用的東西，四處調用 。。。

　　於是用patial引用對話方塊檔案，對話方塊本身用anglurJS進行了伺服器相關的通訊 。

　　後來發現，當只用一個的時候是好用的，如果多次引用 (調用不同的資料)那麼只有一個好使。。

　　3.分析

　　查了一些資料才明白， angular.bootstrap 這個調用在頁面上只能執行一次，多執行就不好用了，而我之前將所有的angular.module都寫成了單獨的JS檔案中，每一個JS檔案最後都調用了 angular.bootstrap 所以，自然而然的會掛掉;

　　4.期待

　　於是，想有一種解決機制，讓我可以隨意的partial各種檔案到頁面中， 並且js檔案之間不會重複引用 ，angulurJS也能完美執行;

　　5.解決

　　親們——雖然這個方式有點噁心，但是絕對直接有效;

　　思路就是把所有的AngularJS模組動態維護在一個全域數組，然後進行動態載入

　　不說了，貼代碼

　　在架構頁(layout ...)head處引用 angulurinit.js檔案，代碼如下：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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);   };

　　將每一個anglur.js模組內的

　　 代碼如下:

　　angular.bootstrap(document, [modulename]);

　　替換成

　　 代碼如下:

　　Confirm(modulename);

　　在layout(布局頁?我也不知道叫啥，反正是那個公用的架構頁)尾部加入angulur.js檔案，代碼如下：

　　代碼如下:

　　(function () {

　　var app = angular.module('app', jsModules);

　　angular.bootstrap(document, ['app']);

　　})();

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。