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中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
webpack4简单入门实例
Sep 06 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
react antd实现动态增减表单
Jun 03 Javascript
JavaScript的Set数据结构详解
Feb 18 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引用传值实例详解学习
2013/11/06 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
vuex入门最详细整理
2020/03/04 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python3.3实现乘法表示例
2014/02/07 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python爬虫的工作原理
2017/03/05 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
儿童学习python的一些小技巧
2018/05/27 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
档案接收函
2014/01/13 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
保研导师推荐信
2015/03/25 职场文书
消防宣传标语大全
2015/08/03 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang