点击查看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

最新文章

  1. 1869: Mathematics and Geometry
  2. margin和padding对行内元素的影响
  3. [转]DBA,SYSDBA,SYSOPER三者的区别
  4. IIS大数据请求设置方法
  5. 谈谈作为一个菜B的培训感受
  6. tomcat集群部署
  7. 转:数据包经由路由转发时源、目的IP地址及MAC地址变化情况
  8. Apose 套打
  9. 1610: [Usaco2008 Feb]Line连线游戏
  10. 【转载】Apache Spark Jobs 性能调优(二)
  11. 能量最小化初探,graphcuts能量最小化调用
  12. Angular 自定义指令传参
  13. typeScript入门基础 (1)
  14. ionic后台返回的数据是html模板的时候,解析html文件的方法:
  15. 安装配置Glusterfs
  16. 剑指offer例题——二维数组中的查找
  17. doom启示录
  18. 深入理解Python中的元类(metaclass)
  19. ArrayList集合与List与数组的区别
  20. uva 1619 - Feel Good || poj 2796 单调栈

热门文章

  1. 利用python设计PDF报告,jinja2,whtmltopdf,matplotlib,pandas
  2. jquery的2.0.3版本源码系列(4):285-348行,extend方法详解
  3. Django配置mysql
  4. 中间件学习之RMI+JDBC远端数据库的访问
  5. hibernate的基本配置
  6. mvc中html导出成word下载-简单粗暴方式
  7. JS中的事件以及DOM 操作
  8. IT团队之非正式沟通
  9. Oracle:解锁scott用户及设置密码
  10. 【DDD】领域驱动设计实践 —— 框架实现