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

2024-10-09 13:23:55

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

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

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

angular十大常见问题

AngularJS可以视为是一种数据优先的框架,在它的三个层面中,数据模型是骨架,视图模型和业务事件是血肉,视图模板和指令是皮毛,这三层合在一起,就形成了一个活生生的Web应用. 1.ng-if的情况下 ,始终将页面中的元素绑定到对象的属性(data.x)而不是直接绑定到基本变量(x)上.因为ng-if 会(隐式地)产生新作用域. 2.ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决? 加 track by $index 可解决.也可以 trace by 任何一个普
总结十个Angular.js由浅入深的面试问题

一.ng-show/ng-hide 与 ng-if的区别? 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的.而ng-if实际上控制dom节点的增删除来实现的.因此如果我们是根据不同的条件来进行dom节点的加载的话,那么ng-if的性能好过ng-show. 二.解释下什么是$rootScrope以及和$scope的区别? 通俗的说$rootScrope 页面所有$scope的父亲. 我们来看下如何产生$rootScope和$scope吧. step1:Angu
angularjs在ng-repeat中使用ng-model遇到的问题

在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决. 例如: html: <body> <div ng-controller="selectController"> <div ng-repeat="pop in citylist"
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBody public Map<String, Object> save( @RequestParam(value = "isform", required = false) String isform) { System.out.println("isform value
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法

写此文的背景:在学习使用angular的$http.post()提交数据时,后台接收不到参数值,于是查阅了相关资料,寻找解决办法. 写此文的目的:通过上面提到的文章中的解决之道,结合自己的经验,总结了如下发现. 前端:html,jquery,angular 后端:java,springmvc 一.平常使用的post提交和接收方式前端使用jquery提交数据. $.ajax({ url:'/carlt/loginForm', method: 'POST', data:{"name":&
AngularJS页面访问时出现页面闪烁问题的解决

我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间.这里的间隔可能很小,甚至让人感觉不到区别:但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面. 这种情况被叫做Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上. 1.ng-cloak ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含
Angular 页面跳转时传参问题

首先,你需要已经配置过你的rout,比如: $stateProvider .state('firstPage',{ url:'/Page/firstPage', templateUrl: 'Page/views/firstPage.html', controller: 'firstPageCtrl' //dependencies: ['service/vipSeachService'] }) .state('secPage', { params:{'message':null}, url: '/
给angular加上动画效遇到的问题总结

加入"动效"是让用户对应用的行为进行感知的一种有效手段."列表"是应用中最常使用的一种界面形式,经常会有添加行,删除行,移动行这些操作.设想添加的操作很简单,删除时从大到小,然后消失:添加时从小到大:移动就是先删除再添加.感觉上并不复杂,应该利用CSS的transition就能搞定,可是实际做起来发现有不少问题要处理,下面一一道来. 来些简单的测试 1.最初的版本 <div class='list'> <div class='row-1'>r
AngularJs解决跨域问题案例详解(简单方法)

首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要说了,我的意思是这个说明必须要做了,答案是必须的,为了更好的方便大家理解嘛. 我们以两个主域名或者一个主域名+一个二级域名为例,均可演示跨域问题. 客户端 a.com 服务端 b.com或者s.a.com angularJs版本 V1.2.25 准备工作做得很充分嘛,就差把我们的编辑器是subline暴露出来了,这个一般人我是不告诉他滴. 有人嚷嚷了,这问题老早就有了,你现在提出来有啥意义呢?难不成你还
AngularJS上拉加载问题解决方法

项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找另外7条数据.但实际情形是不确定的,在服务端控制台(见图2)可看到begno一直到了126,也就是相当于客户端往服务端请求了127次,这是一个令人无法忍受的结果. 图1 客户端搜索栏图2 服务端控制台可以断定是客户端的业务逻辑出现了问题.返回到客户端,查看源码逻辑,修改如下: 控制器 $scope.medsearchMore = fu

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

相关推荐

随机推荐