• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS模块管理问题的非常规处理方法

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含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);

};

</div>

将每一个anglur.js模块内的

angular.bootstrap(document, [modulename]);
</div>

替换成

  Confirm(modulename);
</div>

在layout(布局页?我也不知道叫啥,反正是那个公共的框架页)尾部加入angulur.js文件,代码如下:

(function () {
    var app = angular.module('app', jsModules);
    angular.bootstrap(document, ['app']);
})();
</div>

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

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

</div>

您可能想查找下面的文章:

相关文章

  • 2017-05-30angularjs中ng-bind-html的用法总结
  • 2017-05-30AngularJS控制器继承自另一控制器
  • 2017-05-30AngularJs表单校验功能实例代码
  • 2017-05-30AngulaJS路由 ui-router 传参实例
  • 2017-05-30Angularjs中如何使用filterFilter函数过滤
  • 2017-05-30AngularJS中的过滤器使用详解
  • 2017-05-30AngularJS动态菜单操作指令
  • 2017-05-30angularjs学习笔记之简单介绍
  • 2017-05-30angularjs中的e2e测试实例
  • 2017-05-30AngularJS基础 ng-cut 指令介绍及简单示例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Angular工具方法学习
    • AngularJS自动表单验证
    • ANGULARJS中用NG-BIND指令实现单向绑定的例子
    • AngularJS出现$http异步后台无法获取请求参数问题的解决方法
    • AngularJS基础 ng-cut 指令介绍及简单示例
    • 如何使用angularJs
    • AngularJS实践之使用ng-repeat中$index的注意点
    • angularjs中的e2e测试实例
    • Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
    • Angular的$http与$location

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有