Welcome back to our blog series about how to get started quickly with AngularJS using the PubNub AngularJS library. In a couple of recent episodes, we covered a tiny but powerful example of how to create a real-time Angular Chat application in less than 100 lines of code, as well as how to extend the example with multiplexing.
In this blog post, we’ll walk you through AngularJS encryption and three way data binding for web and mobile apps. This lets your app leverage additional AngularJS encryption to augment the transport-level encryption provided by PubNub itself over HTTPS. which is useful because it makes messages opaque before they are sent, and prevents third parties from snooping even if the messages are intercepted en route to the recipient (or after the fact).
The biggest advantage of AngularJS encryption with PubNub is that it allows your app to use secure communications with just one additional line of config (!). We’ll show you exactly what line of code that is later in the blog post. Thanks to the magic of Angular and PubNub, it’s super easy to make this happen with minimal code tweaks.
All the code for AngularJS encryption with PubNub is available here, and all PubNub AngularJS SDK documentation can be found ehre.
First off, let’s take a look at the situations where you might take advantage of encryption and three way data binding:
So, now that you know you want to try out encryption, how do you do it? It’s pretty easy with the PubNub-Angular application.
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.
Setup of the PubNub Angular library is exactly the same as with the original Zero-to-Angular in 60 seconds example:
So what does all this stuff do?
Once these are all set, you’re good to start coding!
Setup of the content DIV is the same as with the original Zero-to-Angular example:
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 data 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 EncryptedChatCtrl function.
Here, 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.
In this section, we’re just displaying a dynamic header that includes the length of the messages array (from $scope.messages).
All right! 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!
As you probably already guessed, we’re using the Angular ‘ng-repeat’ function to iterate over the
$scope.messagesarray to display the list of messages in a UL (unordered list) element.
But wait a minute! I didn’t see anything about encryption in the HTML. That’s because the PubNub library takes care of it all under the hood – pretty sweet huh?
Just like last time, we:
That’s pretty cool. Let’s see what we have next.
Whoa! Here’s the good stuff!
This is pretty much the same as any other Angular PubNub application. The one and only difference we care about is:
You might be asking now – “Are you serious – that’s it?” Yes, all you have to do is provide a secret key, and the PubNub client library takes care of the rest. PubNub never knows about this key, all of the encryption takes place in the browser so you know there’s nobody snooping on your data in between.
You can even change the cipher key later – just make sure there is a way for clients to discover the new key and reload the application in the browser with the new key.
The important things about the code above are:
Here, we’re just registering for PubNub Presence events so we know when users join and leave the channel. Once that’s set up, we can use the “ngHereNow” function to get the user list when the controller loads. Pretty nifty!
… And we’re done! Hopefully this helped you get started with PubNub message encryption and AngularJS without much trouble. Please keep in touch, and give us a yell if you run into any issues!
If you look closely at the example code in the
crypto.html source listing, you’ll actually notice that we have 2 HTML sections: one using encryption and one not. We did this so that the demo would be more interesting, but it also helped us pick up on an advanced AngularJS feature along the way that we’d like to share with you.
So, if you ever have the question: “How can I have more than one Angular ng-app active at the same time with different controllers in my Angular application?”
Now you’ll know! It’s like this:
This is because AngularJS’s initialization is optimized for the single application case, and just needs a little help to notice any additional ones.
There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...