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 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
js中复选框的取值及赋值示例详解
Oct 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
php实现登录页面的简单实例
2019/09/29 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
工作时间调整通知
2015/04/24 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP