New AngularJS Library for Pusher

Over the last year or so there have been a few of us at Pusher HQ who have decided to give AngularJS a go. After some initial teething problems we have gone to grow pretty fond of it.

Around the same time that we started playing around with AngularJS there were some Pusher-Angular integrations that started popping up, perhaps most notably Brian Woodward’s. It was great to see the integrations appear from members of the community and they continue to prove popular.

In fact, one of our most popular blog posts was about how you can use Pusher in conjunction with AngularJS by using the aforementioned library. Since then, Angular’s popularity has continuted to grow and we have remained big fans of it here at Pusher.

We are sponsoring the hackathon at ngEurope and so thought now would be a good time to work on making Pusher and Angular an even better combination.

As a result we are pleased to announce the official pusher-angular library.

The new library is designed to be as familiar as possible for anyone who has used the pusher-js library before. It has an almost identical API but makes sure that anything that is getting updated via Pusher will be reflected in your Angular app.

To get started with it you just need to make sure that you have the Angular, pusher-js, and pusher-angular libraries included in your app.

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>

<!-- pusher-js -->
<script src="//js.pusher.com/2.2/pusher.min.js"></script>

<!-- pusher-angular -->
<script src="//cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>

Then in your Angular app it’s as easy as this to get setup:

angular.module('myApp').controller('MyController', ['$scope', '$pusher',
function($scope, $pusher) {
var client = new Pusher(API_KEY);
var pusher = $pusher(client);
}]);

From this point you can now use the library in much the same way that you would use the pusher-js library. For example, you can setup a client, pass it to the $pusher object, then create a channel and bind to an event on that channel using the following code:

var client = new Pusher(API_KEY);
var pusher = $pusher(client);
var my_channel = pusher.subscribe('my-channel');
my_channel.bind('new-price', function(data) {
// update with new price
}
);

There’s an example app up on GitHub that can be found in the example branch which makes use of the new library. If you want to play around with it and see what the library is like to use, then that’s a great place to start.

If you would like to contribute then dive right in, fork the repo, and start making some pull requests. Otherwise, if you use the pusher-angular library and make something awesome, then make sure to let us know.

Angular
angularjs
Ready to begin?

Start building your realtime experience today.

From in-app chat to realtime graphs and location tracking, you can rely on Pusher to scale to million of users and trillions of messages