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实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
document.createElement()用法
Mar 13 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
js中文逗号转英文实现
Feb 11 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 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生成HTML静态页面实例代码
2008/08/31 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
jquery.post用法示例代码
2014/01/03 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
判断网页编码的方法python版
2016/08/12 Python
python简单商城购物车实例代码
2018/03/15 Python
点球小游戏python脚本
2018/05/22 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
python实现人机猜拳小游戏
2020/02/03 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
远程研修随笔感言
2014/02/10 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
股东授权委托书
2014/10/15 职场文书
应届生简历自我评价
2015/03/11 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle