Advertisement
  1. Code
  2. Angular
Code

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

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

In the previous part of this series, we saw how to create a blog post and display all the blog posts in the welcome page. In this part, we'll implement the edit and delete post functionality.

Getting Started

Let's start by cloning the previous 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.

Editing the Blog Post

Step 1: Adding Edit and Delete buttons

We'll start by adding edit and delete buttons to our blog posts. In the last tutorial, we displayed the blog posts in the welcome page. Let's add an Edit and a Delete button to the blog posts. 

Navigate to app/welcome/ and open up welcome.html. We used the bootstrap list-group component to display the blog posts. Add the following HTML code to the list-group component to display an Edit and a Delete button.

Save the changes and restart the server. Log in using a valid email address and password and you should be able to see the below screen:

Blog post with Edit and Delete

Step 2: Show the Edit Popup on Click 

We'll be using a Bootstrap JavaScript component called Modal popup. In order to use Bootstrap JavaScript components, include the jQuery and Bootstrap scripts in index.html.

Once the scripts references are included, add the following popup HTML code to app/welcome/welcome.html.

Next, modify the Edit button HTML code to include data-toggle and data-target to make the popup show on click.

The data-target attribute points to the ID of the HTML element which needs to be shown in the modal popup.

Also add an onclick event to the Edit button parent anchor tag as shown:

Save the changes, restart the server, and try to log in. When you're on the welcome page, click on the Edit button and you should have the popup displayed.

Edit Blog post Pop up

Step 3: Populate the Edit Popup 

Each entry in Firebase has a unique ID, which we'll use to fetch the particular record details from Firebase. In order to query Firebase with the unique ID, we need to have that ID. In the previous tutorial, we queried Firebase and rendered the returned result in our welcome page. Here is how we rendered the result : 

Now remove data-toggle="modal" from the Edit button. We'll trigger the modal popup from our controller. 

Inside app/welcome/welcome.js, add an editPost function which we'll call on Edit button click. Earlier, we used the Firebase URL https://blistering-heat-2473.firebaseio.com/Articles to fetch all articles from Firebase. In order to fetch a particular record from Firebase, we'll need to append the unique ID of the article, like https://blistering-heat-2473.firebaseio.com/Articles/-JdMk7taYJCLZg9DfMJg

So we'll create the Firebase object using the unique ID specific URL, and then reference it to fetch the article details as an object. Here is how the editPost function looks:

Open up welcome.html and add an ngClick directive to the Edit button. While adding the ngClick function call to editPost, pass the unique ID of the article as shown below:

Next, we need to populate the details of the fetched articles in the modal popup. Since the details are in $scope.postToUpdate, we'll bind it to the modal using the ngModel directive. Add the ngModel directive to the post and title text area as shown below:

Save all the changes and restart the server. Try to sign in using a valid email address and password. Once signed in, click the Edit button and you should have the modal popup populated with the article details.

Update the Blog post

Step 4: Implement the Update Functionality

Next we'll implement the update functionality. When the article has been populated in the edit modal popup, the user can modify the title or post and click Publish. Once Publish has been clicked, we need to update the details in Firebase.

First, add the ngClick directive to the Publish button.

Open app/welcome/welcome.js and add an update function call which is called on Publish button click. Inside the update function, we need to create a Firebase object using the Firebase URL appended by the unique article ID.

Using the fb object, create a $firebase object.

Using the article object, we'll call the update API to update the changes to Firebase.

Once the update is successful, close the modal popup. Add the following code to update success callback.

Here is the full update function:

Save all the changes and restart the server. Try to sign in using a valid email address and password. Once signed in, try editing and updating a post.

Deleting the Blog Post

Next, let's implement the delete post functionality. Before deleting a post, it's apt to show a confirmation popup, so let's start with that.

Step 1: Show Delete Confirmation Popup

Here also we'll be using a Bootstrap modal to show a confirmation popup. Add the following HTML code to welcome.html:

Now, modify the Delete button to add a data-toggle and data-target attribute as shown below:

The data-toggle attribute triggers the modal popup, and the data-target attribute identifies which HTML block to show as the modal popup. 

Save the changes and restart the server. Sign in and click the Delete button and you should see the delete confirmation popup.

Delete Blog post pop up

Step 2: Delete the Post

Now, in order to delete the blog post we need to retrieve the article from Firebase. Once we have the ID, if the user clicks Delete from the modal popup, we'll remove the article from Firebase.

So, first remove the data-toggle attribute from the Delete button, since we'll trigger the modal popup from the controller once the article has been fetched. Also, add an ngClick directive to the Delete button.

Inside app/welcome/welcome.js, create a new function called confirmDelete, which will trigger the modal popup and also fetch the article from Firebase. Here is what the confirmDelete function looks like:

As seen in the above code, we have created the Firebase object using the article ID. Using $firebase we have retrieved the article object. Using this article object we'll be able to remove the article from Firebase.

Next, add another function called deletePost, which we'll call once the user confirms the article deletion. In the confirmDelete function we have already assigned the article object to $scope.postToDelete. In the deletePost function we'll use the $scope.postToDelete object to refer to the article and remove it from Firebase. Here is how the deletePost function looks:

We have used the $remove API method to remove the article from Firebase. On successful deletion, we have also toggled the visibility of the delete confirmation popup.

Add the ngClick directive on the Delete button in the delete modal popup.

Save all the changes and restart the server. Sign in using a valid email address and password. Once logged in, try to delete an article.

Wrapping Up

In this tutorial, we saw how to edit and delete the blog posts added in Firebase using API methods. In the next part of the tutorial, we'll try to integrate Ladda loading indicators into our application. We'll also fix some small issues existing in our application.

Do let us know your thoughts in the comments below!

Source code from this tutorial is available on GitHub.

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.