Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/batux/ng-event-bus
ng-event-bus
https://github.com/batux/ng-event-bus
angularjs eventbus pubsub
Last synced: 9 days ago
JSON representation
ng-event-bus
- Host: GitHub
- URL: https://github.com/batux/ng-event-bus
- Owner: batux
- License: mit
- Created: 2017-10-21T08:33:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-21T09:50:47.000Z (over 7 years ago)
- Last Synced: 2024-11-17T02:41:46.373Z (2 months ago)
- Topics: angularjs, eventbus, pubsub
- Language: JavaScript
- Size: 4.88 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-event-bus JS 1.0
ng-event-bus JS is a two way message passing library which uses the infrastructure of Angular JS 1. It coordinates the communication of between independent software parts. With this way, we can create isolated components that send events for each other easily. ng-event-bus JS aims to provide an abstraction layer for this communication. This small library has dependency for Angular JS 1. If we would like to use it, we have to include Angular JS 1 in projects.
Angular JS has message passing system which has '$broadcast, $emit and $on' methods. It uses Pub/Sub (Publisher/Subscriber) desing pattern. 'ng-event-bus' uses these methods oftenly.
ng-event-bus JS basic capabilities:
- You can send message immediately
- You can send message with a timeout value
- You can use $rootScope global glue object for message passing
- You can use $scope local glue object for message passing
- Parent component can communicate with child components
- A child component can send event message to its parent
- You send event message globally in your application
ng-event-bus JS is a modular software part. You can include this JS file in your projects. After that, start to use it fastly! It is so simple!
ng-event-bus JS 1.0 Integration Steps
```html
```
As you guess, we included javascript file in a HTML page. After that, ng-event-bus JS creates an Angular Module that named as 'angularEventbusModule'.
If you would like to use eventbus, we should add 'angularEventbusModule' as a dependency in your Angular JS project.
```javascript
var angularEventBusLabModule = angular.module('angularlab', [angularEventbusModule.EVENT_BUS_MODULE_NAME]);
```
In above code part, we added module as dependency. 'angularEventbusModule.EVENT_BUS_MODULE_NAME' denotes the name of event bus module.
Injecting Event Bus
```javascript
angularEventBusLabModule.controller('searchBoxController', ['$scope', 'eventBus', searchBoxController]);
```
We can inject event bus easily.
```javascript
var searchBoxController = function($scope, eventBus) {
...
```
Then, we can use a concrete object of event bus that denoted 'eventBus' as a variable.
In this example, we fired an event message globally, It uses $rootScope object. 'filter-list' is the topic name.
```javascript
var searchBoxController = function($scope, eventBus) {
var self = this;
self.eventBus = eventBus;
$scope.typedText = '';
$scope.textChange = function() {
self.eventBus.broadcastEventViaRootScope('filter-list', $scope.typedText);
}
}
angularEventBusLabModule.controller('searchBoxController', ['$scope', 'eventBus', searchBoxController]);
```
In this example, we subscribed to a special topic which we interested in. 'filter-list' is the topic name.
```javascript
self.eventBus.subscribeToEvent('filter-list', $scope, self.filterItems);
```