angularjs-shoe

Use shoe with angularjs

0.0.1
latest
Source
npm

Version published: 12 years ago

Weekly downloads: 2

Maintainers: 1

Weekly downloads

Created: 12 years ago

Source

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.

Keywords

FAQs

What is angularjs-shoe?

Is angularjs-shoe popular?

Is angularjs-shoe well maintained?

Package last updated on 20 Jun 2013

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install