位置: 编程技术 - 正文

详解AngularJS的通信机制(angularjs2)

编辑:rootadmin

推荐整理分享详解AngularJS的通信机制(angularjs2),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angularjs constant,angular.json详解,angular.js,angular jsx,angularjs2,angular.js,angularjs constant,angularjs constant,内容如对您有帮助,希望把文章链接给更多的朋友!

现在几乎满世界的人都在问! 外面有人么&#; 这里是 USS AngularJS, 我们遇到麻烦了,我们的服务讲得是克灵贡语(Klingon) 而我们的控制器不能同它们的Ferengi 指令通信了. 有人能帮助我们么!

我已经不知道有多少次遇到这种有关什么才是AngularJS里面的组件通信的最佳方式这样的问题了. 很多时候答案都会是为此使用 $rootScope 对象去向任何想要收听的人广播$broadcast出一条消息. 然而,那还真不是做这件事的最佳方式. 组件之间广播消息意味着它们需要多少知道一些其它组件编码的细节,这样就限制了它们的模块化和重用.

本文我就将展示如何为AngularJS中的内部组件通信使用发布/订阅模式.

AngularJS 有多种方式可供你用于组件之间的通信,而最常使用的方法却需要你知道太多有关那些组件如何通信的细节,这样就增加了组件之间的耦合度,并降低了它们的模块性和内聚程度. 这样也就使得你的组件很难在其它应用程序中重用.

通过使用发布/订阅设计模式,我们可以降低组件之间的耦合度,并将它们的之间通信的细节封装起来. 这将能帮助增加你组件的模块化程度,可测试性以及可重用性.

我将会描述的发布/订阅模式实现由 Eric Burley, @eburley 在它的帖子angularjs.org 观察, 有关发布订阅模式.. 中推荐过。

我所描述的示例应用程序,会向你展示你可以将发布/订阅模式如何运用于内部控制器通信以及控制器的服务通信. 你可以在GitHub上我的资源库 angularjs-pubsub 下面找到源代码. 首先我们需要一条通信管道

首先我们来讲讲用于处理发布和订阅信息的服务。我定义了一个服务接口,提供了发布和订阅信息的方法,我们可以用它来处理我们想要用来交换的信息。

在下面的代码中,我定义了两个内部信息; _EDIT_DATA_, 用来表示我们需要编辑跟随信息传过来的数据,和 _DATA_UPDATED_, 用来表示我们的数据已经被改变。这些都是定义在内部的,用户没办法访问到它们的,这样有助于隐藏具体实现。

而对于每条信息,有两个方法; 一个用来发布信息推送给订阅者,另一个可以让订阅者注册一个回调方法,当接收到信息的时候,这个方法就会被调用。

用来向订阅者发布信息方法是 editData,在第 9 行,还有 dataUpated,在第 行。它们通过 $rootScope.$broadcast 方法向待处理事件推送私有通知。

详解AngularJS的通信机制(angularjs2)

用来注册事件的方法,通过 $scope.$on 建立监听,当接收到广播的消息之后,就会轮流执行那些被订阅者注册到服务上的事件。同时,由于订阅者需要自己的 scope 作为参数传过来,我们可以用它来执行监听的信息,从而避免了维护监听者列表这些复杂的处理。注册事件的方法是 onEditData,在 行,还有 onDataUpdated 在 行。

为了隐藏实现细节,我用了 Revealing Module (揭示模块:好丑的名字)模式,只返回那些我希望让用户使用的方法。

发布消息

发布消息很简单,首先我们需要在我们的控制器里为 requestNotificationChannel 引入一些依赖. 你可以在下面dataService的定义第二行看到这个. 当事件发生时,如果需要向需要了解有变化发生的其它对象发送信号, 你只需要调用requestNotificationChannel上恰当的通知方法就可以了. 如果你注意到了dataService的 saveHop, deleteHop 和 addHop 方法, 你就会看到它们都调用了 requestNotificationChannel 上的dataUpdated方法, 这个方法将会给侦听器发送信号,侦听器则已经用 onDataUpdated 方法注册过了.

接收事件通知

从 requestNotificationChannel 接收事件通知也很简单,额外的我们只需要回调处理器来在消息被发送时使用通知来做一些自己的处理. 我们将再次需要添加一些依赖到面向我们的控制器、服务以及指令的 requestNotificationChannel 上, 你可以在下面代码的第二行中看到这些. 接下来我们需要定义一个事件回调处理器来对事件通知做出回应,你可以在下面的第五行代码中看到. 然后我们需要通过调用 onDataUpdated 方法来吧我们的回调处理器注册到requestNotificationChannel,并传入来自控制器和回调处理器的范围, 我们在第9行代码中做了这些事情.

用于控制器通信的控制器

