RxJS in AngularJS Services - angularjs

Question

I'm learning RxJS and am trying to implement it in one of my existing applications. First thing I am trying to do is remove rootscope.broadcast/emit methods and replace them with BehaviorSubjects. This has worked fine if those events are subscribed to inside a controller. However, if I try to subscribe to those events in a service, they never fire. I can move the exact same subscription into a component/controller/etc and it works fine.
Is there a reason for this or should I be able to do this and I am just doing something wrong?
UPDATE 1
I have an event service that maintains events run at the top of the application like so:
(function () {
"use strict";
angular.module("app.common").service("eventService", EventService);
function EventService($window) {
"ngInject";
var defaultBehaviorSubjectValue = null;
var service = {
activate: activate,
onLogin: new Rx.BehaviorSubject(defaultBehaviorSubjectValue), //onnext by authService.login
onLogout: new Rx.BehaviorSubject(defaultBehaviorSubjectValue), //onnext by authService.logout
isOnline: new Rx.BehaviorSubject(defaultBehaviorSubjectValue) //onnext by authService.logout
};
return service;
function activate() {
service.onLogin.subscribe(function (userData) {
console.info("user logged in");
});
service.onLogout.subscribe(function (userData) {
console.info("Logging user out");
dispose();
});
$window.addEventListener("offline", function () {
console.info("Lost internet connection, going offline");
service.isOnline.onNext(false);
}, false);
$window.addEventListener("online", function () {
console.info("Regained internet connection, going online");
service.isOnline.onNext(true);
}, false);
}
function dispose() {
angular.forEach(service, function (event, index) {
if (service && service[event] && service[event].isDisposed === false) {
service[event]();
}
});
}
}
})();
I have a service that is waiting for that onLogin event to fire. The code is simliar to:
(function () {
angular.module("app.data").service("offlineProjectDataService", OfflineProjectDataService);
function OfflineProjectDataService(definitions, metaDataService, userService, eventService) {
"ngInject";
var onLoginSubscription = eventService.onLogin.subscribe(function (isLoaded) {
if (isLoaded) {
activate();
}
});
var service = {
activate: activate
}
return service;
function activate(){
//..some stuff
}
}
})();
The problem I'm having is that the onLogin event is not firing so my activate method is not being called. If I move that exact same subscription line to some other controller in my app, it DOES fire. So I don't think there is anything wrong with syntax.
Unless of course I'm missing something here that is probably painfully obvious to somebody.

Answer 1

Use RxJS in a Service
Build a service with RxJS Extensions for Angular.
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>
var app = angular.module('myApp', ['rx']);
app.factory("DataService", function(rx) {
var subject = new rx.Subject();
var data = "Initial";
return {
set: function set(d){
data = d;
subject.onNext(d);
},
get: function get() {
return data;
},
subscribe: function (o) {
return subject.subscribe(o);
}
};
});
Then simply subscribe to the changes.
app.controller('displayCtrl', function(DataService) {
var $ctrl = this;
$ctrl.data = DataService.get();
var subscription = DataService.subscribe(function onNext(d) {
$ctrl.data = d;
});
this.$onDestroy = function() {
subscription.dispose();
};
});
Clients can subscribe to changes with DataService.subscribe and producers can push changes with DataService.set.
The DEMO on PLNKR.