Angular 15 with MySQL and Node.JS Back-End

In this tutorial, we'll learn how to use Node.js and MySQL to create a back-end for our Angular 15 front-end application. We'll also introduce the MySQL database for Angular developers and how to connect your app to a MySQL database using a Node.js backend.

MySQL for Angular Developers

One of the most widely used databases is MySQL. For so many years, it has been an excellent preference for web applications. MySQL is a relational database system that has proven to be a very convenient solution for web-based applications.

If you are familiar with the LAMP stack, you will recognize that M stands for MySQL. It was and continues to be utilized primarily in conjunction with PHP and the Apache web server for the development of server-side applications. LAMP (Linux, Apache, MySQL, PHP) is a web application development stack that stands for Linux, Apache, MySQL, and PHP. In this stack, PHP can be replaced by either Perl or Python, depending on your preferences.

MariaDB is currently the open-source counterpart to Oracle's MySQL, which seeks to retain all features free for the public. If you have recently installed MySQL on on your machine, most probably MariaDB.

MySQL is the database technology used by several well-known database-driven web applications, including WordPress, Drupal, and Joomla. Many prominent services, like Facebook, Twitter, and YouTube, rely on MySQL.

MySQL is also a relational database, which meaning that as a developer you must deal with SQL tables, which have fixed data structures that cannot be changed at will but only by completing specified migration operations. Database tables are made up of rows and columns that represent the real data and its kinds. Foreign keys may also be used to build relationships between tables.

A relational database is a kind of computer database that is founded on the relational data paradigm introduced by E. F. Codd in 1970. A relational database management system is a computer system that is used to administer relational databases (RDBMS). Many relational database solutions allow you to browse and manage the database using SQL (Structured Query Language).

In this tutorial, we'll walk you through the process of developing an angular 15 app with a MySQL database and Node, which is needed to interface and communicate between your front-end angular 15 app and your database, as the latter exists on a server and your front-end app runs on a client client browser. Node will provide a REST API, which your angular application may access using its HttpClient services. Node will handle executing SQL queries against the MySQL database and returning the results to the front-end as with http responses.

Because JavaScript/Angular aren't part of the LAMP stack, we'll use the MEAN stack, where the M in MEAN might refer to a MongoDB or MySQL database in our situation. E stands for Express, a Node.js framework that makes it simple to develop REST API back-ends, and AN stands for Angular.

We presume you have Node.js and npm installed on your development machine and are comfortable with using Node.js to create server-side applications.

Installing MySQL

Let's begin by installing and configuring MySQL on our development machine.

Simply go to the official website and follow the installation instructions to have MySQL installed on your machine.

You may also use the official package manager from your system distribution to setup the MySQL server and client.

Creating a MySQL database

If you've already installed MySQL, you'll need to create a database.

To connect to your MySQL server, go to your command-line interface and type the following command:

$ mysql -u root -p

To connect to the MySQL server, you will be asked for a password. This password was generated at the previous process of installing and configuring MySQL.

Then, use the following command to create a new database:

mysql> create database mydb;
mysql> use mydb;

Finally, you need to create the customers database table using the following SQL instructions:

create table customers (
  id INT AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL,
  phone VARCHAR(255) NOT NULL,
  description TEXT,
  dateAdded DATE,
  PRIMARY KEY (id)
);

We have created a database table for storing customers' data with columns such as id, name, email, phone, description, and dateAdded. The id column is the primary key of our SQL table.

Conclusion

At this point, we've set up our MySQL database and SQL table. In the next post, we'll look at how to build a Node.js app that connects to this database and provides APIs for reading, saving, updating, and removing data from our database, and then returns the result to our Angular 15 front-end application.

• Date: 20 Nov 2022