Firebase – Real time database using AngularJs

What’s up guys, Eze is here. Today I want to talk you about Firebase a powerful Google suitcase 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

Today I’m going to explain how to insert a Json object into the 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.

initcode

Creating your data layer

I will create an AngularJs service to use as data layer. This service will be responsible to create 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 allow 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 rreference

Now we have a service to get a link to our database reference so now 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.

db

And 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 and as always thank you for reading.

Advertisements

2 thoughts on “Firebase – Real time database using AngularJs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s