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删除数组重复元素的方法汇总
Jun 24 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
javascript事件处理模型实例说明
May 31 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
React组件中的this的具体使用
Feb 28 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
Vue路由权限控制解析
Nov 09 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你的验证码安全码?
2007/01/02 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
linux下php上传文件注意事项
2016/06/11 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python探索之自定义实现线程池
2017/10/27 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python输入中文的实例方法
2020/09/14 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
学前教育教师求职自荐信
2013/09/22 职场文书
会计系毕业个人自荐信格式
2013/09/23 职场文书
一岗双责责任书
2014/04/15 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
专家推荐信怎么写
2015/03/25 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
人事任命书范本
2015/09/21 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle