angularjs – RxJS并与Angular 1一起使用

我整理了一个小型的JSFiddle来演示 RxJS-Angular Extensions Project的修改示例.编辑我的第一个例子非常类似于点击事件资源中的例子.我让这个例子变得更复杂,并且使用Subject发布和订阅由返回promise的工厂处理/修改的数据的示例.

版本说明：Rx-Angular,截至09.28.2017,仅支持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扩展,但您也可以期望支持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