Reactive Extensions (Rx) is a library for composing asynchronous and event-based programs using observable sequences and Array#extras style operators.
Data sequences can take many forms, such as a stream of data from a file or web service, web services requests, system notifications, or a series of events such as user input.
Reactive Extensions represents all these data sequences as observable sequences. An application can subscribe to these observable sequences to receive asynchronous notifications as new data arrive.
This library provides bridges to the popular Angular JS library.
This section contains the reference documentation for the Reactive Extensions for AngularJS library.
Factories:
Observable Methods:
$rootScope Methods:
Creates a factory for using RxJS.
(Rx): The root of RxJS.
angular.module('rxexamples', ['rx'])
.controller('AppCtrl', function($scope, rx) {
$scope.counter = 0;
rx.Observable.interval(1000)
.safeApply(
$scope,
function (x) { $scope.counter = x; })
.subscribe();
});File:
Dist:
Prerequisites:
NPM Packages:
Bower Packages:
angular-rx
NuGet Packages:
Unit Tests:
Creates a factory which allows the user to observe a property on a given scope to check for old and new values.
scope(Scope): The scope to apply the watch function.watchExpression: Expression that is evaluated on each$digestcycle. A change in the return value triggers a call to the listener.string: Evaluated as expressionfunction(scope): called with current scope as a parameter.
[objectEquality]: (boolean): Compare object for equality rather than for reference.
(Rx): The root of RxJS
angular.module('rxexamples', ['rx'])
.controller('AppCtrl', function($scope, observeOnScope) {
observeOnScope($scope, 'name').subscribe(function(change) {
$scope.observedChange = change;
$scope.newValue = change.newValue;
$scope.oldValue = change.oldValue;
});
});File:
Dist:
Prerequisites:
NPM Packages:
Bower Packages:
angular-rx
NuGet Packages:
Unit Tests:
Ensures a Scope.$digest() is scheduled to be called after the given side-effect function is run. This is equivalent to a .do() operator that automatically wraps its function in a Scope.$apply() if an apply is not already in progress.
scope($rootScope.Scope): The scope to apply theonNextfunction with.[onNext](Function): Function to invoke for each element in the observable sequence.
(Observable): The source sequence with the side-effecting behavior applied.
angular.module('rxexamples', ['rx'])
.controller('AppCtrl', function($scope, rx) {
$scope.counter = 0;
rx.Observable.interval(1000)
.safeApply(
$scope,
function (x) { $scope.counter = x; })
.subscribe();
});File:
Dist:
Prerequisites:
NPM Packages:
Bower Packages:
angular-rx
NuGet Packages:
Unit Tests:
Ensures a Scope.$digest() is scheduled to be called after each element in the observable sequence is assigned to the given assignable expression / scope property. This is equivalent to a .safeApply() call that assigns to a scope or controller property.
scope($rootScope.Scope): A scope to use as the context of the assignable expression.prop(String): An assignable expression, e.g. a scope property name.
(Observable): The source sequence with the side-effecting behavior applied.
angular.module('rxexamples', ['rx'])
.controller('AppCtrl', function($scope, rx) {
$scope.counter = 0;
rx.Observable.interval(1000)
.digest(
$scope,
'counter'
).subscribe();
});File:
Dist:
Prerequisites:
NPM Packages:
Bower Packages:
angular-rx
NuGet Packages:
Unit Tests:
Creates an observable from a given function.
functionName: (String): A function name to observe.[listener]: (Function): A listener function that gets executed.
(Rx): A new Observable object with the watch expression in place.
angular.module('rxexamples', ['rx'])
.controller('AppCtrl', function($scope) {
$scope.$createObservableFunction('clickMe')
.subscribe(function (name) {
console.log(name);
});
$scope.$apply(function () {
$scope.clickMe('RxJS');
});
// => RxJSFile:
Dist:
Prerequisites:
NPM Packages:
Bower Packages:
angular-rx
NuGet Packages:
Unit Tests:
Digests the specified observables when they produce new values. The scope variable / assignable expression specified by the observable's key is set to the new value.
obj: (Object): A map where keys are scope properties (assignable expressions) and values are observables.
(Observable): Observable of change objects.
angular.module('rxexamples', ['rx'])
.controller('AppCtrl', function($scope) {
$scope.property1 = null;
// Assume we're using ng-controller="AppCtrl as ctrl" in the template.
this.property2 = null;
var observables = {
property1: Rx.Observable.interval(500)
.map(function(val) { return val + 1; }),
'ctrl.property2': Rx.Observable.interval(1000)
.map(function(val) { return val + 1; })
};
$scope.$digestObservables(observables)
.subscribe(function (change) {
if (change.observable === observables.property1) {
console.log('Next %s: %s, %s', change.expression, $scope.property1, change.value);
} else if (change.observable === observables['ctrl.property2']) {
console.log('Next %s: %s, %s', change.expression, this.property2, change.value);
}
}.bind(this));
// => Next property1: 1, 1
// => Next ctrl.property2: 1, 1
// => Next property1: 2, 2
// => Next property1: 3, 3
// => Next ctrl.property2: 2, 2
// ...File:
Dist:
Prerequisites:
NPM Packages:
Bower Packages:
angular-rx
NuGet Packages:
Unit Tests:
Creates an Observable from an event which is fired on the local $scope. Expects an event name as the only input parameter.
eventName: The event name to listen to.
(Rx): A new Observable object with the watch for the event name.
angular.module('rxexamples', ['rx'])
.controller('AppCtrl', function($scope) {
$scope.$eventToObservable('nameChanged')
.subscribe(function (data) {
console.log('Event name %s', data.event.name);
console.log('Additional arguments %s', data.additionalArguments);
});
$scope.$emit('nameChanged', 'foo', 'bar');
// => Event name nameChanged
// => Additional arguments foo, barFile:
Dist:
Prerequisites:
NPM Packages:
Bower Packages:
angular-rx
NuGet Packages:
Unit Tests:
Creates an observable from a watch expression.
watchExpression: Expression that is evaluated on each$digestcycle. A change in the return value triggers a call to the listener.string: Evaluated as expressionfunction(scope): called with current scope as a parameter.
[objectEquality]: (boolean): Compare object for equality rather than for reference.
(Rx): A new Observable object with the watch expression in place.
angular.module('rxexamples', ['rx'])
.controller('AppCtrl', function($scope) {
$scope.$toObservable('name')
.subscribe(function (name) {
console.log(name);
});
$scope.$apply(function () {
$scope.name = 'RxJS';
});
// => RxJSFile:
Dist:
Prerequisites:
NPM Packages:
Bower Packages:
angular-rx
NuGet Packages:
Unit Tests: