Firebase: Real-Time Database Using AngularJS

Today, we're going to talk about Firebase, a powerful Google mobile platform that provides a bunch of tools such as storage, cloud messaging, hosting, and a real-time database that can be accessed via web, iOS, or Android app.

Adding Firebase to Your Web App

I'm going to explain how to insert a JSON object into a real-time database and restore that value using AngularJS. You only need to reference AngularJS, Firebase, and AngularFire libraries in your project.

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>

<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>

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

Then, we need to add Firebase configuration in our index.html. To do that, we need to go into the Firebase console and get the initialization code, as you can see in the image below.

Creating Your Data Layer

I will create an AngularJS service to use as a data layer. This service will be responsible for creating our links to the Firebase real-time database. Here, we are going to use two important functions in the firebase library. The first one is ref() from the database() object. This function returns a direct link to the root structure of our documental database. The second function is child(), which allows us to create child reference to this root structure.

 function firebaseDataService() {
     var root = firebase.database().ref();

     var service = {
         root: root,
         requests: root.child('requests')
     };

     return service;
 }

In the example above, we have a path to the root structure and a child of this path call requests .

Using AngularFire to Manipulate the Reference

Now, we have a service to get a link to our database reference, so we are going to use Angular Fire to create an object with access to our database.

function getRequestsByUser(uid) {
    if (!requests) {
        requests = $firebaseArray(firebaseDataService.requests.child(uid).child('userRequests'));
    }
    return requests;
}

In the example above we use $firebaseArray function to create an object, the parameter this function uses is a path reference to Firebase. This object is now linked to our database which means that every time you put or remove an object from this array is going to affect our database in real time. We can use the function $add or $remove to manipulate our database. Our database looks like this:

That's it. After doing that, we are ready to go. I have a working example in this link if you want to see the complete implementation. In this example, I created an app that gives you the current time in different places around the world.

For a complete reference of Angular Fire use this link.

For a complete reference of Firebase use this link.

If you found this post useful, please don't forget to press the like button and share it. If you are in doubt, don't hesitate to ask a question. As always, thank you for reading.