https://github.com/strongloop/angular-live-set
Build realtime angular apps with html5's Server Sent Events
https://github.com/strongloop/angular-live-set
Last synced: 3 months ago
JSON representation
Build realtime angular apps with html5's Server Sent Events
- Host: GitHub
- URL: https://github.com/strongloop/angular-live-set
- Owner: strongloop
- License: other
- Created: 2015-06-22T20:37:26.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-02-10T16:41:27.000Z (almost 6 years ago)
- Last Synced: 2025-04-07T01:05:14.960Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 884 KB
- Stars: 101
- Watchers: 32
- Forks: 17
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# Angular Live Set
Display changes as they are made to a collection of objects.
[**View the examples**](https://github.com/strongloop/angular-live-set-example)
## Requirements
- AngularJS
- `ChangeStream` server (eg. LoopBack)
## Use
Install Angular Live Set with [Bower](http://bower.io/):
```sh
bower install angular-live-set
```
This will copy the `angular-live-set` files into a `bower_components` folder, along with its dependencies. Load the script files in your application:
```html
```
Add the module to your dependencies:
```javascript
angular.module('myApp', ['ls.LiveSet', 'ls.ChangeStream'])
```
## Concurrency
`Change` streams are applied in order. This means the set can only be modified synchronously. The last change wins.
## API
### LiveSet(data, changes, options)
A `LiveSet` applies a `ChangeStream`, or a continuous stream of changes, to an array of objects. The set itself is **read only** and can only be modified by sending a change through the change stream.
**Note:** Updates to the `LiveSet` will trigger a `$rootScope.$apply()`.
**data**
An `Array` of initial data.
**changes**
A `ChangeStream` to be applied continuously to the set.
**options**
Customize the `LiveSet`.
**options.id**
A `String` defining the **id** property for objects in the set. Default: `'id'`.
**Example**
```js
// objects in the set must include some identifying property (customizable)
var data = [{id: 1, val: 'foo'}, {id: 2, val: 'bar'}];
var src = new EventSource('/changes');
var changes = createChangeStream(src);
var set = new LiveSet(data, changes);
// bind to the set from a template
// like you would an array
// note: the data in the array will be updated
// changes come in (from the ChangeStream)
$scope.values = set.toLiveArray();
```
### ChangeStream(eventSource)
```js
function MyController($scope, createChangeStream) {
// create a change stream
var changes = createChangeStream();
}
```
**eventSource**
An `EventSource` emitting the following events:
- `data` - contains a `Change` object
- `error` - contains an `Error` object
- `end` - the stream has ended on the server
A continuous stream of `Change` objects. Each `Change` represents a modification to an object. Changes are applied to a set in the order they flow in the stream.
### Change
A chunk in a `ChangeStream`.
**change.target**
This change applies to an object with this identifier.
**change.type**
- `create`
- `update`
- `remove`
**change.data**
- `create` - the entire object
- `update` - the entire object
- `remove` - `null`
**change.optimistic**
`true` when a change is likely to be made, but has not completed.
**Only supported for changes of type `update` and `remove`.**
A change has not been made to an object, but it has a very high likelyhood of being made. For example, a user modifies data locally and sends it to a server. This change
has not actually been made to the definitave state on the server. Unless
something unexpected happens, the change will be made and sent through a `ChangeStream`.
In cases like this, it is appropriate to send an "optimistic" change that will be
immediately applied. These changes should be reverted after a specified period unless
another (non-optmisitic) change with the same target is written to the `ChangeStream`.
### Error
**error.message**
An error message.
**error.status**
An HTTP-like status code.