AngularJS模块管理问题的非常规处理方法


Posted in Javascript onApril 29, 2015

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

})();

嘿嘿~~ 我恶心了。。。 恶心到您了没?

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 #Javascript
javascript中in运算符用法分析
Apr 28 #Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 #Javascript
chrome不支持form.submit的解决方案
Apr 28 #Javascript
javascript截取字符串小结
Apr 28 #Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 #Javascript
jQuery通过Ajax返回JSON数据
Apr 28 #Javascript
You might like
PHP编程与应用
2006/10/09 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
ant design实现圈选功能
2019/12/17 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
Python iter()函数用法实例分析
2018/03/17 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
工程技术员岗位职责
2014/03/02 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
结对共建协议书
2014/08/20 职场文书
护士节活动总结
2014/08/29 职场文书
婚内房产协议书范本
2014/10/02 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
采购员工作总结范文
2015/08/12 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android