I went back to work on an old project that used Firebase's 2.4.2 library (as of this writing the newest library is 3.X, and there are some big changes between the two libraries. The key is that even though the syntax between the libraries is a little different, the underlying concepts are how you decide to use Firebase for your specific application are the same.
"Firebase" and "firebase".
I went back to my ng-nj project that was using Firebase's 2.4 sdk, and I was getting some really weird behavior. I had the project saved locally, and when I ran it with `gulp serve` it would work fine:
However, I would clone the exact same code out into another folder, and it would give me this error:
It turns out that in the 2.x library there is no little f "firebase". Doh! So let it be known that the 2.X library was all about the capital F "Firebase", and in order to use the little f one you need to have the 3.X library installed!
Initializing Firebase in 2.X
The 2.X Firebase library uses the capital F Firebase syntax, so let's go over that. You will need to reference your actual firebase url quite often so I recommend saving it as a constant. In AngularJS I normally put this in my index.constants.js file:
Then later inside one of your controllers, services, or directives you could create a firebase reference like this (notice the use of the capital "F" Firebase syntax) :
We can then utilize this reference later to take advantage of the various firebase services. Let's take a deeper look at doing that now!
The Firebase Database
Since inception in 2011, Firebase's main product has always been it's database service, and since 2012 it has been referred to as a "realtime database". Being as the database is such a critical service, the engineers put a lot of time into making a really nice syntax for interacting with it in AngularJS. The database in a NoSQL database with all of it's data stored as objects. In the firebase web console you can visually look at your database as a tree of nodes:
From the source code you can access any of these nodes as either an object or a list. Here's an example of how we might load a node as an object:
First, we pass the firebase reference into the $firebaseObject service, and then we wait for the $loaded() event to fire. We can load a node as a list in a similar manner but using the $firebaseArray service:
You can set a value in the database like so:
Authentication with Firebase 2.X
Authentication is also made easy in AngularJS with the Angularfire library. Remember the firebase reference we got in the initialization step? Well, you can just pass that into the $firebaseAuth service from Angularfire to get an authentication reference.
You can then call various authentication methods with that authentication object. For example, authWithPassword is a the method to send a username (or email address) along with a password to firebase so that it can try to authenticate the user.
User authentication is a notoriously difficult thing to get right and keep everything locked down & secure so it's nice to have a partner you can trust (Firebase) to handle all the nitty gritty details or keeping you user authentication secure.
A Sad Time for Firebase Storage
Strangely, there is no $firebaseStorage service that gets passed in a Firebase reference. Instead, the team recommends using the "firebase" object that can be found in the the 3.X Firebase library. Indeed, this means that you cannot access Firebase storage with the Firebase 2.X library. :'(
Firebase 2.X: Good Times, But Let's Move On
The posts on this site are written and maintained by Jim Lynch. About Jim...