Skip to content

Commit 5e9fdca

Browse files
Updating readme and version bump
1 parent 95f7313 commit 5e9fdca

File tree

5 files changed

+171
-26
lines changed

5 files changed

+171
-26
lines changed

bower.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "rx-angular",
3-
"version": "0.0.2",
4-
"main": "rx.dom.js",
3+
"version": "0.0.3",
4+
"main": "rx.angular.js",
55
"dependencies": {
66
"rxjs": "*"
77
},

docs/readme.md

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# rx.angular.js <sup>v0.0.1</sup>
1+
# rx.angular.js <sup>v0.0.3</sup>
22

33
Reactive Extensions (Rx) is a library for composing asynchronous and event-based programs using observable sequences and Array#extras style operators.
44

@@ -16,6 +16,85 @@ Factories:
1616
- [`rx`](#rx)
1717
- [`observeOnScope`](#observeonscopescope-watchexpression-objectequality)
1818

19+
Observable Methods:
20+
- [`safeApply`](#safeapplyscope-fn)
21+
22+
[`$rootScope`](http://docs.angularjs.org/api/ng.$rootScope) Methods:
23+
- [`$createObservableFunction`](#createobservablefunctionfunctionname-listener)
24+
- ['$toObservable'](#toobservablewatchexpression-objectequality)
25+
26+
* * *
27+
28+
### <a id="rx"></a>`rx`
29+
<a href="#rx">#</a> [&#x24C8;](https://github.com/Reactive-Extensions/rx.angular.js/blob/master/src/factory.js#L1-L6 "View in source")
30+
31+
Creates a factory for using RxJS.
32+
33+
#### Returns
34+
*(Rx)*: The root of RxJS
35+
36+
#### Example
37+
```js
38+
angular.module('example', ['rx'])
39+
.controller('AppCtrl', function($scope, rx) {
40+
41+
$scope.counter = 0;
42+
43+
rx.Observable.interval(1000)
44+
.safeApply(
45+
$scope,
46+
function (x) {
47+
$scope.counter = x;
48+
})
49+
.subscribe();
50+
51+
});
52+
```
53+
54+
### Location
55+
56+
File:
57+
- /src/factory.js
58+
59+
Dist:
60+
- rx.angular.js
61+
1962
* * *
2063

21-
# TBD
64+
### <a id="observeonscopescope-watchexpression-objectequality"></a>`observeOnScope(scope, watchExpression, [objectEquality])`
65+
<a href="#observeonscopescope-watchexpression-objectequality">#</a> [&#x24C8;](https://github.com/Reactive-Extensions/rx.angular.js/blob/master/src/observeronscope.js#L1-L13 "View in source")
66+
67+
Creates a factory which allows the user to observe a property on a given scope to check for old and new values.
68+
69+
#### Arguments
70+
1. `scope` *(Scope)*: The scope to apply the watch function.
71+
2. `watchExpression`: Expression that is evaluated on each `$digest` cycle. A change in the return value triggers a call to the listener.
72+
- `string`: Evaluated as expression
73+
- `function(scope)`: called with current scope as a parameter.
74+
3. `[objectEquality]`: *(Function)*: Compare object for equality rather than for reference.
75+
76+
#### Returns
77+
*(Rx)*: The root of RxJS
78+
79+
#### Example
80+
```js
81+
angular.module('observeOnScopeApp', ['rx'])
82+
.controller('AppCtrl', function($scope, observeOnScope) {
83+
84+
observeOnScope($scope, 'name').subscribe(function(change) {
85+
$scope.observedChange = change;
86+
$scope.newValue = change.newValue;
87+
$scope.oldValue = change.oldValue;
88+
});
89+
});
90+
```
91+
92+
### Location
93+
94+
File:
95+
- /src/observeronscope.js
96+
97+
Dist:
98+
- rx.angular.js
99+
100+
* * *

nuget/RxJS-Bridges-Angular/RxJS-Bridges-Angular.nuspec

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<id>RxJS-Bridges-Angular</id>
55
<title>Reactive Extensions for JavaScript - Bridges to AngularJS</title>
66
<!-- Automatically updated by build, keeping fixed dev build number here in case of local build -->
7-
<version>0.0.2</version>
7+
<version>0.0.3</version>
88
<authors>MS Open Tech</authors>
99
<description>This project provides Reactive Extensions for JavaScript (RxJS) bindings for AngularJS.</description>
1010
<projectUrl>https://github.com/Reactive-Extensions/rx.angular.js</projectUrl>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "rx-angular",
33
"title": "The Reactive Extensions Bindings for the AngularJS.",
44
"description": "Library for bridging between RxJS and AngularJS.",
5-
"version": "0.0.2",
5+
"version": "0.0.3",
66
"homepage": "https://github.com/Reactive-Extensions/rx.angular.js",
77
"author": {
88
"name": "MS Open Tech"

readme.md

Lines changed: 86 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,79 @@ This library serves as a bridge between the [Reactive Extensions for JavaScript
55
With this library, you will be able to do such things as easily watch values as they change, as observable sequences such as:
66

77
```js
8-
angular.module('observeOnScopeApp', ['rx'])
9-
.controller('AppCtrl', function($scope, observeOnScope) {
10-
11-
// Listen for changes on the name
12-
observeOnScope($scope, 'name').subscribe(function(change) {
13-
$scope.observedChange = change;
14-
$scope.newValue = change.newValue;
15-
$scope.oldValue = change.oldValue;
16-
});
17-
});
8+
angular.module('example', ['rx'])
9+
.controller('AppCtrl', function($scope, observeOnScope) {
10+
11+
// Listen for changes on the name
12+
observeOnScope($scope, 'name').subscribe(function(change) {
13+
$scope.observedChange = change;
14+
$scope.newValue = change.newValue;
15+
$scope.oldValue = change.oldValue;
16+
});
17+
});
1818
```
1919

2020
And with your HTML markup you can use it like this:
2121

22-
<div class="container" ng-app="observeOnScopeApp" ng-controller="AppCtrl">
23-
<h2>Reactive Angular</h2>
24-
<ul class="list-unstyled">
25-
<li>observedChange {{observedChange}}</li>
26-
<li>newValue: {{newValue}</li>
27-
<li>oldValue: {{oldValue}}</li>
28-
</ul>
29-
30-
<input type="text" ng-model="name" />
31-
</div>
22+
<div class="container" ng-app="example" ng-controller="AppCtrl">
23+
<h2>Reactive Angular</h2>
24+
<ul class="list-unstyled">
25+
<li>observedChange {{observedChange}}</li>
26+
<li>newValue: {{newValue}</li>
27+
<li>oldValue: {{oldValue}}</li>
28+
</ul>
29+
30+
<input type="text" ng-model="name" />
31+
</div>
32+
33+
Another example is where we can create an Observable sequence from such things ng-click expressions where we can search Wikipedia:
34+
35+
```js
36+
angular.module('example', ['rx'])
37+
.controller('AppCtrl', function($scope, $http, rx) {
38+
39+
function searchWikipedia (term) {
40+
var deferred = $http({
41+
url: "http://en.wikipedia.org/w/api.php?&callback=JSON_CALLBACK",
42+
method: "jsonp",
43+
params: {
44+
action: "opensearch",
45+
search: term,
46+
format: "json"
47+
}
48+
});
49+
50+
return rx.Observable
51+
.fromPromise(deferred)
52+
.map(function(response){ return response.data[1]; });
53+
}
54+
55+
$scope.search = '';
56+
$scope.results = [];
57+
58+
/*
59+
Creates a "click" function which is an observable sequence instead of just a function.
60+
*/
61+
$scope.$createObservableFunction('click')
62+
.map(function () { return $scope.search; })
63+
.flatMapLatest(searchWikipedia)
64+
.subscribe(function(results) {
65+
$scope.results = results;
66+
});
67+
});
68+
```
69+
70+
And the HTML markup you can simply just use a ng-click directive much as you have before, but now it is an Observable sequence.
71+
72+
<div class="container" ng-app="example" ng-controller="AppCtrl">
73+
74+
<input type="text" ng-model="search">
75+
<button ng-click="click()">Search</button>
76+
77+
<ul>
78+
<li ng-repeat="result in results">{{result}}</li>
79+
</ul>
80+
</div>
3281

3382
This only scratches the surface of what is possible when you combine the two libraries together.
3483

@@ -45,6 +94,23 @@ There are a number of ways to get started with RxJS.
4594
git clone https://github.com/Reactive-Extensions/rx.angular.js.git
4695
cd ./rx.angular.js
4796

97+
### Installing with [NPM](https://npmjs.org/)
98+
99+
npm install rx-angular
100+
npm install -g rx-angular
101+
102+
### Installing with [Bower](http://bower.io/)
103+
104+
bower install rx-angular
105+
106+
### Installing with [Jam](http://jamjs.org/)
107+
108+
jam install rx-angular
109+
110+
### Installing All of RxJS via [NuGet](http://nuget.org/)
111+
112+
Install-Package RxJS-Bridges-Angular
113+
48114
## Contributing ##
49115

50116
There are lots of ways to [contribute](https://github.com/Reactive-Extensions/rx.angular.js/wiki/Contributions) to the project, and we appreciate our [contributors](https://github.com/Reactive-Extensions/rx.angular.js/wiki/Contributors).

0 commit comments

Comments
 (0)