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 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 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 进度条实现代码
2009/03/10 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
AngularJS入门之动画
2016/07/27 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python解析xml模块封装代码
2014/02/07 Python
Python工厂函数用法实例分析
2018/05/14 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
会计应届生的自荐信
2013/12/13 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
地理科学专业自荐信
2014/09/01 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
民间借贷被告代理词
2015/05/23 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书