PubNub Blog

Real-Time AngularJS SDK with Live Chat Example

First Look: The PubNub AngularJS Library with Example Chat App

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.

RealtimeAngularJS

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 Example Set Up

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

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

Loading...