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 相关文章推荐
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 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程序员的技术瓶颈分析
2011/07/17 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
asp 取文本框名称代码
2008/12/02 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
Python数据类型学习笔记
2016/01/13 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python自动识别文本编码格式代码
2019/12/26 Python
python批量处理txt文件的实例代码
2020/01/13 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
致跳高运动员加油稿
2014/02/12 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
支行行长竞聘报告
2014/11/06 职场文书
通讯稿格式及范文
2015/07/22 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers