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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
小程序自定义日历效果
Dec 29 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控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php中cookie的使用方法
2014/03/29 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python 中如何获取列表的索引
2019/07/02 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
《乌塔》教学反思
2014/02/17 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
上学路上观后感
2015/06/16 职场文书