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插件之多图片异步上传
Oct 20 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
JS实现密码框效果
Sep 10 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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+java实现自动新闻滚动窗口
2006/10/09 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
Haggar官网:美国男装品牌
2020/02/16 全球购物
商务英语专业自荐信
2013/10/14 职场文书
连锁经营管理专业大学生求职信
2013/10/30 职场文书
财产公证书样本
2014/04/04 职场文书
现场活动策划方案
2014/08/22 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书