4elements, web design and consultancy

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.

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:

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.

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.

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!