❤
npm
Sign UpSign In

angularjs-shoe

0.0.1 • Public • Published

angularjs-shoe

An angularjs module that enables you to use shoe websocket streaming in the browser with angularjs.

This module wraps the shoe library so that any $scope mutations are correctly wrapped with $rootScope.$apply calls so model changes are instantly reflected in the view.

Installation

npm

If you're using browserify then install via npm:

$ npm install angularjs-shoe

and require angularjs-shoe in your browserify code:

require('angularjs-shoe');

bower

If you're using bower then install using the bower command line:

$ bower install angularjs-shoe

Old school

If you just want to use the client library without a package manager then simply include the build/angularjs-bower.js or build/angularjs-bower.min.js file into your HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- AngularJS needs to be included before -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
    <!-- Then you can include the angularjs-shoe module from your project -->
    <script type="text/javascript" src="/scripts/angularjs-bower.min.js"></script> 
 
    <!-- Then your regular angular code -->
    <script type="text/javascript" src="/scripts/client.js"></script> 
  </body>
</html>

Using angularjs-shoe from your AngularJS controllers

To use shoe from your controllers you simply define eugeneware.shoe as a module dependency for your app and then you can use dependency injection to refer to the shoe or reconnect variables:

// client.js
var app = angular.module('MyApp', ['eugeneware.shoe']);
 
app.controller('MyCtrl', function ($scope, shoe) {
  $scope.items = [];
 
  var stream = shoe('/invert');
  stream.on('data', function (msg) {
    // you can mutate your $scope here and it will automatically be wrapped in
    // a $rootScope.$apply:
    $scope.items.push(msg);
  });
});

If you want to use shoe and have it automatically reconnect to the websocket server when there is a network disconnection then use the reconnect function:

// client.js
var app = angular.module('MyApp', ['eugeneware.shoe']);
 
app.controller('MyCtrl', function ($scope, reconnect) {
  $scope.items = [];
 
  reconnect(function (stream) {
    stream.on('data', function (msg) {
      // you can mutate your $scope here and it will automatically be wrapped in
      // a $rootScope.$apply:
      $scope.items.push(msg);
    });
  })
  .connect('/invert');
});

Notes

The browser files build/angularjs-shoe.js and build/angularjs-shoe.min.js already have shoe and reconnect bundled with them so you don't need to include them yourself.

Readme

Keywords

none

Package Sidebar

Install

npm i angularjs-shoe

Repository

github.com/eugeneware/angularjs-shoe

Homepage

github.com/eugeneware/angularjs-shoe#readme

Weekly Downloads

2

Version

0.0.1

License

BSD

Last publish

Collaborators

  • eugeneware
Try on RunKit
Report malware