1. What is AngularFire ?

AngularFire is the officially supported AngularJS binding for Firebase. The combination of Angular and Firebase provides a three-way data binding between your HTML, your JavaScript, and the Firebase database.

2. Create an account

The first thing we need to do is sign up for a free Firebase account. A brand new Firebase app will automatically be created. We’ll use this URL to authenticate users and store and sync data with AngularFire.
After Login you can create you own unique Firebase app. Here for example we are create drtricker.firebaseio app and url most be unique like https://drtricker.firebaseio.com

create app

3. Add Script Dependencies

Firebase and AngularFire are available via npm and Bower as firebase and angularfire, respectively.

For use AngularFire in a project, include the following script tags in order :

// AngularJS
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js

// Firebase
https://cdn.firebase.com/js/client/2.2.4/firebase.js

// AngularFire
https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js

4. Inject the AngularFire Services

Before we can use AngularFire with dependency injection, we need to register firebase as a module in our application.

var app = angular.module("drtrickerSampleApp", ["firebase"]);

Now the $firebaseObject, $firebaseArray, and $firebaseAuth services are available to be injected into any controller, service, or factory.

app.controller("SampleCtrl", function($scope, $firebaseObject) {
  var ref = new Firebase("https://drtricker.firebaseio.com"); // https://YOUR-FIREBASE-APP.firebaseio.com

  // download the data into a local object
  $scope.data = $firebaseObject(ref);

  // putting a console.log here won't work, see below
});

In the example above, $scope.data is going to be populated from the remote server. This is an asynchronous call, so it will take some time before the data becomes available in the controller. While it might be tempting to put a console.log on the next line to read the results, the data won’t be downloaded yet, so the object will appear to be empty.

5. Add Three-Way, Object Bindings

Angular is known for its two-way data binding between JavaScript models and the DOM, and Firebase has a lightning-fast, realtime database. For synchronizing simple key / value pairs, AngularFire can be used to glue the two together, creating a “three-way data binding” which automatically synchronizes any changes to your DOM, your JavaScript, and the Firebase database.

To set up this three-way data binding, we use the $firebaseObject service introduced above to create a synchronized object, and then call $bindTo(), which binds it to a $scope variable.

Demo with code

6. Synchronize Collections as Arrays

Three-way data bindings are amazing for simple key / value data. However, there are many times when an array would be more practical, such as when managing a collection of messages. This is done using the $firebaseArray service.

Because the array is synchronized with server data and being modified concurrently by the client, it is possible to lose track of the fluid array indices and corrupt the data by manipulating the wrong records. Therefore, the placement of items in the list should never be modified directly by using array methods like push() or splice().

Instead, AngularFire provides a set of methods compatible with manipulating synchronized arrays: $add(), $save(), and $remove().

Demo with code

7. Download Examples

Add Three-Way, Object Bindings
Synchronize Collections as Arrays