AngularJS + Firebase

Everything you need to get started with AngularJS and Firebase.

AngularJS

Store and sync your AngularJS
app's data in milliseconds.
Firebase is a realtime backend
for your AngularJS app.

Include Firebase

Firebase works great with Angular and can synchronize your Angular app's data without any backend code.

<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.11/firebase.js"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>

Try AngularFire

We offer an optional helper library (AngularFire) for wiring up Firebase within your app.

Specify firebase as a dependency. Then import the $firebase service in your controller and instantiate it with a Firebase reference.

<!-- AngularFire Library -->
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>

<script>
  var myApp = angular.module("MyApp", ["firebase"]);

  function MyController($scope, $firebase) {
    var peopleRef = new Firebase("https://<my-firebase>.firebaseio.com/people");
    // Automatically syncs everywhere in realtime
    $scope.people = $firebase(peopleRef);
  }
</script>

Modify Data

Firebase makes it easy to modify your data. You can use AngularFire methods like $add, $remove and $update.

Or use our standard Javascript API methods from within your app like set(), update(), and remove().

function MyController($scope, $firebase) {
  var peopleRef = new Firebase("https://<my-firebase>.firebaseio.com/people");
  $scope.people = $firebase(peopleRef);
  $scope.addPerson = function() {
    // AngularFire $add method
    $scope.people.$add($scope.newPerson);
    //or add a new person manually
    peopleRef.update({name: 'Alex', age: 35});

    $scope.newPerson = "";
  }
}
<div ng-controller="MyController">
  <ul ng-repeat="person in people">
    <li></li>
  </ul>
  <input type="text" ng-model="newPerson"/>
  <button type="submit" ng-click="addPerson()">Add New Person</button>
</div>

Easily authenticate users

Use Simple Login to seamlessly authenticate users via Facebook, Twitter, Github, Persona or just plain old email addresses and password without any backend code!

Use Firebase to manage your authentication

Firebase Hosting & CLI

Using our simple command line interface you can host all your static assets on Firebase to completely remove the need for any backend.

Learn more about Firebase Hosting

Download our Starter Pack

The starter pack includes all example apps built with Angular and Firebase. It also provides a complete, working application skeleton with test units and authentication, so you can hit the ground running.

Download Starter Pack

Try the 5 Min. Tutorial

The 5 minute tutorial will teach you the basics of AngularFire.

Build a simple chat app

Dive Deeper & Start Building

In addition to all of the AngularFire API methods we also have a comprehensive guide for building AngularJS apps with Firebase.

Angular + Firebase Documentation
$add(value) The $add method takes a single argument of any type. It will append this value as a member of a list
$remove([key]) The $remove method takes a single optional argument, a key. If a key is provided, this method will remove the child referenced by that key.
$set(value) Overwrites the remote value for this object to newValue. The local object will also be subsequently updated to this new value.
more... View AngularFire API methods or Angular + Firebase Documentation.

Join the Conversation

Join our Firebase + Angular Google Group to ask questions, share your apps with the community, and find out the latest new features.

Example AngularFire Apps

View some more detailed AngularFire apps with their source code below.

TODOMVC is a AngularFire port of the popular TODO app that helps you pick the right MV* framework.

View Source Code

Firereader is a real-time RSS feed reader that showcases some of AngularFire's advanced capabilities like authentication.

View Source Code

FirePoker.io is an agile planning poker app that helps you estimating user stories in software development.

View Source Code

Trusted by over 6 0 , 0 0 0 awesome developers

Build realtime apps easily with our powerful API

Start Hacking!