Implementing subscription Publishing messages in Angularjs with Postal.js

Implement event bus in Angularjs with Postal.js

Implement event bus in Angularjs with Postal.js

Ideally, in a ANGULARJS application, the controller should be a separate unit of code that should not have any mutual references between them. However, there are times when you need to have the controller communicate with each other in your application. For example, you now have a controller called orders, which needs to tell a controller called a cart where a new item needs to be added.

One of the best ways to achieve this type of communication is to use event bus.

Postal.js is a library that implements the event bus in JS.

What is Postal.js?

1. Postal.js is a message bus in memory written using JavaScript, and it receives some inspiration from AMQP. Postal.js runs in a browser and can also be run on the server side using node. js. It uses the "event type" programming paradigm that JS programmers are familiar with, while extending the event type by providing "broker" and more subscriber implementations.

You can use postal to post messages on specific channels. In this way, you can divide your message into different types such as App,cart,ui. It also uses the envelope design pattern to have n variables in your subscription callback.

When using Postal.js, you can easily decorate the $scope and add a method called $bus to allow you to communicate with other controllers.

Angular.module (' myApp ')      . config (function  ($provide) {        $provide. Decorator (' $ Rootscope ', [            function  ($delegate) {            Object.defineproperty ($ Delegate.constructor.prototype,             ' $bus ', {                value:postal,                false             });             return $delegate;        }]);    });

Now that your controller has postal.js, you can use it with the following code:

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*/ }          });    }; }]);

In Cartctrl, the $scope. $bus. Subscribe method is called. This subscription is set to listen for all messages on the Orders channel subject to order.new. The callback function is called when the subject of a message can be matched.

In Orderctrl, the $scope. $bus. Publish method is called when the $scope.order method is called. It will post a message on the correct channel and use the correct theme to trigger the subscription. The published data will be received by the callback in the subscription, note that callback also contains a envelope, which is a wrapper for the received data.

Summarize

By using the $bus decorator you can make communication between controllers very easy. There are, of course, many other event bus libraries to choose from, in addition to Postal.js. But if you like the library, don't forget to give the author Jim Cowart some thanks on GitHub!

This article is translated from an Angular.js event bus with Postal.js, the original address http://jonathancreamer.com/an-angular-event-bus-with-postal-js/

Reprinted from: http://www.html-js.com/article/ Using-angular-to-develop-web-application-with-postaljs-is-implemented-in-angularjs-event-bus

Implementing subscription Publishing messages in Angularjs with Postal.js