NodeJS/Express – POST/GET to MongoDB using Mongoose – AngularJS + Bootstrap form example

In the tutorial, we show how to POST/GET form data to/from MongoDB in NodeJS/Express application using Mongoose with AngularJS & Bootstrap view.

Related posts:
NodeJS/Express – POST/GET data to/from MongoDB using Mongoose – Ajax JQuery + Bootstrap form
Mongoose Many-to-Many related models with NodeJS/Express, MongoDB

Goal

Technologies
– NodeJS/Express
– Mongoose
– MongoDB
– AngularJS
– Bootstrap

We create a NodeJS/Express project as below structure:

Run above project then makes POST/GET requests, results:

-> Bootstrap view:

NodeJS-Express-AngularJS-Bootstrap-POST-GET-form-data-MongoDB-view

-> MongoDB’s collections:

NodeJS-Express-AngularJS-Bootstrap-POST-GET-form-data-MongoDB-collections

Practice

Setting up NodeJS/Express project

Create a folder: ‘NodeJS-Express-Ajax-JQuery-Bootstrap-MongoDB’:

Then init NodeJS project, see prompts:

-> Install Express, Body-Parser, Mongoose:

-> see package.json file:

Frontend
Create Bootstrap views

./view/index.html file:

./views/404.html file:

Implement AngularJS to Post/Get data

– For AngularJS Ajax POST/GET request, we implement a ./resources/static/js/controller.js file:

Backend
Create Mongoose model

./app/models/user.model.js file:

Configure MongoDB connection

./app/config/mongodb.config.js file:

Create Express Routes

./app/routes/user.route.js file:

Implement Controllers

./app/controllers/user.controller.js file

Implement App.js

./app.js file:

Run & Check results

Start NodeJS server:

-> Logs:

-> POST/GET requests:

NodeJS-Express-AngularJS-Bootstrap-POST-GET-form-data-MongoDB-requests

Sourcecode

To run below sourcecode, follow below guides:

-> Sourcecode:

NodeJS-Express-AngularJS-Bootstrap-MongoDB

By grokonez | May 7, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*