angularjs - RxJS 并与 Angular 1 一起使用

Question

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

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

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

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

Answer 1

我把一个小的 JSFiddle 放在一起，展示了来自 RxJS-Angular Extensions Project 的一个修改过的例子。 . 编辑 我的第一个示例与点击事件资源中的示例非常相似。我让这个例子变得更复杂一些，它使用一个 Subject 来发布和订阅由返回 promise 的工厂处理/修改的数据的例子。

版本说明: 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>

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 扩展主要是最佳实践和 future 智能，您也可以期望它支持 Angular 和 RxJS 更改。更不用说，他们花时间编写了一堆经过测试的帮助器和构造器方法，您不必为自己编写——例如将 $scope 变量上的 $watch 映射/链接到 Observable。

资源

这是 Rx-Angular 的更多资源。例如，您可以使用 3 种有用的方法在 Angular 中创建 Observable。它们基本上是 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