Advertisement
  1. Code
  2. AngularJS
Code

Creating a Web App From Scratch Using AngularJS and Firebase

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a Web App From Scratch Using AngularJS and Firebase.
Creating a Web App From Scratch Using AngularJS and Firebase: Part 2

In this series, we'll be using AngularJS and Firebase to create a simple web application from scratch. It will be a simple blogging application where the user can sign in or sign up and publish a blog post.

This tutorial assumes you have basic knowledge of AngularJS, but it shouldn't be tough to pick up the topics along the way.

Introduction to AngularJS

AngularJS is one of the most sought-after JavaScript MVC frameworks. It's a structural framework for creating dynamic web applications by extending HTML capabilities. Features like data binding and dependency injection makes it easier to develop apps with less code.

From the AngularJS documentation:

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Introduction to Firebase

Imagine creating a web application without having to worry about the back-end side. Firebase makes it possible to sync data in real time with our application without bothering about the back-end. All we need to do is make some API calls.

Firebase is a powerful API to store and sync data in real time. Combining the power of AngularJS two-way data binding with Firebase results in a three-way synchronization which is quite awesome.

Getting Started With AngularJS

The angular-seed project is a boilerplate to get started with creating web apps using AngularJS. Download or clone the angular-seed project from the repository. 

Navigate to the project directory and install the required dependencies.

Start the node server:

Point your browser to http://localhost:8000/app/index.html and you should see the default app running.

Navigate to the app directory inside angular-seed. This is where the application code resides. Inside the app folder you'll find app.js which is the core of the app. We'll declare all the app-level modules and routes inside this file. By default, the angular-seed project has two views, view1 and view2. Delete the folders view1 and view2 from the app folder. 

Let's start from scratch. Open up app.js and remove the existing code. In app.js we'll be defining our application routes, for example, how to handle a request like /home. In order to define routes, we'll need an AngularJS module called ngRoute. To use ngRoute we first need to inject it or add it into our application. We'll use angular.module to add the ngRoute module to our app as shown below: 

The ngRoute module has a component called $routeProvider which is useful for configuring routes. We'll inject $routeProvider into the config method of angular.module and define our routes in its callback function as shown below:

Next, open up index.html and remove the script references to view1 and view2. Remove everything from the body of index.html except the script references and the div shown below with the ngView directive. 

ngView is a directive which helps to render the view attached with a particular route into the main layout, index.html. So each time the route changes, the content of the above shown div changes.

Now let's create a new view for the user to sign in. Inside the app directory create a new folder called home. Inside home, create two files called home.html and home.js. Open up home.html and include the following HTML code:

As seen in the above code, we'll be using Bootstrap to create our application views.

Inside home.js, we'll declare the routes for the application to access the home view. $routeProvider  has a method called when, which we'll use to create a route for our home view. When defining a new route, we'll set a templateUrl which would be rendered in the index.html. Along with that, we'll also set a controller for the newly created $scope of the home view. A controller is a logic which controls a particular view. Here's how it should look:

Now open up app.js and include the home module myApp.home in the app. Also declare the default route of our application using the $routeProvider.otherwise method to the home view.

Next, in order to display the homepage, we need to include home.js inside the main HTML template file of the app. Open up index.html and include the following:

Restart the server and point your browser to http://localhost:8000/app/index.html and you should see the sign-in screen:

AngularJS  Firebase

Getting Started With Firebase

In order to get started, we'll need to register for a free account on Firebase. On successful signup, we'll get a screen like this:  

Firebase Dashboard

Make a note of the URL of the app created and click on the Manage App button. We'll be using this Firebase URL to interact with the Firebase database.

We'll be using Firebase to authenticate our application using an email and password. In order to get it working, we need to enable it from Firebase. From the dashboard, click on the Login & Auth tab in the left-side menu. In that screen, under the Email & Password tab, check Enable Email & Password Authentication as shown:

Enable Email  Password Authentication

Add a new user with an Email and Password against which we'll authenticate after implementing the sign-in functionality.

Add a new user with an Email and Password

Implementing Sign-In Functionality

In order to get started with using Firebase, include the following scripts in app/index.html:

Next, we need to inject the firebase module in home.js. Add the firebase module in home.js as shown below:

Now we are ready to interact with Firebase. Open up home.js and inside HomeCtrl, create a new function called SignIn to authenticate the user. We'll be using $scope to create the new function. $scope is an object that refers to the application model, and also acts as glue between the application controller and the view. Hence we'll inject the $scope object into the SignIn function so that the object model from view is accessible inside the SignIn function.

Next, inside HomeCtrl create a Firebase instance using the Firebase URL as shown:

The $firebaseSimpleLogin module is used to authenticate against Firebase using an email ID and password. To use it, we'll need to inject the $firebaseSimpleLogin module into HomeCtrl as shown:

Using firebaseObj create a $firebaseSimpleLogin instance as shown:

Now, using the $login API, we'll authenticate the email ID and password against Firebase. loginObj.$login takes in the email and password as parameters. On successful authentication, we get a success callback and on an unsuccessful authentication, we get an error callback. 

Now for all the above controller code to work, we need to attach the controller to the view. AngularJS provides a directive called ngController to attach a controller to a view. Open up home.html and add the ngController directive to the body element to attach it to HomeCtrl.

We need the email and password values to be accessible inside the SignIn controller function. AngularJS provides a directive called ngModel to bind its value to $scope so that it's accessible inside the SignIn function. Include the ngModel directive to the email and password input elements as shown:

Finally, add the ngClick directive to the sign-in button to call the SignIn function:

Save all the changes and restart the server. Point  your browser to http://localhost:8000/app/index.html#/home and try to sign in using the email ID jay3dec@gmail.com and password jay. On successful user authentication, you should see the message Authentication successful in the browser console.

Conclusion

In this tutorial, we reviewed how to get started with creating an AngularJS web application. We implemented the sign-in functionality and successfully authenticated the user against the Firebase database. 

In the second part of this tutorial, we'll take this to the next level by implementing validations, sign-up functionality, and some other features. Code from the above tutorial is available on GitHub.

Do let us know your thoughts in the comments below.

Also, be sure to check out the wide range of AngularJS resources on Envato Market. There's everything from CRUD table directives to ticketing systems and more.

AngularJS resources on Envato Market
AngularJS resources on Envato Market
Advertisement
Advertisement
Looking for something to help kick start your next project?

Envato Market has a range of items for sale to help get you started.