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.

markup
1<!-- AngularJS -->
2<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
3
4<!-- pusher-js -->
5<script src="//js.pusher.com/2.2/pusher.min.js"></script>
6
7<!-- pusher-angular -->
8<script src="//cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>
Copy

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

javascript
1angular.module('myApp').controller('MyController', ['$scope', '$pusher',
2function($scope, $pusher) {
3var client = new Pusher(API_KEY);
4var pusher = $pusher(client);
5}]);
Copy

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:

javascript
1var client = new Pusher(API_KEY);
2var pusher = $pusher(client);
3var my_channel = pusher.subscribe('my-channel');
4my_channel.bind('new-price', function(data) {
5// update with new price
6}
7);
Copy

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.