Creating an AngularJS application using Firebase

In this article I want to talk about a bunch of AngularJS and Firebase as a data warehouse.

Much has been written about AngularJS on Habré, but quite a bit about Firebase. That's why I decided to fill this gap. What is Firebase?

Firebase is a powerful service that provides an API for storing and synchronizing real-time data, the server on which this data is stored. Also out of the box, we have user authentication and support for various platforms and frameworks. More information can be obtained on the official website .
')
Firebase also provides a great library for AngularJS - AngularFire .

Using AngularJS and its excellent two-way date binding with Firebase, we can get three-way data synchronization. However, first things first.

Getting started

First we need to create a free account. This can be done by following the link: www.firebase.com/signup . After registration, you will receive a unique URL, which will later be used to store and synchronize data.

The next step is to add scripts to your project. To use AngularFire you need to connect the following files:

<!-- AngularJS --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <!-- Firebase --> <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> <!-- AngularFire --> <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script> 

Also Firebase and AngularFire are available for installation using bower:

 bower install firebase angularfire 

After connecting the necessary scripts, we can add Firebase to our AngularJS project as dependencies.

First of all, add a dependency to the module:

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

Then we can use it in controllers, directives and services:

 app.controller("SampleCtrl", ["$scope", "$firebase", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/"); // create an AngularFire reference to the data var sync = $firebase(ref); // download the data into a local object $scope.data = sync.$asObject(); } ]); 

Trilateral binding

AngularJS is known for its two-way binding of melons between the JavaScript model and the DOM. Using Farebase in conjunction with AngularJS, we can organize the so-called "three-way binding", which will allow us to synchronize changes in the JavaScript, DOM and Firebase models in real time.

To do this, we can use the $ asObject () method to create a synchronized object and bind it to a variable from our $ scope using the $ bindTo () method. Here is a sample code:

 var app = angular.module("sampleApp", ["firebase"]); app.controller("SampleCtrl", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/data"); var sync = $firebase(ref); // download the data into a local object var syncObject = sync.$asObject(); // synchronize the object with a three-way data binding // click on `index.html` above to see it used in the DOM! syncObject.$bindTo($scope, "data"); }); 

Work with collections

Trilateral data binding works fine with simple key / value objects, but quite often there are tasks when it is necessary to work with collections (arrays). For this we can use the $ asArray () method.

We can get the collection from the server by calling the $ asArray method, which will be read-only and add it to our $ scope:

 var app = angular.module("sampleApp", ["firebase"]); app.controller("SampleCtrl", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/messages"); var sync = $firebase(ref); // create a synchronized array for use in our HTML code $scope.messages = sync.$asArray(); }); 

Considering the fact that the array is synchronized with the server and the client at the same time, its modification can damage the integrity of the data (damage the data by managing the wrong records), so it cannot be modified using the push () and splice () methods.

For this, AngularFire provides a set of methods for working with arrays ($ add, $ save, $ remove). Here is an example of data array synchronization:

 var app = angular.module("sampleApp", ["firebase"]); app.controller("SampleCtrl", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/messages"); var sync = $firebase(ref); $scope.messages = sync.$asArray(); $scope.addMessage = function(text) { $scope.messages.$add({text: text}); } }); 

Add authentication

Firebase provides an authentication service that offers a user data management solution and authentication completely on the client side. Out of the box, Firebase supports anonymous authentication, using email and password, as well as authentication using popular OAuth providers (Facebook, Github, Google, Twitter).

The AngularFire library provides us with a service - $ firebaseAuth, which is a wrapper around the authentication methods supplied by the Firebase library. This service can be added to your services, controllers and directives as a dependency. Here is an example of authentication using Facebook:

 app.controller("SampleCtrl", ["$scope", "$firebaseAuth", function($scope, $firebaseAuth) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/"); var auth = $firebaseAuth(ref); auth.$authWithOAuthPopup("facebook").then(function(authData) { console.log("Logged in as:", authData.uid); }).catch(function(error) { console.error("Authentication failed: ", error); }); } ]); 

More information about authentication can be found on the official website .

What's next?

At the moment I am working on a single project that uses Firebase as a data warehouse. In the next article I want to talk about how to apply this service on a live project and what came of it.