萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> AngularJS模塊管理問題的非常規處理方法

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']);

  })();

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

copyright © 萬盛學電腦網 all rights reserved