非正規方法處理AngulurJS模組管理問題

葛雲飛發表於2015-04-29
JS

1.起因

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

2.問題

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

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

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

3.分析

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

4.期待

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

5.解決

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

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

不說了，貼程式碼

在框架頁（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);

};

將每一個anglur.js模組內的

angular.bootstrap(document, [modulename]);

替換成

  Confirm(modulename);

在layout（佈局頁？我也不知道叫啥，反正是那個公共的框架頁）尾部加入angulur.js檔案，程式碼如下：

(function () {
    var app = angular.module('app', jsModules);
    angular.bootstrap(document, ['app']);
})();

嘿嘿~~ 我噁心了。。。 噁心到您了沒？

本人WEB 菜鳥小白一個，歡迎大神們留言解決方式；

 

相關文章