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

  这篇文章主要介绍了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文件,代码如下:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

  })();

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

时间: 2024-11-03 13:35:16

AngularJS模块管理问题的非常规处理方法的相关文章

Dedecms织梦后台模块管理空白(不显示)解决方法

dedeCms后台模块管理中模块列表不显示的现象如下图: 解决办法: 如果之前有备份网站程序的话,直接在备份程序中按照以下途径找到以下文件夹:  代码如下 复制代码 data/module 复制里面所有文件后,粘贴到程序里面的相同的文件夹里面,覆盖所有文件. PS:如果没有备份网站,到dedecms官网下载一个与你的版本相同的源程序,按照上面的方法同样覆盖文件,然后更新缓存就可以了. dedeCms后台模块管理空白现象如下图: 解决办法: 这是因为你 安装模块,然后又卸载模块,卸载的时候选择了删

移除AngularJS下URL中的#字符的方法

  这篇文章主要介绍了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人气JavaScript库,需要的朋友可以参考下 AngularJS 默认将会使用一个 # 号来对URL进行路由. 例如: http://example.com/ http://example.com/#/about http://example.com/#/contact 要获得干净的URL并将井号从URL中移除是很容易的. 完成两件事情就行了. 配置 $locationProvider 设置我们的

使用AngularJS对路由进行安全性处理的方法

  这篇文章主要介绍了使用AngularJS对路由进行安全性处理的方法,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下 简介 自从出现以后,AngularJS已经被使用很长时间了. 它是一个用于开发单页应用(SPA)的javascript框架. 它有一些很好的特性,如双向绑定.指令等. 这篇文章主要介绍Angular路由安全性策略. 它是一个可用Angular开发实现的客户端安全性框架. 我已经对它进行了测试. 除了保证客户端路由安全性外,你也需要保证服务器端访问的

Facebook 发布了新的 Node 模块管理器 Yarn,或取代 npm 客户端

本文讲的是Facebook 发布了新的 Node 模块管理器 Yarn,或取代 npm 客户端, 在 JavaScript 社区中,工程师们互相分享成千上万的代码,帮助我们节省大量编写基础组件.类库或框架的时间.每个代码包可能都依赖于其他代码,而代码间的依赖关系则由包管理器负责维护.目前最流行的 JavaScript 包管理器是 npm 客户端,在 npm 仓库中提供了多达 30 万的软件包.据统计,已有超过 500 万的工程师使用 npm 仓库,其软件包下载量达到了 50 亿次/月. 在 Fa

AngularJS控制器controller正确的通信的方法_AngularJS

AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro

AngularJS模块学习之Anchor Scroll_AngularJS

俗话说的好:好记性不如一个烂笔头,本文对angularjs模块学习笔记,首先我们从anchor scroll开始学习,具体内容请看下文: •$anchorScroll()用于跳转至定义ID: •$location对象的hash()方法会替换当前url作为hash键: •$anchorScroll()读取并跳转至ID处. 下面简单的例子,这里是输出结果: 源码 index.html--11行,标示了的跳转ID: <!DOCTYPE html> <html ng-app="app&

AngularJS模块详解及示例代码_AngularJS

AngularJS支持模块化的方法.模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁.我们在单独的js文件中定义的模块,并将其命名为按照module.js文件形式.在这个例子中,我们要创建两个模块. Application Module - 用于初始化控制器应用程序 Controller Module - 用于定义控制器 应用模块 mainApp.js var mainApp = angular.module("mainApp", []); 在这里,我们已经声明使用 a

解析Linux内核的基本的模块管理与时间管理操作---超时处理【转】

转自:http://www.jb51.net/article/79960.htm 这篇文章主要介绍了Linux内核的基本的模块管理与时间管理操作,包括模块加载卸载函数的使用和定时器的用法等知识,需要的朋友可以参考下   内核模块管理Linux设备驱动会以内核模块的形式出现,因此学会编写Linux内核模块编程是学习linux设备驱动的先决条件. Linux内核的整体结构非常庞大,其包含的组件非常多.我们把需要的功能都编译到linux内核,以模块方式扩展内核功能. 先来看下最简单的内核模块 ? 1

使用AngularJS实现可伸缩的页面切换的方法

这篇文章主要介绍了使用AngularJS实现可伸缩的页面切换的方法,AngularJS是一款热门的JavaScript库,需要的朋友可以参考下 AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出. 演示: http://embed.plnkr.co/PqhvmW/preview 首先,标记: ? 1 2 3