我们也可以将 the requestNotificationChannel 用于控制器间的通信. 我们只需要有一个控制器扮演发布者的角色,而另外一个控制器扮演订阅者的角色就行了. 如果你观察到前段代码第行view1-controller的onEdit方法,你会看到它发送了一个editData消息,消息包含需要使用 requestNotificationChannel 编辑的项. 下面的 view2-controller 从第5行到第9行将它的 onEditDataHandler 用 requestNotificationChannel 进行了注册. 如此无论何时view1-controller一旦发送editData消息,带上要修改的项,view2-controller都会受到editData消息的通知,获得该项并将其更新到它的模型.

写一个好的接口文档

有一件事情可能会被忽略,我们在组件间用了通信接口,而这些接口,它们需要一个好的文档来说明应当如何使用。上面的例子中,如果没有文档,用户肯定不会知道 onEditData 会给回调函数传一个待编辑数据。所以当你开始用这个模式,用好的技巧在于,给方法写注释文档,以确保通知服务明确知道发生了什么事情。总结

好了,我们探讨了如何在你的 AngularJS 应用中使用订阅/发布模式来实现模块间通信。该模式可以让你的模块从内部消息解耦,更便于复用。你甚至可以把模块之间的通信全部替换成订阅/发布模式。尤其当你的服务中有很多异步请求,以及你希望把数据缓存在服务中,从而减少和服务器通信的时候,这种模式相当有效。

我希望这对你有所帮助,你可以在我的 GitHub 仓库 angularjs-pubsub 下找到例子的代码。

在AngularJS应用中实现一些动画效果的代码 在Angular当中,CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先,我们需要加载ngAnimate模块到我们应用的roo

3个可以改善用户体验的AngularJS指令介绍 1.头像图片为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串。所以聪明的做法是使用指令来

深入讲解AngularJS中的自定义指令的使用 AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数。这可能很难理解。现在,假设我们想在应用中不同页面复用一些

标签: angularjs2

本文链接地址:https://www.jiuchutong.com/biancheng/380430.html 转载请保留说明!

上一篇:浅析AngularJS中的生命周期和延迟处理(angular.js)

下一篇:在AngularJS应用中实现一些动画效果的代码(angularjs2)

  • 停车费手撕票如何填写申报表
  • 税控盘这个月没有反写会怎么样
  • 小规模纳税人征税率为多少
  • 企业所得税年报补报
  • 非专利技术转让计入什么科目
  • 软件开发成本核算模板
  • 销售免税的有机食品
  • 多交的增值税怎么退
  • 正常经营损失
  • 行政事业单位的会计核算可以采用权责发生制吗
  • 报销粘贴单怎么写
  • 费用暂估会计分录
  • 网上报税费用如何抵扣账务怎么处理?
  • 地税附加税减免政策
  • 外币折算买入价卖出价
  • 单位社保扣款
  • 安装属于劳务报酬吗
  • 简化丢失专用发票的处理流程
  • 业务招待费在税法上的规定
  • 上海中级会计报名入口
  • 酒精是否属于消费税征税范围
  • 应收和预收怎么算
  • 企业对外捐赠设备会计分录
  • 收取违约金如何入账
  • 现金付款没收据怎么入账
  • 如何解决win10系统复制文件速度
  • 如何保护电子邮件账户不被黑客攻击
  • 免租期房产税增值税如何计算
  • 安保服务差额征税如何开票
  • 对外支付需要缴纳增值税吗
  • vue解决跨域问题
  • 滞纳金和罚金计入哪个会计科目
  • pniopcac.exe是什么
  • react 刷新
  • vue项目中技巧知识点
  • vuev-for循环k值的意义
  • 命令行激活profile命令的格式
  • 新成立的公司的搭建费可以申请补助吗?
  • 账户验证是什么意思
  • 出租房屋房产税计算
  • 当期可抵扣进项税额包括进项转出额吗
  • 收到政府给员工的礼物
  • 减免增值税计入营业外收入明细科目
  • 计提折旧的固定资产平均总值怎么算
  • 工程的直接成本包括哪些内容
  • 应收账款属于会计分录
  • 收到所得税退税怎么做账务处理
  • 装修费用进什么科目
  • 合理损耗如何处理
  • 纯外贸企业进项税怎么抵扣
  • 跨年更正错误记账凭证的方法
  • 购买专利后有占有权吗
  • 管家婆记账可以都有凭证做吗?
  • 综合所得预扣预缴表校验结果以下人员未报送
  • 接受非货币性资产捐赠入账价值
  • 如何理解施工企业的周转材料
  • 股东的义务是什么意思?
  • 分公司从业人数填越少越好吗
  • 试运行收入冲减哪个项目
  • 资本和资产的区别举例说明
  • mysql安装配置教程5.7.26
  • mysql数据库5.7.27安装
  • win8无法识别的usb设备 怎么解决
  • windows8.1安装windows7
  • linux jack
  • linux的tar
  • win10怎么设置扩展屏
  • 在解决ul居中问题时想到的几点
  • perl $?
  • qt creator kit
  • Unity3D游戏开发基础
  • linux修改目录路径
  • 实用的批处理
  • 如何用jquery
  • 执行批处理命令
  • node.js操作
  • jquery console.log
  • java script怎么学
  • 国税局调动
  • 建设工程需要缴纳哪些税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设