Angular-live-set | Module to build realtime angular apps

angular-live-set module


Stars : 10

Forks : 10

Created by StrongLoop, Inc.

bower install angular-live-set

Demo Download GitHub

Angular Live Set

Display changes as they are made to a collection of objects.

View the examples


  • AngularJS
  • ChangeStream server (eg. LoopBack)


Install Angular Live Set with Bower:

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:

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-live-set/angular-live-set.js"></script>

Add the module to your dependencies:

angular.module('myApp', ['ls.LiveSet', 'ls.ChangeStream'])


Change streams are applied in order. This means the set can only be modified synchronously. The last change wins.


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().


An Array of initial data.


A ChangeStream to be applied continuously to the set.


Customize the LiveSet.

A String defining the id property for objects in the set. Default: 'id'.


// 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();


function MyController($scope, createChangeStream) {
  // create a change stream
  var changes = createChangeStream();


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.


A chunk in a ChangeStream.

This change applies to an object with this identifier.


  • create
  • update
  • remove

  • create - the entire object
  • update - the entire object
  • remove - null


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.



An error message.


An HTTP-like status code.


Javascript plugin