手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >AngularJS模块管理问题的非常规处理方法
AngularJS模块管理问题的非常规处理方法
摘要:1.起因自己一直做winform,有幸从某个大神手里接了一个node.js,express,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模块管理问题的非常规处理方法】相关文章:

javascript判断并获取注册表中可信任站点的方法

js实现文本框选中的方法

javascript实现点击商品列表checkbox实时统计金额的方法

JQuery给网页更换皮肤的方法

JavaScript模版引擎的基本实现方法浅析

Jquery实现动态切换图片的方法

简介AngularJS中$http服务的用法

AngularJS身份验证的方法

三种AngularJS中获取数据源的方式

实例剖析AngularJS框架中数据的双向绑定运用

精品推荐
分类导航