angularJS广播

控制器之间共享数据(向父级/子级控制器传递event,data),类似于service在不同的控制器中通信 html: <div ng-controller="ParentCtrl"> <div ng-controller="SelfCtrl"> <a ng-click="click()">click</a> <div ng-controller="ChildCtrl"&g…

1, angularJs的服务有provider,Service, Factory. Factory是对Service的封装,Service是对Provider的封装. Provide的源码如下: function provider(name, provider_) { if (isFunction(provider_)) { provider_ = providerInjector.instantiate(provider_); } if (!provider_.$get) { throw E…

angularjs 控制器、作用域、广播详解

一.控制器首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样"控制器"的角色就会很尴尬,因为我们不可能把不同业务的数据模型都绑在同一个控制器中. 这种实现方式也存在一个问题是:如果控制器1和控制器2里面有2个方法是一模一样的怎么办? <!doctype html> <html ng-app> <head> <…

angularJS 事件广播与接收[转]

路由的事件事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的状态变化: $routeStartChange, $routeChangeSuccess, $routeChangeError, $routeUpdate. 其中最常用的是前两个,这里稍微解释一下. (1) $routeStartChange 看名字就能猜出来它表示的是路由开始变化的事件,在浏览器地…

AngularJS 事件广播与接收 $emit $broadcast $on

AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$rootScope的,或者说都是嵌套在主作用域下面的.很多时候,你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么. 那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 在AngularJS中还…

Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat…

AngularJS 事件广播与接收 $broadcast,$emit,$on 作用域间通信封装factory服务发布订阅

不同作用域之间通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信. 一.说明 1.广播 $broadcast 说明:将事件从父级作用域传播至本作用域及子级作用域. 格式:$broadcast(eventName,args) $emit 说明:将事件从子级作用域传播至本作用域及父级作用域,直至根作用域. 格式:$emit(eventName,args) 2.接收 $on 说明:在作用域中监控从子级或父级作用域中传播过来的事件及相应的数据. 格式:$on(eventName…

angularJS 事件广播与接收

发送消息: $scope.$emit(name, data) 或者 $scope.$broadcast(name, data); 接收消息: $scope.on(name,function(event,data){ }); 区别: $emit 广播给父controller $broadcast 广播给子controller broadcast 是从发送者向他的子scope广播一个事件. 这里就是ParentController发送, ParentController 和 ChildContr…

使用ionic中的侧边栏以及angularjs中广播的使用

接着之前的ionic的例子查看例子:我的第一段ionic代码 demo3.html(黄底内容为增加或修改的内容) <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>ionic-demo3</title> <link href="../lib/ionic/css/ionic.css&q…

通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化),并且是延迟加载的(需要时才会被创建).服务提供了把与特定功能相关联的方法集中在一起的接口.(此解释来源于AngularJS权威教程). 在笔者的认知中,服务就是用来创建数据,存储数据,也可以向后台请求数据的一个很特别的“领域”,除此之外,服务还能与控制器之间进行紧密的通信,保证数据能通过控制器显示…

[译]AngularJS中DOM操作

再翻译一篇干货短文,原文:AngularJS jQuery 虽然Angularjs将我们从DOM的操作中解放出来了,但是很多时候我们还是会需要在controller/view加载之后执行一些DOM操作.问题是我们将DOM操作的代码放到controller中,然而controller是先于view加载的,这个时候我们要操作的元素还是不存在的. 这里有几种办法解决这个问题,我们按照AngularJS最佳实践方法的推荐度,从高到低列出来: 监听$viewContentLoaded广播事件 $scope…

AngularJS Directive 隔离 Scope 数据交互

什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简单的 directive 功能.当你需要创建一个可重复使用的 directive,只是偶尔需要访问或者修改父 scope 的数据,就需要使用隔离 scope.当使用隔离 scope 的时候,directive 会创建一个没有依赖父 scope 的 scope,并提供一些访问父 scope 的方式.…

Angularjs Controller间通信的几种方法

先说最简单的,适合简单数据一.使用controller as <body ng-controller="ParentCtrl as parent"> <input ng-model="parent.name" /> {{parent.name}} <div ng-controller="ChildCtrl as child"> <input ng-model="child.name"…

AngularJs项目实践总结

今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一．UI控件选择 Angularjs是不缺控件的,Github里现成的控件非常丰富,基本上足以应付一个普通管理系统中常见的控件需求.但是控件的丰富会带来选择的困难.选择控件要满足几个原则:原则1:符合业务场景原则2:控件持续更新原则3:满足性能要求举几个例子.首先是上传附件的控件.项目中要用到附件上传,谷歌上搜到了三个控件,分别是https://github.c…

AngularJs ui-router 路由的简单介绍

之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域).比如我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute已…

ngRoute AngularJs自带的路由

ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信息. controller:字符串或函数,指定控制器. controllerAs:一个用于控制器的标识符名称.. template:字符串或函数,html模板. templateUrl:字符串或函数,html模板的地址. resolve:对象,一个应该注入控制器的可选的映射依赖关系.如果任何一个依赖…

angularjs学习总结详细教程（转载）

1 前言前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.这里便将我学习AngularJS写成文档,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己也是一名学习者,会以学习者的角度来整理我的行文思路,这里可能只是些探索,有理解或是技术上的错误还请大家指出:其次我特别喜欢编写小…

[AngularJS] AngularJS系列(2) 中级篇之路由

目录原理 angular-route ui-router 事件深度路由原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on('$locationChangeStart', prepareRoute); $rootScope.$on('$locationChangeSuccess', commitRoute); 在ui-router中 listener = listener || $rootScope.$on('$locat…

AngularJS中的控制器和作用域

欢迎大家指导与讨论 : ) 一. 作用域的事件传播一 . 1 修改的传播关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修改了某个作用域中的某个属性(比如说$scope.data),那么依赖于$scope.data的一些行为(参数含有$scope.data的一些函数),都会重新执行计算.比如下面的这个例子,每当 <input> 被输入不同的对象, getCountry(city) 就会再次计算. <input…

AngularJS中的事件

欢迎大家指导与讨论 : ) 前言 Angular的作用域在本质上是分层次的(有的住户在低层, 有的住户在高层), 它们可以通过父子关系很自然地进行沟通.但通常, 这种沟通是单向的(父->子的单向沟通), 并且它们的作用域不共享变量, 它们的执行功能往往也各不相同, 也与它们父树上的位置无关.因此,在这种情况下,我们可以通过在这个链上传递事件的方式在作用域之间通讯(住在第n层的居委会主席对他的手下说: '嘿! 哥们! 麻烦帮我逐层告诉这栋楼的楼上/楼下的住户, 他们该交电费啦!').注意, 受作…

