Home Node JS Nodejs Angular with MongoDb Crud App

Nodejs Angular with MongoDb Crud App

15 min read
0
0
1,861

This tutorial will teach you how to make Crud Application using Node JS with Angular JS Frontend application and Mongo DB Database using Api access Crudapplication.

First Step What you have to do is you to divide the Front-End and Back-End.

Front-End – Angular JS

BackEnd – Node JS

Create the folder myprojects. inside the folder Frond end project  you maintaining with the separate folder.
Backend project you maintaining with the separate folder.

Install Node JS

Create  a new Project type  the command on the command prompt.

Type the Command on Console.

and create your project. After project has been created you see the package.json file.

Then open the project in to the VS Code Editor by typing the following command

after open up the project in to the vscode editor

Install the Express Server as back end server

Install the mongoDB as database

First Create the Application server.js which manage the ports and libraries and database connection of the project.

we have created the datbase on mongoDB Compass  which name est.
attached the db connection below.

server.js

After that you can run the server type by the following command.
You can get the result as

DB Connectedddd
startedddddd

after that make the new folder route and inside the folder create the page route.js. route.js page which use to manage the all the restapis related to crud operations.

After that create the MVC Page.First Create the Controller Page

userController.js

userService.js

userModel.js

Angular

Angular is a front-end application we have already created the folder front end inside the folder open the command prompt and type the commands.

Installing Angular CLI

After that create the new Project of Angular running by the following command

Select the SCSS Style for the Advanced CSS and Press Enter Key.

After complete the installation then run the project using following command.

it will generate the url link to run the angular application.paste the url in to the browser

Now you see the Angular Welcome Page.

After that open the Angular project into VS code editor.

now you can see the following file structure

Creating a new Component Student Crud

After that install the Bootstrap by typing the following command

After installed you have to set the path in to style.scss file

app.module.ts

FormModule
HttpClientModule

add these module into the app.module.ts file  then only we will manage the forms and Http requests

After that open up the studentcrud.component.html

studentcrud.component.html

studentcrud.component.ts

i have attached the video link below. which will do this tutorials step by step.

 

 

    Load More Related Articles
    Load More By admin
    Load More In Node JS

    Leave a Reply

    Your email address will not be published.

    Check Also

    Node js React Mongodb Search Functionality

    In this articles will teach how to search records Node js React Express Mongodb.how the se…