RxJS并与Angular 1一起使用

Question

我正在研究Angular 1.5应用程序与RxJS之间的集成.我正在考虑直接使用RxJs,但后来发现了以下内容,虽然它已经过几个月没有更新了.

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

推荐哪种方式？订阅时还应该在哪里进行？在控制器？还是在服务方面？

有没有人有更多的信息？我真的想将我的Angular应用程序与RxJs集成,但我发现很难找到具体的文档或指南.

Answer 1

我整理了一个小型 JSFiddle，演示了RxJS-Angular Extensions Project的修改示例。编辑我的第一个示例与点击事件资源中的示例非常相似。我使示例变得更复杂一些，它的示例使用主题来发布和订阅由返回承诺的工厂处理/修改的数据。

版本说明：自 2017 年 9 月 28 日起，Rx-Angular 仅支持 RxJS 版本 4。RxJS 是 RxAngular 的依赖项，因此请小心，否则您将遇到无法解决的错误。

简而言之，我的答案是使用 Rx-Angular 扩展库。部分原因是 RxJS 是 Angular-RX 的依赖项，所以无论如何你都会拥有它并且可以同时使用两者。而且还因为它允许进行一些有用的简单 Observable 制作，例如事件或“$watches”。

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

超文本标记语言

<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" 

      })

当然，您可以在 Angular 中执行纯 RxJS，但如果您真的愿意，也可以在 Angular 应用程序中主要编写 jQuery。只要加载了所有库，您就可以在 Angular 中运行 JavaScript。不过，我认为使用 Angular 扩展是最佳实践，也是面向未来的明智选择，您也可以期望它支持 Angular 和 RxJS 更改。更不用说，他们花时间编写了一堆经过测试的帮助器和构造函数方法，您不必自己编写 - 例如将 $scope 变量上的 $watch 映射/链接到 Observable。

资源

这里有一些有关 Rx-Angular 的更多资源。例如，您可以使用 3 种有用的方法在 Angular 内部创建 Observables。它们基本上是 RX Observables 有用的构造方法（所以你不必编写自己的！）：

1. $toObservable $toObservable - $scope 变量
2. $eventToObservable $eventToObservable - $事件
3. $createObservableFunction $createObservableFunction - 将范围内的函数绑定到 Observable，例如 ngClick
4. 在 RxJS主题 AS-A 服务中使用主题