Getting Started with Firebase using AngularJS

Getting Started with Firebase using AngularJS

A few things here and there have pushed me to learn AngularJS. It was all easy and simple I had to start implementing Firebase (because that’s what I do). Now if you’ve done this already (in which case, I don’t know why you’re reading this article), you might think “What are you on about? It’s well simple!”, and you’d be right.

Once you’ve been through coupling Firebase with Angular a few times, it will become simple. For a first timer though, it can feel pretty complicated. So let’s fix that shall we?

AngularFire

AngularFire is the official library for integrating Firebase with AngularJS which we’ll be adding to our project later using a script tag.

Prerequisites

Before you can do anything mentioned here, first you need to sign up for a Firebase account.

You also need to install Node.js and npm. Note that installing Node.js will also install npm.

Finally, you need to setup a Firebase Project in the Firebase console, create a (realtime) database there and add this set of data.

Installing the Firebase CLI

You’ll need the Firebase CLI to initialise your web app.  To do this, run this command on your command line or terminal.

This will provide you with the globally accessible  firebase  command.

Initialising your project with Firebase Init

From here, use your command line to navigate to the directory where you want to make your project. Once there, run the command  firebase init  and you’ll be greeted by this sweet ascii art.

You’ll then be given a series of configuration choices. Where it asks for what features I want to setup, I always tend to include Firebase Hosting on top of what features I’ll use because that sets up my index.html file for me, which makes things so much easier! For this tutorial, I’ll also be using Firebase Database.

For the rest of the configurations, you can leave everything to their defaults, and where it asks you if you want to make it a single-page app, you can choose either, but I find it’s cleaner if you choose no to this.

Setting up index.html

After initialising with Firebase Init, your project folder will be ready to open with the IDE of your choice. Go to index.html and you’ll find that the Firebase Init setup gave us quite a lot of code.

First, delete everything in your body tag except for the “message” div container itself. Later, we’ll be adding some text within this div.

Next, add these scripts (or npm if that’s your thing) in your head tag to add Angular, Firebase, and AngularFire to our website. It’s important that you add these on top of the other scripts already setup by Firebase Init, otherwise, our program won’t work properly.

Writing app.js

Calling Initialize App

Create a new file called app.js. Here, we’ll start by wrapping our code in an IIFE because JavaScript’s got that function, and that will cause this file to be ran automatically.

Next, we’ll need to create a config variable that will contain some key information our website will need to communicate with Firebase (which you can acquire from the console). We’ll then call  firebase.initializeApp(config) .

Now if you’re just looking on information about how to intialize Firebase in your website with Angular, the tutorial ends here. You can now use Firebase’s wide array of features. The rest of this tutorial will cover an example using the Realtime Database.

Setting up the Controller

Below intializeApp, we’ll need to setup Angular. First call  angular.module passing your app name (whatever you want to call it) and 'firebase'  as a dependency.

Next, initialise the controller passing the name of your controller (again, whatever you’d call it) and a function with $firebaseObject . This will allow us to get a JSON Object from a reference in our database we’ll be pointing to.

Within that controller function, add this code to get our references and attach the Firebase Object from our reference to  this.object (or whatever you want to call it). If done right, data from our database should now be attached to the controller.

Displaying our Data

Go back to index.html. In the head tag, add this script below the scripts you added earlier to attach our app.js file. Add the  ng-app="myFirebaseApp" directive inside the body tag. Then inside the div tag, add the  ng-controller="MyCtrl as ctrl" directive to allow elements in our div to access data from the controller.

Inside our div, within <pre> tags, we’ll add  {{ ctrl.object | json }} to display the object object we setup in our app.js file, and format it in json style as it should be.

And that’s it, we’re done! If all has been done right, your website should display this.

You may notice the $id and $priority fields. These are properties taken from and maintained by the database itself. You don’t need to worry about them.

Additional Resources

What you just read is essentially the same tutorial as a Youtube video by Firebase. You should go check it out!

There’s also a github repository that contains the source code for this tutorial by Luke Shlangen. Check that out as well!

Conclusion

I must admit, I’m pretty new to Angular. It’s pretty much a given that the methods and code here will improve and become more streamlined as I get better at it, but I think it’s this same reason that allows me to relate to what you wouldn’t easily understand.

So go check out the other articles in my blog if you want tutorials on using Firebase with Android, or keep coming back (and maybe subscribe) for more Android and Angular Firebase tutorials.