A concise, reliable and powerful library to make use of Socket.io in Angular.js.
Providing the capability for just writing declarative code benefit from Angular Directive.
<html ng-app="testApp">
<head></head>
<body ng-controller="testController">
<div>
{{ status }}
<ul io io-message="messages.push($data)">
<li ng-repeat="message in messages track by $index">
{{ message }}
</li>
</ul>
<input type="text" ng-model="myMessage"/>
<button io ng-click="$io.emit('message', myMessage)">Send</button>
</div>
<script>
angular.module('testApp', ['angular-io'])
.config(['$ioProvider', function($ioProvider) {
$ioProvider.connect();
}])
.controller('testController', ['$scope', '$io', function($scope, $io) {
$io.default.emit('message', 'I am in.');
$io.default.on('toast', function (data) {
$scope.$apply(function () {
$scope.status = data;
})
});
$scope.status = 'Idle';
$scope.messages = [];
}]);
</script>
</body>
</html>An application can use Socket.io even with only directive without the existence of a controller.
##Installation
Install via Npm:
$ npm install angular-io --saveInstall via Bower:
$ bower install angular.io --saveThe library support both Directive operation and Service operation.
The documentation is on the way. The simple description on directive is:
The single io attribute is equal to io="default" .
The io="name" io-event="expression" equals to :
var someController = ['$scope', '$io', function($scope, $io) {
$io.name.on('event', function() {
$scope.$apply(function() {
expression; //Variable attached to current $scope
};
};
}];The default socket is created by $ioProvider.connect(url) .
The other sockets are created by $ioProvider.register(name, url) .
All of the their functionality are same.