MEAN Tutorial (Part 4) : Build Front-end in AngularJs

In this final part of the MEAN stack series, we will design the front-end of our application using AngularJS. We have already learned how to set up MongoDB and created web APIs using Node.js and Express 4. Now, we will create a user-friendly interface for our book application.

Folder Structure

The folder structure for our Book app is organized in a way that separates different aspects of the application for easy navigation and maintenance. This structure includes separate folders for the app, templates, and other necessary files.

Main App View

The main app view serves as the foundation for our application. All other views will be loaded into it. We use AngularJS’s routing feature to load different views based on the user’s actions. The UI-router is a powerful third-party library for routing in Angular applications. It allows us to easily change templates and pages, without reloading the whole page.

List of All Books with Their Details

We create a controller for showing the book list, book-list, which calls a GET API to fetch all the book data stored in the database. The data is assigned to $scope.booklist and interacts with the UI side in a table.

Adding New Book Data

We create a form that allows users to add new books. This form includes fields for the book name, author name, and price. When the user submits the form, we call a function that sends a POST request to our API to add the new book to the database.

Editing Existing Book Data

We also create a form that allows users to edit existing books. This form is pre-filled with the current details of the book. When the user submits the form, we call a function that sends a PUT request to our API to update the book in the database.

Deleting Existing Book Data

We add a delete button to each row in the book list. When the user clicks this button, we call a function that sends a DELETE request to our API to remove the book from the database.

Searching for Required Books

We implement a search feature that allows users to search for books by name or author. We use AngularJS’s filter feature to filter the book list based on the user’s search query.

Implementing Pagination

We implement pagination to limit the number of books displayed at once. We use the dirPagination directive from the angularUtils.directives.dirPagination module to add pagination controls to our book list.

Adding a Loading Bar

Finally, we add a loading bar to indicate when data is being loaded. We use the angular-loading-bar module to add this feature to our application.


This tutorial provides a comprehensive guide on building a front-end for a MEAN stack application using AngularJS. By following this tutorial, you will learn how to create a user-friendly interface for a book application, including listing all books with their details, adding new book data, editing existing book data, deleting existing book data, searching for required books, implementing pagination, and adding a loading bar.


Table of Contents

Related posts