CRUD Operation using MongoDB, Node.Js and Angular

In here, we are implementing a CRUD operation using the below tech stack and demonstrating the process flow and libraries used in these entire operations.

Technology Stack

1. MongoDB [Database]

2. Node.JS

3. Angular

What is MongoDB?

MongoDB is an open source, non-relational database management system (DBMS) that uses flexible documents instead of tables and rows to process and store various forms of data.

As a NoSQL database solution, MongoDB does not require a relational database management system (RDBMS), so it provides an elastic data storage model that enables users to store and query multivariate data types with ease. This not only simplifies database management for developers but also creates a highly scalable environment for cross-platform applications and services.

MongoDB documents or collections of documents are the basic units of data. Formatted as Binary JSON (JavaScript Object Notation), these documents can store various types of data and be distributed across multiple systems. Since MongoDB employs a dynamic schema design, users have unparalleled flexibility when creating data records, querying document collections through MongoDB aggregation, and analyzing large amounts of information.

What is Node.js?

Node.js is a free, open-source JavaScript runtime that runs on Windows, Mac, Linux, and more. It lets you execute JavaScript code outside of a web browser, enabling server-side development with JavaScript. Node.js excels at handling many simultaneous connections with minimal overhead, making it perfect for:

• Real-time applications (chats, gaming, collaboration tools)

• APIs and microservices

• Data streaming applications

• Command-line tools

• Server-side web applications

It uses an asynchronous (non-blocking), event-driven architecture, making it highly efficient for I/O-heavy workloads.

Node.js is used for various functionalities.

• Web Servers : Create fast, scalable network applications

• File Operations : Read, write, and manage files on the server

• Database Interaction : Work with databases like MongoDB, MySQL, and more

• APIs : Build RESTful services and GraphQL APIs

• Real-time : Handle WebSockets for live applications

• CLI Tools : Create command-line applications

In here, we are implementing an API by using libraries like Mongoose and Express to interact with MongoDB.

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.

Express.js is a minimal and flexible Node.js web application framework that provides a list of features for building web and mobile applications easily. It simplifies the development of server-side applications by offering an easy-to-use API for routing, middleware, and HTTP utilities.

We will be working on two projects, one on Node.js to interact with the database for implementing APIs, and another is on Angular, which takes care of the front-end process to implement a CRUD operation.

For Node.js, we will be initializing a project in the command line with a specific folder path. We will use the following command.

npm init –y

The above command will create a package.json file in that folder, which includes the initial versioning of the project.

We need to install the required libraries for the project by using the command below.

npm i mongoose express

We have to connect with the database by initializing the MongoDB connection string with the database using Mongoose.

Similarly, we need to create a route.js to handle all API requests using the Express.js framework.

Both of these component we need to call in another script.js file and run the project using the command.

Node script.js

Or

npm start [i.e. call the same above command to run the project mentioned in the package.json file] 

As we have an APIs running on port 3000 of localhost after running above project.

Now, we have to design and develop the front end with Angular, which includes screens like List of products, adding a new Product, and editing a Product.

Adding a new product.

Deleting the Product.

Editing the product

As we can check in the database, a new record was added and an existing record was updated successfully.

Likewise, we have performed the CRUD operation using different tech stacks to achieve it.

Note. You can download a zip file from the top of this article.