Swim AngularJS

The Swim AngularJS library makes it super easy to build AngularJS apps that link to ultra responsive Swim services running in the cloud. Check out SwimJS to learn more about building highly scalable, realtime services with Swim.

Services

$swim service

The $swim angular service exposes the full Swim JavaScript client API, and automatically invokes $scope.$apply during Swim callbacks to ensure that UI changes take effect.

var myApp = angular.module('MyApp', ['swim']);
 
myApp.controller('Test', ['$scope', '$swim', function ($scope, $swim) {
  $scope.messages = [];
  $swim.downlink()
    .node('ws://swim.example.com/chat/public')
    .lane('chat/room')
    .onEvent(function (message) { // automatically called with $scope.$apply
      $scope.messages.push(message.body);
    })
    .sync();
}]);

Directives

swimNode

Binds a Swim service URI to the current scope.

<div swim-node="expression"></div>

swimLane

Binds a Swim lane URI to the current scope.

<div swim-lane="expression"></div>

swimPrio

Binds a Swim link priority to the current scope.

<div swim-prio="expression"></div>

swimList

Creates a ListDownlink, and binds its state to a variable in the current scope. The underlying ListDownlink is bound to $scope.$downlink.

<div swim-list="items" swim-node="'ws://swim.example.com/todo/grocery'" swim-lane="'todo/list'">
  <ul>
    <li ng-repeat="item in items">{{item.description}}</li>
  </ul>
</div>

swimMap

Creates a MapDownlink, and binds its state to a variable in the current scope. The underlying MapDownlink is bound to $scope.$downlink.

<div swim-list="items" swim-node="'ws://swim.example.com/chat/public'" swim-lane="'chat/users'">
  <ul>
    <li ng-repeat="user in users">{{user}}</li>
  </ul>
</div>