AngularJS中实现无限级联动菜单

多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的还是异步的?对于初始值的回填发生在前端还是后端?如果异步加载,是否对于后端API的返回格式有严格的定义?是否容易实现同步.异步共存?是否可以灵活的支持各类依赖关系?菜单中是否有空值选项?……一系列的问题都需要精心处理.带着这些需求搜索了一圈,不太出乎意料,并没有能在AngularJS的生态中找到一个…

Mastering Web Application Development with AngularJS 读书笔记(二)

第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效负荷通过scopes的层级.一个事件可以从任何一个scope被传播,并且可以向上($emit) 或者向下($broadcast) 传送. AngularJS核心服务和指令利用这个事件总线来处理应用状态的标志性重要的变化.比如,我们可以监听$locationChangeSuccess 事件(从 $…

Controller 通信发布接收广播

在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需要在controller中通信,一般为比较简单的通信机制,告诉同伴controller我的某个你所关心的东西改变了,怎么办?如果你是一个javascript程序员你会很自然的想到异步回调响应式通信—事件机制(或消息机制).对,这就是angularjs解决controller之间通信的机制,所推荐的唯…

精通AngularJS 读书笔记（1）

邂逅AngularJS AngularJS是采用JavaScript语言编写的客户端MVC框架,帮助开发者编写现代化的单页面应用.尤其适合编写有大量CURD操作的,具有AJAX风格的富客户端应用. 使用HTML作为模板语言无须对Dom进行显示刷新有趣的和可扩展的组件子系统能够教会浏览器如何解释自定义的HTML标签及属性依赖注入及可测试性 AngularJS速成 AngularJS库:一个包装好的JavaScript文件. AngularJS库相当小:最小化并用gzip压缩后只有30KB,不…

一步步构建自己的AngularJS(2)——scope之$watch及$digest

在上一节项目初始化中,我们最终得到了一个可以运行的基础代码库,它的基本结构如下: 其中node_modules文件夹存放项目中的第三方依赖模块,src存放我们的项目代码源文件,test存放测试用例文件,.jshintrc是jshint插件的配置文件,karma.conf.js是karma的配置文件,package.json是npm的配置文件,结构其实很简单.从本节开始,会在这个代码库的基础上进行我们自己Angular的实现. 首先,在写代码之前,在命令行中输入npm test命令,让我们的测试用…

[学习笔记] 七步从AngularJS菜鸟到专家（7）：Routing [转]

这是＂AngularJS – 七步从菜鸟到专家＂系列的第七篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives,上一篇了解了services的强大. 在这一章,我们来看几个前面没有机会细说的关键点,文章的最后会列举一些特别棒的学习资源链接和工具. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完…

[学习笔记] 七步从AngularJS菜鸟到专家（6）：服务 [转]

这是＂AngularJS – 七步从菜鸟到专家＂系列的第六篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第五篇我们讨论了Angular内建的directives.在这一章,我们来讨论services,整理我们的代码并完成我们的音频播放器应用. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看看这里. 目前为止,我们把注意力都放在…

[学习笔记] 七步从AngularJS菜鸟到专家（4和5）：指令和表达式 [转]

这一篇包含了＂AngularJS - 七步从菜鸟到专家＂系列的第四篇(指令)和第五篇(表达式). 之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用.在这一部分,我们会厘清一些术语,然后深入探讨很多Angular.js提供的核心功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放它们.完成版的Demo可以看这里(http://www.ng-n…

[Angularjs]视图和路由（四）

写在前面关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]ng-show和ng-hide [Angularjs]视图和路由(一) [Angularjs]视图和路由(二) [Angularjs]视图和路由(三) 路由模式不同的路由模式在浏览器的地址栏中会以不同的UR…

AngularJS开发指南9：AngularJS作用域的详解

AngularJS作用域是一个指向应用模型的对象.它是表达式的执行环境.作用域有层次结构,这个层次和相应的DOM几乎是一样的.作用域能监控表达式和传递事件. 作用域的特点作用域提供APIs($watch)来观察模型的变化. 作用域提供APIs($apply)将任何模型的改变,反映到视图上. 作用域能通过共享模型成员的方式嵌套到应用组件上.一个作用域从父作用域继承属性. 作用域提供表达式执行的上下文.比如说表达式{{username}}本身是无意义的,除非把它放到指定username属性的作用域…