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.
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
- Add new book data.
- Edit existing book data.
- Delete existing book data.
- 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.
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.
- List of all books with it’s details.
- Add new book data.
- Edit existing book data.
- Delete existing book data.
- Pagination For ‘n’ numbers of books.
- Search for required books.
Angularjs Libraries used in App
Below 2 angular js libraries which we have used in our app.
- Angular Loading Bar
- Pagination Directive
Meet Mukul, a passionate visionary and a dedicated 3D printing enthusiast. With an insatiable curiosity for technology and a flair for creativity, Mukul has discovered a world where innovation knows no bounds. Armed with a deep understanding of 3D printing and its endless possibilities, he has become a true pioneer in the field, constantly pushing the boundaries of what can be achieved with this remarkable technology.
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.
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.