Firebase & AngularJS => 3 Way Data Binding Magic

Saturday, October 18, 2014

Firebase is a realtime synchronization network

Build apps fast - no servers required

Data persistence in realtime

Comes with authentication and security rules, serves as the complete backend

3 Way Data Binding with a data persistence store


  1. Data store to store the apps data, the data is propagated back to app in real time
  2. When data is stored all clients are instantly notified in realtime
  3. It acts as a message bus as well as a persistence layer
  4. Security system built in, get message notification, data persistence, a complete backend

Let's start with a simple example using firebase and jquery, add a reference to firebase, jquery and a custom JAVASCRIPT file just above the ending body tag

Navigate to firebase homepage and sign in or register

Create a new firebase, take note of the endpoint url

View the firebase forge, here is where the data will be stored in json format

Create a reference to the root of the firebase

In the HTML file add a couple of input text boxes for the chatters name and message

Add a keypress event handler on the message textbox, whenever enter/return is hit this event will fire and the data will be sent and stored to the firebase

View the web page in the browser

Insert a name and message and press enter

View in the firebase forge the data has been instantly inserted

The set() function can also be used to write objects, write an object to firebase with name and message properties

Type in a name and message and hit enter

View in the forge the message object has been instantly updated

Use push instead of set so that a list of messages can be supported, makes creating lists easy

To tell firebase to inform us that a new message has arrived, add a callback to list of chat messages using on() method, then method takes two arguments the event type and the callback function, child_added event will notify us of new messages

Foreach chat message firebase will invoke the callback with snapshot containing the message's data, extract the message data from the snapshot by using the val function and assigning it to a variable, then invoke the displayMessage function to display the messages

Refresh web page view the message list from firebase

Type in a new message, instantly the message is displayed in the message list

In real time the message from Mary is persisted to the data store in the firebase forge and updated in the HTML template

Open two instances of the browser on the same url of the firebase chatter

Firebase, the data is shown in real time on all clients and persisted in the firebase data store, this process is even more enhanced using angularjs

This is an example of two way data binding in angularjs, the directive ng-model on the input and the angular expression in the h2 tag, type in a string in the textbox the h2 also gets updated

View the page in a browser, insert a string, the h2 instantly reflects the value

Firebase extends this two way synchronization to a cloud database, take the model that is stored in memory on the client, whenever it changes, the changes are sent back to the model, so the model is always up to date, let's build a simple chat application using firebase and angularfire, include firebase and angularfire scripts in the head section

Define firebase as a dependency in the module definition

Inject firebase as a dependency in the controller, add firebase as an argument to the controller's constructor

Create a new instance of firebase at the specified url, bind the ng-model posts to the firebase location

Now the model posts is bound to a firebase url via $firebase, whenever data changes in firebase the model will be immediately updated and hence the view, this is the magic of three way data binding, insert an ng-repeat to iterate over all posts and display the properties, this is in the ng-controller body tag

Add the addpost function which we will bind to the ng-keydown directive in the view, the add method stores the message in firebase as an object, angularfire creates a two way data binding between the model and firebase as angular creates a two way data binding between the model and the view

In the view add a label and two inputs, notice the ng-model directive binding the input values to scope variables in the controller or model and the ng-keydown directive, invoking the add function passing in the type of event as an argument

Open the web page in a couple of browsers, here firefox and chrome, the best browsers

Type in a username and message in one browser, press enter, view it immediatley reflects on all clients

View the data has also been persisted in the firebase forge

Insert a couple of messages, view the immediate update on all web pages

And view the data persisted in the firebase forge, in real time, the data in the backend and on all devices accessing the web page are in synch, with the newest data

Finally open a new instance of the web page in another client, in this case safari, view the fresh data displayed

Default Success Warning Important Info Inverse
B S W I ? O