Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Firebase: Real-Time Database Using AngularJS

DZone's Guide to

Firebase: Real-Time Database Using AngularJS

Firebase provides a powerful real-time database that can be accessed from almost anywhere. You only need to reference a couple libraries to add it to your web app!

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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.

initcode

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:

db

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.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:
firebase ,mobile ,tutorial ,angularjs

Published at DZone with permission of Ezequiel Reyno. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}