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 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

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 JavaScript include, as well as Firebase:

<script src="angularFire.js" type="text/javascript"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.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', '$firebase',
  function MyCtrl($scope, $firebase) {
    var ref = new Firebase('https://<my-firebase>.firebaseio.com/items');
    $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!