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
Firebase + Angular.js = unimaginable developer bliss
“ 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. ”
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="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!
$scope.items
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
