All Projects → govorov → ng-radio

govorov / ng-radio

Licence: other
RxJS-based message bus service for Angular2

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to ng-radio

ng-observe
Angular reactivity streamlined...
Stars: ✭ 65 (+441.67%)
Mutual labels:  rxjs, angular2
Angular2 Take Until Destroy
Declarative way to unsubscribe from observables when the component destroyed
Stars: ✭ 40 (+233.33%)
Mutual labels:  rxjs, angular2
Ngx Restangular
Restangular for Angular 2 and higher versions
Stars: ✭ 787 (+6458.33%)
Mutual labels:  rxjs, angular2
Blog
lizhonghui's blog
Stars: ✭ 109 (+808.33%)
Mutual labels:  rxjs, angular2
Rxmq.js
JavaScript pub/sub library based on RxJS
Stars: ✭ 134 (+1016.67%)
Mutual labels:  rxjs, message-bus
Batcave
Batcave client is chat app built with Electron and Angular2, Socket.io with RxJS.
Stars: ✭ 114 (+850%)
Mutual labels:  rxjs, angular2
Until Destroy
🦊 RxJS operator that unsubscribe from observables on destroy
Stars: ✭ 1,071 (+8825%)
Mutual labels:  rxjs, angular2
Blog Angular
Angular 笔记
Stars: ✭ 238 (+1883.33%)
Mutual labels:  rxjs, angular2
angular2-instagram
🔥Instagram like photo filter playground built with Angular2 (Web | Desktop)
Stars: ✭ 91 (+658.33%)
Mutual labels:  rxjs, angular2
ngx-redux-ui-management-recipes
Recipes for managing the UI layout of an application using Redux in Angular
Stars: ✭ 39 (+225%)
Mutual labels:  angular2
grpc-angular
gRPC to Angular service compatible with grpc-gateway
Stars: ✭ 12 (+0%)
Mutual labels:  angular2
ngmodule-viz
Visualize the dependencies between the NgModules in your Angular 2+ application
Stars: ✭ 35 (+191.67%)
Mutual labels:  angular2
8ComicDownloaderElectron
8Comic下載器:一個從8Comic網站下載漫畫的簡單程式,並以GitHub's Electron為開發架構,支援Windows/Linux/Mac,最新版本下載位址:https://github.com/wellwind/8ComicDownloaderElectron/releases
Stars: ✭ 48 (+300%)
Mutual labels:  angular2
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (+83.33%)
Mutual labels:  angular2
ngrx-signalr-core
A library to handle realtime SignalR (.NET Core) events using @angular, rxjs and the @ngrx library
Stars: ✭ 18 (+50%)
Mutual labels:  rxjs
ngx-smart-loader
Smart loader handler to manage loaders everywhere in Angular apps.
Stars: ✭ 28 (+133.33%)
Mutual labels:  angular2
reactive-pipes
A thin library around Reactive Extensions to simplify writing evented applications in C#.
Stars: ✭ 12 (+0%)
Mutual labels:  message-bus
angular-progress-bar
This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options
Stars: ✭ 26 (+116.67%)
Mutual labels:  angular2
angular2-focus
Angular attribute directive that gives focus on an element depending on a given expression 🔎
Stars: ✭ 21 (+75%)
Mutual labels:  angular2
angular4-seed-starter
An angular4 starter with webpack2+aot+lazyload+hmr+scss(个人搭的angular4 starter,使用webpack2,包含aot、lazyload、scss、热替换功能等等)
Stars: ✭ 23 (+91.67%)
Mutual labels:  angular2

Ng-Radio

RxJS-based message bus service for Angular2 apps inspired by Backbone.Radio. Inject it in your application module and have fun.

There is nothing angular2-specific, though. It is possible to use it in any application.

Installation

npm install --save ng-radio

NPM page

Usage

First, import it:

import { NgRadio } from 'ng-radio';

Then, if using Angular2, inject it as a service (do not forget about providers):

......
import { NgRadio } from 'ng-radio';
......

@NgModule({
    imports:[
		......
    ],
    providers: [
    	.......
        NgRadio,
        .......
    ],

constructor(private radio: NgRadio){...}

Or create an instance manually:

let radio = new NgRadio();

Since you have NgRadio instance in your app, you can use these methods for passing messages:

  • radio.cast(key, data) - send message to radio.

  • radio.on(pattern) - returns observable you can subscribe to listen events.

Patterns may contain multiple segments split by :. Use this feature to create namespaces for messages you cast. You can use * in pattern to subscribe to any matching segment, or use ** to subscribe to all segments, starting from particular position.

For example, you can use on('error:*') and subscribe to all errors, including something like error:http or error:internal and so on:

radio.cast('app:start',     'started');
radio.cast('message:greet', 'Hi!');
radio.cast('message:bye',   'Bye!');

radio.on('app:start').subscribe((message)=>{
	console.log(message); //will receive 'started' only
});

radio.on('message:greet').subscribe((message)=>{
	console.log(message); //will receive 'Hi!'
});

radio.on('message:bye').subscribe((message)=>{
	console.log(message); //will receive 'Bye!'
});

radio.on('message:*').subscribe((message)=>{
	console.log(message); //will receive both 'Hi!' and 'Bye!'
});

radio.on('**').subscribe((message)=>{
	console.log(message); //will receive all messages: 'started', 'Hi!' and 'Bye!'
});

Examples

These strings will match:

  • on('**' , callback) can subscribe to any message with any segments count

  • on('a' , callback) can subscribe to cast('a', ...)

  • on('a:b' , callback) can subscribe to cast('a:b', ...)

  • on('a:b:c' , callback) can subscribe to cast('a:b:c', ...)

  • on('a:**' , callback) can subscribe to cast('a:b:c', ...), cast('a:b:c:d:e:f', ...)

  • on('a:*:*' , callback) can subscribe to cast('a:b:c', ...), cast('a:f:g', ...), cast('a:n:m', ...)

  • on('a:b:*' , callback) can subscribe to cast('a:b:c', ...), cast('a:b:d', ...), but not cast('a:b', ...)

  • on('a:b:**', callback) can subscribe to cast('a:b:c',. ..)

  • on('*:b:*' , callback) can subscribe to cast('a:b:c', ...)

  • on('a:*:*' , callback) can subscribe to cast('a:b:c', ...)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].