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知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
vue实现计算器功能
Feb 22 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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中使用模板的方法
2008/05/24 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP反射API示例分享
2016/10/08 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python迭代器的使用方法实例
2013/11/21 Python
python和C语言混合编程实例
2014/06/04 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
如何选择使用结构还是类
2014/05/30 面试题
海量信息软件测试笔试题
2015/08/08 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
百度吧主申请感言
2014/01/12 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
新学期家长寄语2016
2015/12/03 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
Python Parser的用法
2021/05/12 Python