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 todomvc.com 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!

Firebase + Angular.js = unimaginable developer bliss— Mark Nutter (@marknutter) February 21, 2013

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 builtFirefeed, 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 theAngular 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. [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="https://cdn.firebase.com/v0/firebase.js"></script><script src="angularFire.js" 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', 'angularFire',
 function MyCtrl($scope, angularFire) {
 var url = 'https://<my-firebase>.firebaseio.com/items';
 $scope.items = angularFire(url, $scope, 'items');
 }
]);

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 theREADME and examples for AngularFire on Github for more information.

Thank you!

These bindings would not have been possible without the help ofPeter 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 andGeoff 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!

As always, please don't hesitate tosend in your feedback, fileissues and pull requests!