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文件,代码如下:
Array.prototype.indexOf=function(val){ for(vari=0;i<this.length;i++){ if(this[i]==val)returni; } return-1; }; varjsModules=newArray(); functionConfirm(val){ if(jsModules.indexOf(val)>-1) return; else jsModules.push(val); };
将每一个anglur.js模块内的
angular.bootstrap(document,[modulename]);
替换成
Confirm(modulename);
在layout(布局页?我也不知道叫啥,反正是那个公共的框架页)尾部加入angulur.js文件,代码如下:
(function(){ varapp=angular.module('app',jsModules); angular.bootstrap(document,['app']); })();
嘿嘿~~我恶心了。。。恶心到您了没?
以上所述就是本文的全部内容了,希望大家能够喜欢。