Angular2で利用されているRxJSですが、もちろんAngular1でも利用可能です。「rx.angular.js」というのがあります。
RxJSをあまり触っていないので、リポジトリにあるサンプルをささっと見てみる。
モジュールのインストール
ルータや$resourceなど通常利用するモジュールを登録します。
npm install angular@1.5.0 --save npm install angular-resource@1.5.0 --save npm install bootstrap@3.3.6 --save npm install jquery@2.1.4 --save npm install ngcomponentrouter@1.4.1 --save
Rxをインストール。rx-angularでRxJSとRxJS用のディレクティブがダウンロードされます。
npm install rx-angular --save
HTMLにパスを設定する
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/ngcomponentrouter/angular_1_router.js"></script> <script src="node_modules/angular-resource/angular-resource.min.js"></script> <script src="node_modules/rx/dist/rx.all.js"></script> <script src="node_modules/rx-angular/dist/rx.angular.js"></script>
サンプルコード
wikipediaからリストを取るサンプルです。コンポーネントをrx
とする
components/rx/rx.html components/rx/rx.js
各ファイルの中身はこちら
(components/rx/rx.html)
<h2>Reactive Angular - Wikipedia Example</h2> <input type="text" ng-model="$ctrl.search"> <button ng-click="$ctrl.submit($ctrl.search)">Search</button> <ul> <li ng-repeat="result in $ctrl.results"> {{ result }} </li> </ul>
(components/rx/rx.js)
/* global angular */ (function () { 'use strict'; angular .module('TodoApp.components.rx', ['rx']) .component('rx', { controller: Controller, templateUrl: 'components/rx/rx.html' }); Controller.$inject = ['$rootScope', '$http', 'rx']; function Controller($rootScope, $http, rx) { console.log('Todo detail Controller Constructor'); ctrl = this; ctrl.$rootScope = $rootScope; ctrl.$http = $http; ctrl.rx = rx; ctrl.search = ''; ctrl.results = []; } var ctrl; Controller.prototype.$onInit = function() { console.log('onInit()'); ctrl.rx.createObservableFunction(ctrl, 'submit') .map(term => term) .flatMapLatest(searchWikipedia) .subscribe(results => {ctrl.$rootScope.$apply(ctrl.results = results);}); } function searchWikipedia (term) { var deferred = ctrl.$http({ url: "http://en.wikipedia.org/w/api.php?&callback=JSON_CALLBACK", method: "jsonp", params: { action: "opensearch", search: term, format: "json" } }); return ctrl.rx.Observable .fromPromise(deferred) .map(response => response.data[1]); } })();
RxJSのサイトにあるサンプルでは$apply
が無いのでワンテンポ遅れてUIに反映される。
完成されたコードはgithubを見て下さい。
最後に
Angular2でも利用されているRxJSではあるがAngular1でも普通に利用できます。ECMAScriptの方向性とか考えるとこうした書き方にしていくべきなんでしょうね(まだ慣れませんが)。