MEAN Stack Tutorial with CRUD Operations

Posted at: May 11, 2020 7:02 PM

In this MEAN Stack Tutorial I am going to create CRUD operations. I will take an example of creating, edit, delete and list view of products. I am using MySQL Database for storing data. In this tutorial create a product API in Node.js and work on product module in Angular Application.

Need to see previous lessons in our MEAN Stack Tutorial for more details.

Creating API in Node.js

Install dateformat module for change date format.

product-model.js

Creating a models/product-model.js and write database related queries. Import db.js file for database connection.

models/product-model.js

product.js

Create a file routes/product.js and import file product-model.js for accessing different model methods of add, edit, delete etc.

routes/product.js

app.js

Import file routes/product.js in app.js and create route.

Complete code of app.js

Database

For database need to check first lesson MEAN Stack with MySQL

Angular Application

Angular application already created with modules. In this lesson we will work only on product module. Need to see previous lessons MEAN Stack Tutorial for more details.

Create components, service and interface using below commands.

Create two components product-list and create-product for product listing and add or edit product

Create service for connect node.js product api.

Create interface for define product fields.

Product Module

import { ReactiveFormsModule } from '@angular/forms'; in src/app/product/product.module.ts for creating reactive forms.

src/app/product/product.module.ts

Product Module Routing

Create routing of product module for add, edit and show product list. And activate guard in routing to access only authorized user.

src/app/product/product-routing.module.ts

Model

Edit product interface for typed data and define all product fields.

src/app/product/models/product.ts

Service

Edit ProductService to integrate the Node.js product API.

src/app/product/services/product.service.ts

Product List Component

Edit ProductListComponent to show the products in tabular form.

src/app/product/product-list/product-list.component.ts
src/app/product/product-list/product-list.component.html

Create Product Component

Edit CreateProductComponent to add or edit product.

src/app/product/create-product/create-product.component.ts
src/app/product/create-product/create-product.component.html

Backend Header

Add link in product and dashboard menu item.

src/app/shared/backend-header/backend-header.component.html

Conclusion

In this tutorial we have learnt CRUD Operations in MEAN Stack Tutorial with the help of product example for adding, edit, delete, tabular view.

This lesson also available on YouTube
mean stack tutorial angular 9 mean crud operations crud operations in angular crud operations in nodejs mean stack crud example

More Posts - MEAN Stack

Please leave comments

2 Comments