RxJS 并与 Angular 1 一起使用答案

【问题标题】：RxJS and using with Angular 1RxJS 并与 Angular 1 一起使用
【发布时间】：2016-06-04 11:44:47
【问题描述】：

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

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

推荐的方法是什么？另外在订阅时应该在哪里完成？在控制器中？还是在服务中？

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

【问题讨论】：

对用例的解释会改善这个问题，在目前的状态下它太宽泛了。如果观察到的是 $scope，那么它肯定是在控制器中完成的。官方 repo 没有教程，但有示例和详尽的 API 文档。
好的。更具体地说，我会更好地使用 rxjs 的角度扩展还是直接使用 rxjs？
我猜，这也取决于您的用例。检查有多少this 适合您。请注意，它是still on its way to support RxJS 5。

标签： angularjs reactive-programming rxjs

【解决方案1】：

我整理了一个小的 JSFiddle，展示了来自 RxJS-Angular Extensions Project 的修改示例。编辑我的第一个示例与点击事件资源中的示例非常相似。我让这个例子稍微复杂了一点，它使用 Subject 来发布和订阅由返回承诺的工厂处理/修改的数据。

版本说明： Rx-Angular，截至 2017 年 9 月 28 日，仅支持 RxJS 版本 4。RxJS 是 RxAngular 的依赖项，所以要小心，否则会遇到无法解决的错误。

不过，简而言之，我的答案是使用 Rx-Angular 扩展库。部分原因是 RxJS 是 Angular-RX 的依赖项，所以无论如何你都会拥有它并且可以同时使用它们。但也因为它允许进行一些有用的简单 Observable 制作，例如事件或“$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>

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 的有用构造方法（所以你不必自己编写！）：

$toObservable $toObservable - $scope variables
$eventToObservable $eventToObservable - $events
$createObservableFunction $createObservableFunction - binding functions in scope to an Observable, like ngClick
在 RxJS 中使用主题 Subjects AS-A Service

【讨论】：