AngularJS模块管理问题的非常规处理方法

 更新时间:2015年04月29日 09:51:13   投稿:hebedich  
这篇文章主要介绍了AngularJS模块管理问题的非常规处理方法,算是一个无奈之举,分享给小伙伴,大家可以参考下。

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']);
})();

嘿嘿~~ 我恶心了。。。 恶心到您了没?

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • AngularJS基础 ng-options 指令详解

    AngularJS基础 ng-options 指令详解

    本文主要介绍AngularJS ng-options 指令,这里对ng-options指令的知识做了详细整理,并附有详细的代码示例,有需要的小伙伴可以参考下
    2016-08-08
  • Angular如何由模板生成DOM树的方法

    Angular如何由模板生成DOM树的方法

    这篇文章主要介绍了Angular如何由模板生成DOM树的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Angular实现双向折叠列表组件的示例代码

    Angular实现双向折叠列表组件的示例代码

    本篇文章主要介绍了Angular实现双向折叠列表组件的示例代码,分为左右两组,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • AngularJS 依赖注入详解和简单实例

    AngularJS 依赖注入详解和简单实例

    本文主要介绍AngularJS 依赖注入,这里对依赖注入做了详细介绍讲解,并提供效果图和示例代码以便学习参考
    2016-07-07
  • 基于angularJS的表单验证指令介绍

    基于angularJS的表单验证指令介绍

    下面小编就为大家带来一篇基于angularJS的表单验证指令介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • AngularJS入门知识之MVW类框架的编程思想探讨

    AngularJS入门知识之MVW类框架的编程思想探讨

    这篇文章主要介绍了AngularJS入门知识之MVW类框架的编程思想探讨,本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解MVW此类框架在流行的Web前端开发中的编程思想,需要的朋友可以参考下
    2014-12-12
  • 深入讲解AngularJS中的自定义指令的使用

    深入讲解AngularJS中的自定义指令的使用

    这篇文章主要介绍了深入讲解AngularJS中的自定义指令的使用,AngularJS是一款热门的JavaScript开发库,需要的朋友可以参考下
    2015-06-06
  • Angularjs为ng-click事件传递参数

    Angularjs为ng-click事件传递参数

    这篇文章主要介绍了Angularjs为ng-click事件传递参数的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法

    Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法

    本篇文章主要介绍了Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的区别,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Angular CLI 安装和使用教程

    Angular CLI 安装和使用教程

    本篇文章主要介绍了Angular CLI 安装和使用教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论