IN THIS ARTICLE
Translation: How to get a real-time app working with PubNub and AngularJS in 60 seconds or less.
Here at PubNub, we’re huge fans of AngularJS. In the short time it’s been around, it has amassed a huge following and changed the way we build web applications.
We thought it would be kind of cool to put together the smallest possible (but still interesting) sample application showcasing PubNub and AngularJS.
The source for the example lives here: https://github.com/pubnub/angular-js/blob/master/app/mini.html
In this blog post, we’ll walk you through the HTML section by section.
Step 1: Get Your Includes On
You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:
To get started, we’ll need to set up the script includes for PubNub and Angular, as well as an optional stylesheet for Bootstrap styles.
What does all this stuff do?
- pubnub-crypto.min.js : encryption features in case you need to enable them someday
- angular.min.js : that AngularJS goodness we all know and love
- jquery-1.10.1.min.js : bring in some JQuery
- pubnub-angular.js : bring in the official PubNub SDK for AngularJS
- bootstrap.min.css : bring in the bootstrap styles
Once these are all set, you’re good to start coding!
Step 2: Set Up Your HTML Layout and Dynamic Content
Let’s get the HTML set up:
AngularJS needs to be able to find your app. To make that happen, we add an ‘ng-app’ attribute to the div element we want to Angular-ize. In addition, we need to specify an AngularJS controller function that takes care of binding all the logic we need. If you look in the script tag at the end of the page, you’ll see where we set up the ChatCtrl function.
Wow, how awesome is that? We can create a dynamic list of users simply by using a
ul element and an
li element that’s set up to iterate over all of the items in $scope.users. For the purposes of this demo, each user object is a simple string.
Just a header. Nothing to see here. One thing that’s kind of nifty is that we substitute in the length attribute from the $scope.messages array.
This is the first interactive feature – a simple text box that binds its content to
$scope.newMessage, and a submit button for the form. The form submit function is bound to the
$scope.publish function. What does it do? We’ll find out soon!
Now that you’re already an AngularJS and PubNub expert, you can see that this is just a dynamic collection of messages from the
We create a normal
script tag in the body – that’s easy enough.
The next part is defining the AngularJS module where all of this lives. You may remember the PubNubAngularApp from the HTML div tag we talked about earlier. We also declare an Angular dependency on the
pubnub.angular.service, that comes in because we already included the
pubnub-angular.js file at the beginning of the HTML document.
controller function call defines the AngularJS controller – that’s the place where all of the data and functions for our application will live. Notice that we’re injecting the PubNub service into our controller – that’s how we get access to all of the realtime goodness that PubNub provides.
Let’s take a look at the body of the controller function:
These are pretty self-explanatory – just setting up variables we’ll use for the application.
It’s important to initialize PubNub only once during the course of the application. In this case, we use a variable
initialized in the root scope to keep track of whether we’ve initialized the PubNub service. The UUID is the globally unique user ID you’d like to use for identifying the user.
I bet you can’t tell what that does! You’re right – it calls the
ngSubscribe function which creates a new channel subscription for our app. The channel name is specified in the variables above. It’s also possible to subscribe to multiple channels, and PubNub does all the work to make it easy.
If you thought subscribing was easy, publishing is even easier. All you do is call `PubNub.ngPublish()` with the channel name and message you’d like to send. In our case, we’ll send a simple string. PubNub also supports sending structured messages too — just pass in an object and PubNub will convert it to JSON under the hood for both senders and receivers, with no need for custom logic! The last line is purely cosmetic – it resets the user input text box to empty after the message is sent.
Ok, now that we’ve subscribed, how does our app know about messages coming in?
We bind an event handler to listen for message events. The PubNub AngularJS library receives all of those events coming from the channel and transforms them into Angular events. Here we’re saying that when a message comes in, push it into the
$scope.messages collection. Since it’s not easy for Angular to detect an
Array.push() call, we wrap it in a
$scope.apply call to make sure that Angular updates the view properly.
If you’d like your app to display contents of the dynamic user list, we try to keep it easy with the AngularJS library. In the code snippet above, we register an event listener for PubNub Presence events that will update the
$scope.users collection with the user list that the AngularJS library is keeping track of for us. This applies to join and leave events. Pretty nifty!
If you’d like to bring in the user list, just add the call above. It’ll fire off a Presence event, which will be handled by the presence handler we registered above using
If you’d like to bring in message history (using PubNub Storage & Playback), just add the call above. It’ll fire all of the message events, which will be handled by the event handler we registered above using
… And we’re done! We hope you found this useful. Please keep in touch and reach out if you have any questions!