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.
It’s also drastically changed application build speed.
In fact, what if we told you could build an application using only 99 lines of HTML, of which less than 60 are JavaScript.
We thought it would be kind of cool to put together the smallest possible real-time sample application showcasing PubNub and AngularJS . It will take substantially less effort, especially if you’re used to coding your JS in CoffeeScript.
The source for the example lives here: https://github.com/pubnub/angular-js/blob/master/app/mini.html
Stick around and we’ll walk you through the HTML section by section.
Beginner Hints - What is Angularjs?
Angularjs is a JavaScript framework that can essentially improves/extends HTML to include web applications.
Step 1: Set Up Script Includes
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.min.js : the main PubNub communication library for JavaScript
- 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: Build 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 by merely using a ul element and an li element which you can set up to iterate over all of the items in $scope.users. For 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 $scope.messages object.
Not too shabby! But you may ask, how does it all work? Let's check out the JavaScript!
Step 3: JavaScript - Where the Magic Happens
Let's walk through the JavaScript and see how it's all put together.
We create a standard 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.
The 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 real-time 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 variableinitialized in the root scope to keep track of whether we’ve initialized the PubNub service. From here you can put in the UUID.
The UUID is the globally unique user ID you’d like to use for identifying the user. You can learn more about it here.
Step 4 - Subscribing
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.
Step 5 - Publishing
If you thought subscribing was easy, publishing is even simpler. 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 $rootScope.$on(PubNub.ngPrsEv($scope.channel) ....
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 $rootScope.$on(PubNub.ngMsgEv($scope.channel) ....
Sum It Up
And there you have it, a simple guide to get a real-time app up and working in 60 seconds or less. It’s that simple. We hope you found this useful. Please keep in touch and reach out if you have any questions! We’d love to hear how you’ve applied it.
Get StartedSign up for free and use PubNub to power AngularJS