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 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
Jquery ui css framework
2010/06/28 Javascript
JS高级笔记
2011/07/13 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
javascript回到顶部特效
2016/07/30 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Django的性能优化实现解析
2019/07/30 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
利用python 下载bilibili视频
2020/11/13 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
村委会主任先进事迹
2014/01/15 职场文书
运动会解说词200字
2014/02/06 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
Python绘制分类图的方法
2021/04/20 Python