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.
npm install -g firebase-tools
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.
<body>
<div id="message">
</div>
</body>
First, delete everything in your body tag except for the “message” div container itself. Later, we’ll be adding some text within this div.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/2.0.2/angularfire.min.js"></script>
$ npm install angularfire --save
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
(function() {
}());
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.
var config = {
apiKey: "YourApiKey",
authDomain: "your-database.firebaseapp.com",
databaseURL: "https://your-database.firebaseio.com",
storageBucket: "your-database.appspot.com",
};
firebase.initializeApp(config);
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
angular
.module('myFirebaseApp', ['firebase'])
.controller('MyCtrl', function($firebaseObject) {
});
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.
const rootRef = firebase.database().ref().child('angular');
const ref = rootRef.child('object');
this.object = $firebaseObject(ref);
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
<script src="app.js"></script>
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.
<body ng-app="myFirebaseApp">
<div id="message" ng-controller="MyCtrl as ctrl">
<pre>
{{ ctrl.object | json }}
</pre>
</div>
</body>
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.