点击查看AngularJS系列目录


用postal.js在AngularJS中实现event bus

用postal.js在AngularJS中实现event bus

理想状态下,在一个AngularJS应用中,控制器都应该是相互独立的代码单元,它们之间不应该有任何的相互引用。但是有些时候,你还是需要让控制器在你的应用中相互交流。例如你现在有一个叫做Orders的控制器,它需要告诉一个叫做Cart的控制器其中需要添加一个新项目。

实现这种类型的交流方式的最好的方法之一就是使用event bus。

postal.js正是一个在JS中实现了event bus的库。

Postal.js是什么?

  1. Postal.js是一个使用Javascript编写的,位于内存中的message bus,它收到了AMQP的一些启发。Postal.js在浏览器中运行,同时也可以使用Node.js在服务器端运行。它采用了JS程序员很熟悉的“事件类型”编程范式,同时通过提供“broker”以及更加精巧实现的subscriber来扩展了事件类型。

你可以使用postal在特定的频道中发布消息。通过这种方式,你可以将你的消息分割为app,cart,ui等不同类型。它同时也使用了envelope设计模式来方式你的订阅回调中有n个变量。

在使用postal.js时,你可以轻松的装饰$scope,并为它添加一个叫做$bus的方法来允许你和其他的控制器进行交流。

angular.module('myApp')
.config(function ($provide) {
$provide.decorator('$rootScope', [
'$delegate', function ($delegate) {
Object.defineProperty($delegate.constructor.prototype,
'$bus', {
value: postal,
enumerable: false
}); return $delegate;
}]);
});

现在,你的控制器已经拥有了postal.js,你可以通过下面的代码来使用它:

angular.module('myApp')
.controller('CartCtrl', ['$scope', function ($scope) {
$scope.$bus.subscribe({
channel: 'orders',
topic: 'order.new',
callback: function(data, envelope) {
console.log('it worked', data, evenlope);
}
});
}
])
.controller('OrderCtrl', ['$scope', function ($scope) {
$scope.order = function() {
$scope.$bus.publish({
channel: 'orders',
topic: 'order.new',
data: { /* order info */ }
});
};
}
]);

在CartCtrl中,$scope.$bus.subscribe方法被调用。这个订阅被设置来监听orders频道上主题为order.new的所有消息。当一个消息的主题能够匹配上的时候,callback函数将会被调用。

在OrderCtrl中,$scope.$bus.publish方法在$scope.order方法被调用时被调用。它将会在正确的频道上发布一条消息,并使用正确的主题来触发订阅。发布出去的data将会被订阅中的callback收到,注意callback中还包含一个envelope,它是接收到的数据的一个包装。

总结

通过使用$bus装饰器你可以让控制器之间的交流变得非常轻松。当然除了postal.js之外,还有很多其他的event bus库可以选择。但是如果你喜欢这个库的话,别忘了去Github上给作者Jim Cowart一些感谢!

本文译自An angular.js event bus with postal.js,原文地址http://jonathancreamer.com/an-angular-event-bus-with-postal-js/

转载自: http://www.html-js.com/article/Using-Angular-to-develop-web-application-with-postaljs-is-implemented-in-AngularJS-event-bus

用postal.js在AngularJS中实现订阅发布消息的更多相关文章

  1. JS调用AngularJS中的方法

    案例: 在IONIC中使用百度地图的JS版SDK,在该JS相关界面中需要触发点击事件来实现在Ionic的JS中定义的函数,参考方法如下: onclick="var $scope = angu ...

  2. AngularJS的简单订阅发布模式例子

    控制器之间的交互方式广播 broadcast, 发射 emit 事件 类似于 js中的事件 , 可以自己定义事件 向上传递直到 document 在AngularJs中 向上传递直到 rootScop ...

  3. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  4. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  5. angularjs中provider,factory,service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  6. 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...

  7. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  8. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  9. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

随机推荐

  1. matplotlib 填充颜色

    def huitu_host(nodes,total): x = np.arange(len(nodes)) plt.figure(figsize=(9,5)) plt.xticks(x,nodes) ...

  2. [读书笔记] 三、搭建基于Spring boot的JavaWeb项目

    一.POM <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3. ...

  3. MongoDb 入门教程

    MongoDb 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. 它是可扩展的高性能数据存储解决方案,经常被用于非关系型数据的存储,能存储海量的数据. 常 ...

  4. jmeter性能测试 套路二

    1.一般我们不会通过下面这种去跑性能测试 2.我们会通过这种方式去跑性能测试 3.录制自动化 就用新的 4.录制性能测试  就用

  5. Redis介绍和环境安装

    -------------------Redis环境安装------------------- 1.安装     1.卸载软件         sudo apt-get remove redis-se ...

  6. 【 DCOS 】织云 CMDB 管理引擎技术详解

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者 : 李琦 , 腾讯高级工程师 , 就职于网络平台部.曾负责公司海量运营系统的规划设计,如 TMP.Sniper.GSLB.IDCSp ...

  7. 49、html基础认识&常用标签(1)

    从今天期我们进入前端的学习,先学习html,没有任何需要逻辑需要烧脑,只需要记忆.练习.练习.练习. 一.HTML初识 1.web服务本质 import socket def main(): sock ...

  8. PHP初入,基础知识点分享(a标签&表格的嵌套&文字的处理)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  9. 团队作业8——第二次项目冲刺(Beta阶段)Day6——5.25

    1.提供当天会议照片: 2.会议的内容: (1)讨论已经完成的功能,讨论存在的问题 (2)对于界面,谈谈各自的看法 (3)讨论接下来的任务和改进的地方 3.工作安排: 队员 今日任务 明日任务 贡献比 ...

  10. 团队作业8----第二次项目冲刺(beta阶段)5.23

    Day5-05.23 1.每日会议 会议内容: 1.组长林乔桦对昨日的工作进行了总结并且安排今日的任务. 2.潘益靖副组长说明昨日任务的完成情况. 3.组员对昨天的各项工作进行了汇报以及对今天的工作进 ...