---
title: "Announcing Firebase bindings for AngularJS"
description: "Announcing Firebase bindings for AngularJS"
published: "2013-03-29"
last_updated: "2013-03-29"
authors:
  - "Anant Narayanan (Dev Evangelist)"
categories:
  - "Angular"
  - "AngularFire"
  - "Launch"
  - "Web"
  - "JavaScript"
canonical_url: "https://firebase.blog/posts/2013/03/announcing-firebase-bindings-for"
---

# Announcing Firebase bindings for AngularJS

*Published March 29, 2013 by Anant Narayanan (Dev Evangelist)*

---
Today, we are happy to announce **[AngularFire](https://github.com/firebaseextended/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](https://github.com/firebaseextended/angularfire) - we updated the Angular example from [todomvc.com](http://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](https://twitter.com/marknutter/status/304625277433171968)

### 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](http://backbonejs.org), [Ember](http://emberjs.com), and [AngularJS](http://angularjs.org/) 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](http://firefeed.io), 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](https://groups.google.com/forum/?fromgroups#!searchin/angular/firebase). We also noticed that several folks, such as [Plunker](http://plnkr.co/), 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:

```js
<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:

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

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

```js
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](http://angularfire.com) website for more information.

### Thank you!
These bindings would not have been possible without the help of [Peter Bacon Darwin](https://github.com/petebacondarwin). 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](https://twitter.com/g_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](https://groups.google.com/forum/#!forum/firebase-angular) to share your feedback or ask questions, and check out [AngularFire on GitHub](http://github.com/firebase/angularFire) to file issues and pull requests!