RSS from Javabeginnerstutorial.com
“MEAN” stack is an open source JavaScript stack for building dynamic web applications. Its an acronym for MongoDB, Express.js, Angular and Node.js.
In this article, I am going to explain about developing a MEAN stack application from the scratch. I assume that the reader should have basic understanding of JavaScript. If not, Please familiarize yourself with Javascript.
Setup
First step is to install the MongoDB, Express.js, and Node.js in your system/laptop.
I assume that you are using Windows. If you use Ubuntu or Linux, then follow the necessary steps to install the MongoDB and Node.js
MongoDB:
Go to https://www.mongodb.com/download-center#community and download the installation package.
Run the installer file and complete the installation. By default it’s getting installed in C:\Program Files\MongoDB.
Create /data/db to store the data.
To start the MongoDB server, go to C:\Program Files\MongoDB\bin, then run mongod.exe. By default it’s running on 27017.
We can run the MongoDB client by running “mongo.exe” and type “show dbs” to list out the default database name.
Node.Js:
Go to https://nodejs.org/en/download and download the windows installer.
Run the installer file and finish the installation.
Open up Node.js command prompt, then verify the node and npm version(node -v and npm -v) to validate the installation.
Express.js
Open up Node.js command prompt and run the below command to install Express.js.
That’s it. We are done with the environment setup. Let’s move on to the application.
Application Flow
It’s a simple application for adding, viewing and deleting the user comments. While loading the home page, it will access the MongoDB and get the list of Comments. It also allows to add and delete the comments.
The directory structure is given below,
Start it from the “server.js”. This is the starting point of the application. In this file, we do the setup, database and routes configuration and finally starting the Node.js server. I have provided the enough comments in the below code section to help for more understanding.
server.js
Now let’s see the database configuration, Refer the file /config/database.js
Back End(Node.js)
Now let’s refer the routes.js where we define the REST services. We have three REST services, They are /api/comments/fetchAll, /api/comments/save and /api/comments/delete/:comment_id. So with the name itself, you can understand the purpose of each service.
Before going to these service, We have to create an object model with mongoose which is an object modeling tool designed to work in an asynchronous environment.
Refer the app/models/comment.js. Here I am creating a model object with userName and comment field.
comment.js
Now refer the routes.js. The first step is load the ‘Comment’ model and then use this model for adding, viewing and deleting the comments. I have provided enough comments in the code section itself. Hence go through it.
routes.js
We are done with the back end. Let’s move on to the Angular Front End code to know how these services are being used.
Front End(Angular)
The index.html and core.js are the core components of front end layer.
The core.js contains the angular controller code to access the REST services and populate the ‘formdata’. Here we create the Angular Module ‘commentModule’ and assign the ‘commentController’ to this. This controller is responsible for loading the comments while loading the home page, creating the comments and finally removing it.
core.js
index.html
We have to refer the ‘commentModule’ and ‘commentController’ from the index.html. So the ng-app directive refers the ‘commentModule’ and the ng-controller refers ‘commentController’ respectively. Next we have User Name and comment fields and check the ng-model for these fields and its getting mapped to formData.userName and formData.comment respectively. We use the ng-repeat directive to show the list of comments. While clicking on ‘Add’ button will call createComment() function which in turn call the REST (/api/comments/save) service and save the new comments on MongoDB. There is a checkbox which will be shown for each comment. If you click on given checkbox, it will call deleteComment() function which will delete that comment from MongoDB.
Now its time to run the application. Follow the below steps to do that.
Checkout the project from https://github.com/dkbalachandar/meanstack-comments-application
Type ‘npm install’ to install all the required modules.
Type ‘npm start server.js’ to run it.
If you would like to run this as a daemon process, then do below,
Install forever by running ” npm install -g forever”
Start the server by running “forever start server.js”
Stop the server by running “forever stop server.js”
Open up the browser and type http://localhost:8081
Refer below the screenshots taken.
Home Page
Try to add few comments
After adding few Comments, the top section shows the number of comments and the actual comments entered
Remove the first comment by clicking on the checkbox, so the first comment will be removed and remaining will be shown as below
Summary:
In this post, I have explained about developing a MEAN stack application with an example. Use the project as a model and feel free to update the code with creating some more services, changing the front end code and test it out.
Let me know if you have any questions.
The post Develop MEAN Stack Application appeared first on Java Beginners Tutorial.