[Debug Mode] Angular Nodejs MySQL Pagination Sorting Filtering RestAPIs - Express + Sequelize ORM
[Debug Mode] Angular Nodejs MySQL Pagination Sorting Filtering RestAPIs - Express + Sequelize ORM
Article: Angular 10 Nodejs Pagination RestAPIs + Filtering Sorting Example – Fullstack: Angular + Nodejs RestAPIs+ MySQL Tutorial
https://loizenai.com/angular-10-nodej...
I. Architecture Design Angular Node.js Application
In the tutorial, We develop 2 projects:
1 - Backend Project – Nodejs MySQL Pagination Application gets data from MySQL database then provides RestAPIs with pagination, filtering and sorting function for frontend
2 - Frontend Project – Angular Application use HttpClient to fetch data from Backend Application then shows them in Bootstrap table with pagination, filtering and sorting functions
II. Goal
– Make a request at API: /api/customers/pagefiltersort with pagination, filtering and sorting params as below:
page: 0 – first page
size: 5 – size of a page
salary: 4000 – filtering by salary field
agesorting: true – sorting by age
desc: true – descending or ascending sorting
III. Overall Node.js Sequelize MySQL Pagination
To handling Pagination RestAPI requests and do Paging Filtering and Sorting queries with MySQL database, we create a backend web Node.js application with 4 main points:
1. To handle pagination RestAPI requests with Node.js, We use Express framework.
2. To do pagination filtering and sorting queries with MySQL database, We use Sequelize ORM.
3. We define all RestAPI URLs in router.js.
4. We implement code how to process each paging filtering and sorting RestAPI request in controller.js file.
IV. Nodejs Sequelize Pagination Queries
To do the pagination with database, Sequelize ORM provides 2 model methods for supporting the purpose with limit and offset parameters:
.findAll() – Search for multiple elements in the database
.findAndCountAll() - Search for multiple elements in the database, returns both data and total count
V. Create Angular Project
We create an Angular Pagination Application with 2 main blocks:
1. CustomerService is used to fetch data through Angular HTTP Client
2. TableComponent is used to display data with pagination, filtering and sorting view
– We implement a component: angulartable with 2 files angulartable.component.html and angular.component.ts to display data on web.
– We implement a service customer.service.ts using Httpclient to interact with SpringBoot restPAPI to fetch data with pagination, filtering and sorting.
– We define 2 helpful class customer.ts and message.ts for mapping data with RestAPIs.
VI. Related posts:
1. Nodejs JWT Authentication Example – Express RestAPIs + JSON Web Token + BCryptjs + Sequelize + MySQL/PostgreSQL
https://loizenai.com/nodejs-jwt-authe...
2. Angular & Nodejs JWT Authentication fullstack Example | Angular 6, 7, 8, 9 – Express RestAPIs + JWT + BCryptjs + Sequelize + MySQL/PostgreSQL
https://loizenai.com/angular-nodejs-j...
3. Nodejs MySQL Pagination Filtering Sorting Tutorial – Stack: Express RestAPIs + Sequelize ORM + MySQL database Examples
https://loizenai.com/tutorial-nodejs-...
VII. Structure Video for Angular Nodejs MySQL Pagination RestAPI
0:0 - Introduce results of projects
0:14 - Review Overview of Article
https://loizenai.com/angular-10-nodej...
1:26 - Download Sourcecode
1:48 - Install needed dependencies for Nodejs Project
2:10 - Import nodejs pagination project to Visual Studio Code
2:21 - Reivew project structure of Nodejs Pagination RestAPIs project
3:26 - Start Debug Nodejs project
3:40 - Check customers table in MySQL database and prepare data for processing
4:19 - Start debug code with Pagination Filtering and Sorting with Nodejs restAPIs and Postman client
5:31 - Install needed dependencies for Angular Pagination Project
5:55 - Import Angular Project to Visual Code Studio
6:07 - Review Coding of Angular Project Structure
7:22 - Start Running Angular Project
9:02 - Start Expore Sourcecode of Angular project in Browser
9:21 - Start Debug Angular Project with Sourcecode - Loading Pagination data at the begin time
11:28 - Start debug with Pagination Bar when having any click event
12:25 - start Debug with NEXT Button in Pagination Bar of Angular Client
13:17 - Start debug with Previous Button of Pagination Bar in Angular Client
14: 29 - Start Debug with Filtering Age=3500
15:41 - Start Debug with Pagination and Filtering Age=3000
16:18 - Start Debug with Age Sorting - Pagination + Filtering and Sorting with Age ASC direction
18:11 - Start Debug with Age DESC Sorting - Pagination + Filtering Salary = 3500 + Age Sorting with DESC direction
----------------------------------
@Copyright by https://loizenai.com
Youtube loizenai
