Angular.js Firebase

  Firebase is a mobile and web application development platform. It is developed by Firebase inc. In the beginning it was a chat API that enables developers to integrate online chat functionality into their websites, then Firebase released their real-time database. When we use Firebase as a back-end with Angular.js we don’t have to worry about the back-end side. It syncs data in real time with our application with the help of some API calls. Combining the two-way binding in Angular.js with Firebase will sum up in a three way synchronization.

For our example we are copying angular-seed project. Download or clone the project from git. Go to your project directory and install dependencies.

$ cd angular-seed
$ npm install             ## Install the dependencies
Start the node server and open your app in the browser. Go to app directory and open app.js file where we will declare our app modules and routes. There are two views in the angular seed project, delete them.To define routes we need Angular.js module called ngRoute. To add ngRoute to our app we will use angular.module.

angular.module('myApp', ['ngRoute'])
To configure routes we use $routeProvider. We will inject it into the config method of angular.module and then define our routes in the callback function.

'use strict';
 
angular.module('myApp', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
     // Routes will be here
}]);
Remove the script references to the default views in index.html. Except the script references and div remove everything from index.html. Create a new view for users to sign in. Create a home folder. In the folder create an html file and a .js file.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">
 
    <title>AngularJS & Firebase Web App</title>
 
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
 
    <link href="justified-nav.css" rel="stylesheet">
 
</head>
 
<body>
 
    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign Up</>
        </label>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>
 
    </div>
  
</body></html>
To access home view we’ll declare routes in home.js. In the controller write the logic.

'use strict';
 
angular.module('myApp.home', ['ngRoute'])
 
// Declared route 
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'home/home.html',
        controller: 'HomeCtrl'
    });
}])
 
// Home controller
.controller('HomeCtrl', [function() {
 
}]);
In the app.js home module include myApp.home. Then declare default routes using $routeProvider.otherwisemethod.
 'use strict';
 
angular.module('myApp', 
 ['ngRoute', 
 'myApp.home'           // Newly added home module
]).
config(['$routeProvider', function($routeProvider) {
    // Set defualt view of our app to home
     
    $routeProvider.otherwise({
        redirectTo: '/home'
    });
}]);
Include home.js inside the main HTML template file. In the index.html include the following script.

<script src="home/home.js"></script>
Restart the app and open the index page in the browser. You will see sign-in screen. In firebase register for a free account and on the redirected screen click on the manage app button. Using the firebase email and password authenticate the application. In the login&auth tab check the enable email and password. Add new users and authenticate.

Implementation

Add the below given script references in app/index.html file.

<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
In home.js add the firebase module as shown below.

angular.module('myApp.home', ['ngRoute','firebase'])
Now we are creating a sign in function to authenticate users inside HomeCtrl in home.js file. $scope is an object that refers to the application model, we are using it to create a new function.

$scope.SignIn = function($scope) {
    var username = $scope.user.email;
    var password = $scope.user.password;
     
    // Auth Logic will be here
}
Using firebase URL create firebase instance inside HomeCtrl.

var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com");
To use $firebaseSimpleLogin module inject it into HomeCntrl.

controller('HomeCtrl', ['$scope','$firebaseSimpleLogin',function($scope,$firebaseSimpleLogin) {
Using firebaseObj create a $firebaseSimpleLogin instance.

var loginObj = $firebaseSimpleLogin(firebaseObj);
Using $login authenticate with email id and password.

$scope.SignIn = function(event) {
    event.preventDefault();  // To prevent form refresh
    var username = $scope.user.email;
    var password = $scope.user.password;
     
    loginObj.$login('password', {
            email: username,
            password: password
        })
        .then(function(user) {
            // Success callback
            console.log('Authentication successful');
        }, function(error) {
            // Failure callback
            console.log('Authentication failure');
        });
}
Using ngController attach view to controller. Open home.html and add ngController to the body element.


<body ng-controller="HomeCtrl">
 
    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input ng-model="user.email" type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input ng-model="user.password" type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign Up</>
        </label>
        <button type="button" class="btn btn-lg btn-primary btn-block">SignIn</button>
      </form>
 
    </div>  
 
</body>
Lastly add ngClick directive to sign in button to call sign-in function. Save all the changes and open app/index.html#/home and using email id and password used to register in firebase try to sign in.

<button type="button" ng-click="SignIn($event)" class="btn btn-lg btn-primary btn-block">SignIn</button>