What is MongoDB in the MEAN stack

The term MEAN stack refers to a collection of JavaScript based technologies used to develop web applications. MEAN is an acronym for MongoDB, ExpressJS, AngularJS and Node.js. From client to server to database, MEAN is full stack JavaScript. This article explores the basics of the MEAN stack and shows how to create a simple bucket list application.

Introduction

Node.js is a server side JavaScript execution environment. It’s a platform built on Google Chrome’s V8 JavaScript runtime. It helps in building highly scalable and concurrent applications rapidly.

Express is lightweight framework used to build web applications in Node. It provides a number of robust features for building single and multi page web application. Express is inspired by the popular Ruby framework, Sinatra.

MongoDB is a schemaless NoSQL database system. MongoDB saves data in binary JSON format which makes it easier to pass data between client and server.

AngularJS is a JavaScript framework developed by Google. It provides some awesome features like the two-way data binding. It’s a complete solution for rapid and awesome front end development.

In this article, we’ll be creating a simple CRUD application using the MEAN stack. So, let’s dive in.

Prerequisites

Before getting started, we need to install the various MEAN software packages. Begin by installing Node.js from the download page. Next, install download and install MongoDB. The install MongoDB page contains guides for setting up Mongo on a variety of operating systems. To make things easier, we’ll be starting from a MEAN boilerplate project. Simply clone the boilerplate repo and install the dependencies using npm as shown in the following listing.

This installs the required packages. Next, we need to set the default port on which MongoDB runs to as specified in the README file of the boilerplate. Open up the file and uncomment the line . Now, restart the server as shown below.

Next, from the project directory simply type . If all goes well, you will see a message like this:

Now that the server is running, navigate to in a browser to see the boilerplate app running.

Boilerplate Overview

We now have a fully functional boilerplate application. It has authentication implemented, including using social media login. We won’t be going much into that, but will be creating our own little app. If you have a look at the application structure, the folder contains our AngularJS front end and the folder contains our NodeJS backend.

Creating a Listing View

First, let’s start by creating our front end using AngularJS. Navigate to the folder. Create a new folder called , where we’ll keep our front end files. Inside the directory, create subdirectories named , , , and . Inside the folder also create a file named containing the following code.

Next, open and add the module . The modified portion should look like this:

Now, navigate to and add the route file to handle routing in our app. The code to accomplish this is shown below.

Inside create a file named . This is our view, which will display our bucket list. The contents of this file are shown below.

Also create a file named inside containing the following code.

Next, start the app using . Make sure that MongoDB is running too if it’s not already. Navigate your browser to , and you should see the list view that we created. If you are wondering about the in the url, it’s just done to separate the AngularJS and NodeJS routing.

Add to the Bucket List

Let’s create a view to add things to our bucket list. Inside add a new HTML file named containing the following code.

This code attaches the controller. Also note that on form submit, a method named is invoked. Next, let’s create a method named in the . The following code must be added to , as shown below. We have injected the service in the controller, which we need to interact with the back end.

The contents of are shown below.

We also need to add a route to add items to the bucket list. Modify , adding one more state as shown below.

Restart the server and navigate to . You should see the bucket list creation form. Unfortunately, it’s not yet functional. We need to create the back end too.

Creating the Back End

The bucket list should have a title, description, and status. So, create a new file called in , and add the following code.

We need to configure the Express route so that service calls from AngularJS are handled properly. Create a file named containing the following code.

requests to are handled by the method. This method belongs in the server controller, , that we still need to create. The contents of should look like this:

There’s still a lot to clean up, but we can check if its working as expected. When a user submits the AngularJS form, it calls the AngularJS service, which invokes the server side method, which then inserts the data into MongoDB.

After submitting the form, we can check if the data is properly inserted into Mongo. In order to check data in MongoDB, open another terminal and issue the following commands.

Creating the Bucket List View

First, add a new route in :

This new route calls the controller’s method. Add this method to , as shown below. This code finds the entries in the collection and returns them.

Next, add a new method in as shown below.

This code fetches the data from Mongo and saves it in our variable. Now, we just need to bind it to our HTML. This is done in :

Restart the server and navigate to . This should display the bucket list items. You can also try adding new items by clicking on the “Create” link below the list.

Conclusion

In this article, we focused on creating a simple app using the MEAN stack. We implemented adding an entry into MongoDB and displaying the entries from the DB. If you’re interested in extending this example, you can try adding the update and delete operations. The code from this article is available on GitHub.