RxJS and using with Angular 1

Question

I am working on an integration between Angular 1.5 app with RxJS. I was thinking of using RxJs directly but then I found the following although its not been updated for a few months.

https://github.com/Reactive-Extensions/rx.angular.js

Which is the recommended way ? Also when subscribing where should this be done ? In the controller? Or in services ?

Does anyone have any more information? I would really like to integration my Angular app with RxJs but I am finding it difficult to find concrete documentation or guides.

Answer 1

I put together a small JSFiddle demonstrating a modified example from the RxJS-Angular Extensions Project. EDIT My first example was very similar to the one in the resources for click events. I've made the example a little more complex, and it examples using a Subject to publish and subscribe to data that is handled/modified by a factory that returns a promise.

Versions note: Rx-Angular, as of 09.28.2017, only supports RxJS version 4. RxJS is a dependency to RxAngular, so be careful or you'll run into errors you cannot resolve.

In short, though, my answer is to use the Rx-Angular extensions library. Partly because RxJS is a dependency for Angular-RX, so you'll have it anyway and can use both. But also because it allows for some simple Observable crafting that can be useful, like for events or "$watches".

https://jsfiddle.net/ejmLpyrn/3/

HTML

<div ng-app="myApp" ng-controller="appCtrl">
    <!-- RxJS v4.1.0, RxAngular v1.5-->
    <div class="jumbotron">
      <div class="form-group">
        <input type="text" ng-model="query" />
        <button type="button" ng-click="clickFunction()">
            Search
        </button>
      </div>
    </div>

    <hr>
    <div>{{message}}</div>

</div>

JS

angular.module('myApp', ['rx'])
    .factory('subjectProxyService', function () {
        var subjectProxyService = {};
        var subject = new Rx.Subject();

        subjectProxyService.subject = function () {
            return subject;
        }

        return subjectProxyService;
    })
    .factory('appFactory', function(rx) {
        function addContextToMessage(query) {
            var deferred = $.Deferred();

            var timestamp = moment().format("YYYY-MM-DD");
            var _msg = "[" + timestamp + "]" + query;
            deferred.resolve(_msg);

            return rx.Observable
              .fromPromise(deferred.promise())
              .map(function(contextMsg) { 
                return contextMsg;
              });
        }

        return {
            addContextToMessage: addContextToMessage
        };
    })
    .controller('appCtrl', function($scope, rx, appFactory, subjectProxyService) {

        $scope.query = "";
        $scope.message = "";

        subjectProxyService.subject().subscribe(
           function (x) { console.log('Value published to observer: ' + x); },
           function (e) { console.log('onError: ' + e.message); },
           function () { console.log('onCompleted'); 
        });


        $scope.$createObservableFunction('clickFunction')
          .map(function () {
            return $scope.query;
          })
          .flatMapLatest(appFactory.addContextToMessage)
          .map(function(results) {
            return results;
          })
          .subscribe(subjectProxyService.subject());
          // give the service-subject as the subscriber to the "click stream" 

      })

You can do pure RxJS inside of Angular for sure, but you can also write mostly jQuery inside your Angular app if you really wanted. So long as all the libraries are loaded you're just running JavaScript inside of Angular. I would consider it mostly best practice and also future-smart to use the Angular extensions, though, which you can also expect to support Angular and RxJS changes. Not to mention, they've taken the time to write a bunch of tested helper and constructor methods you don't have to write for yourself -- like mapping/linking a $watch on a $scope variable to an Observable.

---

Resources

Here's some more resources for Rx-Angular. There are for instance 3 helpful methods that you can use to create Observables inside of Angular. They're basically helpful constructor methods for RX Observables (so you don't have to write your own!):

1. $toObservable $toObservable - $scope variables
2. $eventToObservable $eventToObservable - $events
3. $createObservableFunction $createObservableFunction - binding functions in scope to an Observable, like ngClick
4. Using Subjects in RxJS Subjects AS-A Service