Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Angular

Creating a Web App From Scratch Using AngularJS and Firebase: Part 4

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 3
Creating a Web App From Scratch Using AngularJS and Firebase: Part 5

In the previous tutorial, we implemented the sign-up functionality and also saw how to use AngularJS services to share data between controllers. In this part of the tutorial series, we'll be creating an interface for the logged in user to create a blog post.

Getting Started 

Let's start by cloning the third part of the tutorial from GitHub.

After cloning the source code, navigate to the project directory and install the required dependencies.

Once the dependencies are installed, start the server.

Point your browser to http://localhost:8000/app/#/home and you should have the application running.

Creating the Add Post Page

We need a page with which the user can create and publish blog posts. Let's add the require templates and files to create the Add Post page.

Navigate to the AngularJS_Firebase_Part3/app directory and create a folder called addPost. Inside addPost create an HTML file called addPost.html and addPost.js. In addPost.html add the following HTML code:

Inside addPost.js, we'll define the routes for the Add Post view. $routeProvider has a method called when, which we'll use to create a route for our addPost view. We'll set a templateUrl which would be rendered in the index.html. We'll also set a controller (logic which controls a view) for the newly created $scope of the addPost view. Here's how addPost.js finally looks:

Include the myApp.addPost module in app.js.

Also, add a reference to the addPost.js in the app/index.html page.

Save the changes, restart the server and point your browser to http://localhost:8000/app/#/addPost and you should be able to see the add post page.

Add Post page of AngularJS  Firebase app

Validating the Add Post Fields

First, we need to add an ngModel directive to the input text box and text area in the add post page to enable the two-way data binding.

When a user publishes a blog post, it should have a title and post. So we'll add validation to check if a blog post has title and post. If the title and post are provided, we'll enable the publish button and the user can publish his or her blog post. We'll use an ngDisabled directive to disable the publish button. Add the ngDisabled directive to the publish button as shown.

As seen in the above code, ngDisabled would disable the publish button when the title or post of the article is not provided.

Implementing the Add Post Functionality

Next, we'll save the title and post of the article to Firebase when the user clicks the publish button. In order to save the data to Firebase, we'll use the $push API.

Add the ngController directive to the body of addPost.html and also add the ngSubmit directive to the form in addPost.html.

Open up addPost.js and add a new function called AddPost inside the AddPostCtrl controller as shown:

We'll be needing $firebase to push data to Firebase Db, so inject the $firebase module in the AddPostCtrl controller.

Create a Firebase object using your Firebase URL.

Using firebaseObj we'll create an instance of $firebase which we'll use to push data to Firebase.

Read the title and post entered by the user using $scope

Since we have the title and post, we'll call the Firebase push API to save data to Firebase.

Now, save all the changes, restart the server, and try to add a new blog post. Once you've clicked the publish button, check the browser console for the reference object. After that, log into your Firebase account and you should be able to see the data.

Add Post data in Firebase

Wrapping It Up

In this part of the series, we created an interface to add or publish blog posts. In the next part of this series, we'll create an interface to fetch and display all the blog posts added by users.

Source code from this tutorial is available on GitHub. Do let us know your thoughts in the comments below!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.