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请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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中this,self,parent的区别详解
2013/06/08 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python生成器以及应用实例解析
2018/02/08 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
文明学生事迹材料
2014/01/29 职场文书
煤矿安全生产标语
2014/06/06 职场文书
校园活动策划方案
2014/06/13 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
企业法人代表证明书
2014/09/27 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
检察院起诉意见书
2015/05/20 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技