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 中的类和闭包
Jan 08 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
第九节--绑定
2006/11/16 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP文件操作详解
2016/12/30 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python多进程机制实例详解
2015/07/02 Python
python中list列表的高级函数
2016/05/17 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
农业生产宣传标语
2014/10/08 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
水电施工员岗位职责
2015/04/11 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python