Build a web app using MEAN Stack : Overview

July 10, 2015
by Inaam Hussain

MEAN is a complete javascript based technology stack used to develop web applications. MEAN Stack refers to MongoDB, Express, Angularjs & Node js. These set of technologies work well with each other and using these we can build an entire web application from Database to UI using only javascript.
 

DEMO DOWNLOAD

 
In this tutorial we will build a simple book store app with MEAN. This app will display a list of book and will basically allow us to perform CURD operations on them.

Introduction

MongoDB

MongoDB is a documented oriented database, with high performance and easy scalability, it works well with programming languages and reduces the need for JOINS.

NodeJS

NodeJS is a platform built on Chrome’s javascript runtime. NodeJS is used for server side scripting and uses JavaScript. This allows you to code server scripts in pure JavaScript. NodeJS is event driven and has a non-blocking i/o model.

Express

Express is Fast, un-opinionated, minimalist web framework for Node.js. It helps organise you web-application into an MVC model architecture. We will use express to build REST APIs.

AngularJS

AngularJs is a JavaScript framework for building modern dynamic web-application. It is typically a SPA framework, and adds value to HTML. Its Two way data-binding and dependency-injection eliminate much of the code you would have to write otherwise.

App features

The demo app that we will build for this tutorial will have the following features

  1. Add new book data.
  2. Edit existing book data.
  3. Delete existing book data.
  4. Search for required books.

Technical Specifications

We will divide this article in 4 technical blocks to better grasp the concept of each technology involved.

Step1 : Setup & Connection of MongoDB

Here we will learn to install MongoDB into our system and also learn to setup connection. We will store all the data that will drive our Application using MongoDB.

READ FULL ARTICLE
 

Step2 : Build REST API’s with Node,Express & Mongo

The REST API lets you interact with Parse from anything that can send an HTTP request. There are many things you can do with the REST API.
Here we will install node, setup our express application and also build REST APIs required for our application, these APIs will be consumed by our Angular Application.
READ FULL ARTICLE
 

Step3 : Build Fornt-end in AngularJs

And then will Build an App using Angularjs Which will perform following operation/Functionality.

  1. List of all books with it’s details.
  2. Add new book data.
  3. Edit existing book data.
  4. Delete existing book data.
  5. Pagination For ‘n’ numbers of books.
  6. Search for required books.
MEAN Angular App

MEAN Angular App

Angularjs Libraries used in App

Below 2 angular js libraries which we have used in our app.

  1. Angular Loading Bar
  2. Pagination Directive

READ FULL ARTICLE
 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

4 comments

  1. ruts
    |

    when I click on add button no details are getting added

    • |

      Hi ruts,
      Can you please describe more on your problem. like what error you are getting?
      because i have checked and its working fine.
      Thanks.

  2. |

    Hi Inaam, I can install all mongodatabase but, when I ran node.server, cant access to views of app, when I write this link http://localhost:8080/editbook.html this message appears on my browser Cannot GET /editbook.html, I think my app dont gets the folder of views, the databse its works fine I can inserted some books, but dont load style and templates from the html views, can you help me! thanks a lot.
    Regards!

    • |

      Hi Leo Nardo,
      In this scenario both code is running independently. Backed code running on node sever as front-end runs with simple AngularJS. So you just have to install XAMPP server to run front-end code. which is basically run on apache server. if you want more information in detail, just draft me a mail.
      Thanks.

Leave a Comment