AngularJS + Firebase = angularFire

This post is 4 years old. (Or older!) Code samples may not work, screenshots may be missing and links could be broken. Although some of the content may be relevant please take it with a pinch of salt.

In the previous few articles I explored some AngularJS functionality, how it can interoperate with a RESTful backend provided by node.js/express.js and m

MongoDB. During the research that I was doing I've come across Firebase - a cloud based service running on MongoDB that automatically synchronizes data between the clients and the server in the cloud. The Firebase team is very keen on writing modules that help people integrate their technology with AngularJS and they have done a really good work creating a library called angularFire. In this post I'm going to explore some of the capabilities of this library.

If you haven't already, please sign up for an account with Firebase, and once you've done that, we can put together a very basic application that writes/reads data from the database.

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body ng-controller="BookCtrl">
    <h1>angularFire test</h1>
    <ul>
      <li ng-repeat="book in books">: </li>
    </ul>
    <form>
      <input
        type="text"
        ng-model="newBook.author"
        placeholder="Author"
        autofocus
      />
      <input type="text" ng-model="newBook.title" placeholder="Title" />
      <button ng-click="add()">Add</button>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="https://cdn.firebase.com/v0/firebase.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/0.2.0/angularfire.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

app.js should have the following content:

var myapp = angular.module('myapp', ['firebase']);

myapp.controller('BookCtrl', [
  '$scope',
  'angularFire',
  function BookCtrl($scope, angularFire) {
    var url = 'https://<yourID>.firebaseio.com/';
    var promise = angularFire(url, $scope, 'books', []);
    $scope.newBook = {};

    promise.then(function () {
      startWatch($scope);
    });
  },
]);

function startWatch($scope) {
  $scope.add = function () {
    console.log($scope.newBook);
    $scope.books.push($scope.newBook);
    $scope.newBook = '';
  };
}

The above should result in a very basic HTML form and a list. Start adding Authors and Titles and you should see the list items expanding - please also monitor the Firebase UI. You should see something similar to this:

And there you have it, an easy way of storing data in the cloud using Firebase and manipulating that data with Angular.

I'd like to introduce one more feature of angularFire - angularFireAuth. AngularFire allows you to authenticate against the Firebase backend via various services such as:

  • Facebook
  • Twitter
  • GitHub
  • Persona
  • Email & Password

Most of the examples that I have seen are for the Facebook integration so I put together my version that uses the 'traditional' e-mail & password verification process. There are two ways of adding users for authentication purposes:

  1. Via the Firebase GUI - Click the 'Auth' icon on the left hand side and then select the Email & Password tab. First, make sure that the 'Enabled' checkbox is checked. On the same form below, you can start adding users - this is the manual process.
  2. Via code - in order for this to work, you still need to enable the email & password authentication via the checkbox mentioned in the previous point. Let's investigate how to register users via angularFire

Please add the following line to your index.html:

<script
  type="text/javascript"
  src="https://cdn.firebase.com/v0/firebase-simple-login.js"
></script>

Add the following to a new javascript file:

var ref = new Firebase("https://<yourID>.firebaseio.com");
var authClient = new FirebaseSimpleLogin(ref, function(error, user) {
  if (error) {
    console.log(error);
    return;
  }
  if (user) {
    console.log(user + " is logged in.");
  } else {
    console.log("user is loged out.");
  }
}

To register a user, you can create a form on the front-end and then process the 'click' event in your javascript in the following way:

var email = $('#email').val();
var password = $('#password').val();
authClient.createUser(email, password, function (error, user) {
  if (!error) {
    console.log('User Id: ' + user.id + ', Email: ' + user.email);
  } else {
    console.log(error);
  }
});

In a coming article I will investigate angularFireAuth.