首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 16:01:42
原創
1286 人瀏覽過

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文件,程式碼如下:

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!