Real-time Chat Blog

Animating Web UIs for Real-time Apps with, AngularJS

3 min read Michael Carroll on Mar 6, 2015
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

How to build an AngularJS chat application with a smooth, interactive UI on This allows you to animate certain chat features. Full tutorial and demo.

Waving Hand

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.

Take me to the Chat Resource Center →

In a previous tutorial (from our massive library of AngularJS walkthroughs), we built a real-time chat application using AngularJS.

In this blog post, we’re making our original AngularJS chat application extra beautiful with integrated with AngularJS, enabling us to build smooth and lightweight UIs.

The project brings up a few questions:

  • Will Angular wrestle with famous-angular for control of the DOM?
  • Is this too much for a decent page load?

The one guarantee is that the PubNub-AngularJS library stays out of the struggle. It performs it’s duties silently in the background, exhilarating precision and speed as it distributes messages across the world.

Want to see it in action? Head over to our live demo chat applicationNotice how smoothly the UI animates as you navigate throughout the application.

AngularJS vs. AngularJS/

In the two .gifs below, check out the difference in the UI, and how it animates when messages are sent.


Chat app without


Chat with Notice the bounce when messages are sent.

AngularJS/ Chat App Code Walkthrough

In the index.html the following CDN links are added: is new, so there aren’t any common CDN links out there. To make the chat application, this app used GitHub. You can try out It’s good for testing, but it’s not recommended to serve Amazon-like traffic at a production scale.

Next we need the correct dependency injections. This snippet is taken from, which doubles as a router. Note that this is written in Coffeescript.

Let’s take a look at the html.haml. All html code from here is written in Haml markup language. The first portion initializes the famous-angular app with fa-app. Famous calls this a “context”. The Haml snippets are from chat.html.haml.

Note that the height has to be explicitly set.

The next portion uses a famous modifier like an html div. The modifier also translates the top message 5px over and 15px down. It also gets the properties of the modifier.

Next we specify the surface. Surfaces are how famous renders html elements.

The rest of the code is similar to the previous portion. It contains the rest of the messages, which don’t need any animation.


The haml is not complete without the code, which actually sets the properties of the modifiers. The source file is

The poptext function is called everytime a new message is received from the channel.

Wrapping Up


The – AngularJS integration play very well with one another. We know this because we can nest Angular directives within famous-angular directives. The page load is fast, even with custom CDNs. Most importantly, the animation runs at a noticeably respectable frame rate.

This is because is designed to work on smaller screen sizes (think mobile). If you want more information on the technical side of, I recommend reading this article from IBM.

More from PubNub

How to Add a Notification Badge to Icons in React Native
Real-time Chat BlogDec 19, 20226 min read

How to Add a Notification Badge to Icons in React Native

Display real-time notification badges with PubNub and React Native to display important information and bring users back to your...

Michael Carroll

Michael Carroll

Digital Twins and the Future of Real-Time Data
InsightsDec 6, 20224 min read

Digital Twins and the Future of Real-Time Data

The concept of Digital Twins has evolved over the last two decades, however, one thing remains the same: the need for real-time...

Michael Carroll

Michael Carroll

How Many Text Characters Fit in a 32KB PubNub Message?
Real-time Chat BlogNov 24, 20224 min read

How Many Text Characters Fit in a 32KB PubNub Message?

Learn the ins-and-outs of PubNub message size and get a better idea of how many text characters fit in a single message.

Michael Carroll

Michael Carroll