Anant Narayanan
Anant Narayanan Dev Evangelist March 29, 2013

Announcing Firebase bindings for AngularJS

Today, we are happy to announce AngularFire: Firebase bindings for AngularJS that will make it even easier for developers to write rich, real-time web applications using the two technologies. Check out a live demo - we updated the Angular example from to be real-time. We also made it so you don’t need a server for your Angular app, all in just a few lines of code!

Why we built AngularFire

Firebase handles everything about data synchronization elegantly, but the other half of building a web app is rendering the content. A lot of our developers were already using frameworks like Backbone, Ember, and AngularJS to help them build their front-end.

Angular naturally piqued our interest, and we have been very impressed with all the great things developers have to say about it - like the elimination of DOM manipulation code and the 2-way data binding. We faced some of these same issues while writing our sample apps. When we built Firefeed, the bulk of our code was applying data changes from Firebase to the DOM. Without some structure, the code could get ugly rather quickly.

We had a feeling that Firebase and Angular would go really well together, and many from the Angular community agreed. We also noticed that several folks, such as Plunker, were already using Firebase to power the backend of their app and using Angular to build the frontend - so building first-class bindings was a no brainer for us.

Angular’s History

When we first learned about Angular we were surprised to discover that its original intention was to be a cloud JSON data store, very much like Firebase. Here’s a quote from Wikipedia:

AngularJS was originally developed in 2009 by Miško Hevery and Adam Abrons as the software behind an online JSON storage service, that would have been priced by the megabyte, for easy-to-make applications for the enterprise.

AngularJS Development History, Wikipedia [1]

It was not surprising then, that we found it remarkably easy to integrate Firebase with Angular. We’re pleased to say that the two technologies fit together very elegantly.

How does AngularFire work?

First, you’ll need to include the AngularFire JS include, as well as Firebase:

<script src=""></script>
<script src="angularFire.js" type="text/javascript"></script>
<script src="" type="text/javascript"></script>

Then, declare the ‘firebase’ module as a dependency for your app:

var myapp = angular.module('myapp', ['firebase']);

Finally, bind a Firebase URL to a model in your controller:

myapp.controller('MyCtrl', ['$scope', '$firebase',
  function MyCtrl($scope, $firebase) {
    var ref = new Firebase('https://<my-firebase>');
    $scope.items = $firebase(ref);

Now, any changes made to the model referenced by $scope.items (a regular JS array) will automatically be synchronized to Firebase - and therefore also show up on all your other clients. That’s it!

We also have another mode of operation for cases where you want to be more explicit about when to sync model changes to Firebase. Check out the AngularFire website for more information.

Thank you!

These bindings would not have been possible without the help of Peter Bacon Darwin. Peter is an active member of the Angular community and had written the first ever Firebase/Angular integration library. We look forward to continuing working with him on making AngularFire ever better!

We’d also like to thank Benny Lichtner, Tom Saffell and Geoff Goodman for their invaluable feedback on early versions of AngularFire. The Angular community has also been immensely helpful to us, and we look forward to working with you all!

Join our Firebase + Angular Google Group to share your feedback or ask questions, and check out AngularFire on GitHub to file issues and pull requests!

[1] AngularJS Development History, Wikipedia

Share this article

More Firebase Articles

Nov 12, 2015
Securing user data with Bolt
Nov 09, 2015
Introducing the Bolt Compiler
Nov 06, 2015
The Firebase CLI: now with database commands
Oct 29, 2015
Managing Development Environments with Firebase
Oct 15, 2015
Best practices for the iOS UIViewController and Firebase
Oct 13, 2015
Google Login and Firebase CLI 2.0.0
Oct 13, 2015
Divshot has Joined Firebase!
Oct 07, 2015
Client-side fan-out for data consistency
Oct 01, 2015
Email notifications with Firebase, Android Studio and App Engine
Sep 24, 2015
Introducing multi-location updates and more