Good News! We’ve launched an all new Chat Resource Center.
We recommend checking out our new Chat Resource Center, which includes overviews, tutorials, and design patterns for building and deploying mobile and web chat.
First Look: The PubNub AngularJS Library with Example AngularJS Chat App Tutorial
Over the past few months, it has been really exciting to follow the phenomenal traction and explosive adoption of AngularJS, an Open Source framework for Web Application development, originally started by developers at Google and now receiving global attention.
We’ve done a ton with AngularJS, so check out the full collection of AngularJS blog posts including AngularJS chat and messaging, security, presence, and more here.
Over the course of building a few PubNub-enabled AngularJS applications, we came across a bunch of patterns and features that we thought would be useful for AngularJS developers, for example:
- an Angular service to inject the PubNub object into controllers.
- an Angular-friendly mechanism for binding events to the root scope.
- additional bookkeeping functions for providing easy access to collections (such as the presence and channels lists).
In the future, we’re thinking about doing more in this area, such as PubNub-enabled Angular directives, so stay tuned and let us know on the PubNub AngularJS Chat Examples and GitHub Issues if you have any ideas for future enhancements!
The PubNub AngularJS library should look familiar to experienced developers in Angular development as well as to folks who have explored the PubNub API a bit. In this blog entry, we’ll give you a quick preview of what you need to get started. If you like what you see, you can jump right into a live version of the app or the source code.
Let’s take a look at the contents of an AngularJS Chat Example, which is the main entry point for the application.
AngularJS Chat Example Set Up
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:
First off, here are the script includes you’ll need to get started:
Where pubnub.min.js is the “latest” PubNub JavaScript SDK, angular.js is your version of angular (we’ve used 1.0.8, and are starting to play with the 1.2.x series), and pubnub-angular.js is our angular library that you can copy and paste into your web application (a bower component will be coming soon).
Our web app is Angular-enabled with an ng-app attribute:
Where ‘PubNubAngularApp’ is the name of the Angular module containing our app.
The code for our app lives in:
In app.js, notice the dependency on the PubNub Angular library (pubnub.angular.service, defined in pubnub-angular.js):
The code for our controllers lives in:
Once that’s set, the PubNub service can be injected into the controller by name!
Getting Started with PubNub AngularJS
Publishing to channels is trivial – just use the PubNub.ngPublish() method.
As you can see, we call the PubNub publish method passing in the desired channel and message to transmit. It is also possible to transmit structured data as JSON objects, so go wild!
It’s not necessary to subscribe to a channel in order to publish to a channel.
Subscribing to channels is accomplished by calling the PubNub.ngSubscribe() method. After the channel is subscribed, the app can register root scope message events by calling $rootScope.$on with the event string returned by PubNub.ngMsgEv(channel).
This is the core of the PubNub API – allowing clients to subscribe and publish to channels, and have those events propagate in real time to other applications connected to the same channels.
Diving Deeper with Angular JS Example Reference
The PubNub Core SDK has many more features we didn’t cover in this first blog post, but which are explained in detail in the API Guide and Reference Angular JS Example. The documentation walks you through topics like PubNub Channel Presence and PubNub Storage & Playback which really enhance your real-time-enabled web application.
In future blog posts, we’ll cover other features of the PubNub Angular JS SDK. In the meantime, please give the AngularJS integration a try, have fun, and Submit Angular JS Example Help if you have ideas or need a hand!
Reference AngularJS Example
- Angular.js Documentation and Live Chat Example: https://pubnub.github.io/angular-js
- Angular.js Example GitHub Repository: https://github.com/pubnub/angular-js
AngularJS ngChat “ChatiNG” by Joel Skrepnek
You can easily build a real-time chat app with #AngularJS and @PubNub. AngularJS Chat Demo by Joel Skrepnek // Git: AngularJS GitHub by Joel Skrepnek
Get Started
Sign up for free and use PubNub to power AngularJS apps