Angular with SQL Database Integration

In today’s web development environment, using a robust framework like Angular alongside a powerful database is crucial for building dynamic, responsive web applications. This article will guide you through integrating Angular with a SQL database, breaking down the steps into manageable sections for beginner developers.

I. Introduction

A. Overview of Angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Its rich set of features and powerful tools enable developers to create highly interactive and dynamic user interfaces.

B. Importance of Database Integration

Database integration allows applications to store, retrieve, and manipulate data efficiently. Having a solid understanding of how to connect Angular with a SQL database enhances the capabilities of web applications, enabling them to handle user data effectively.

II. Setting Up the Angular Project

A. Prerequisites

Node.js installed on your machine.
The Angular CLI installed globally. You can achieve this by running the following command:

npm install -g @angular/cli

B. Creating a New Angular Project

To create a new Angular project, open your terminal and run:

ng new my-angular-app

Follow the prompts to set your preferences. Navigate into the project directory with:

cd my-angular-app

Finally, start the development server with:

ng serve

III. Create a Sample Database

A. Designing the Database Schema

Before implementing the database, we need to outline our schema. For this example, we’ll create a simple User table.

Column Name	Data Type	Description
id	INT	Primary Key
name	VARCHAR(100)	User’s Name
email	VARCHAR(100)	User’s Email Address
age	INT	User’s Age

B. Creating Tables in SQL

For demonstration purposes, let’s assume we are using MySQL as our SQL database. Create the User table with the following SQL script:


CREATE TABLE Users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL UNIQUE,
    age INT
);

IV. Connecting Angular to SQL Database

A. Using REST API

To connect Angular to the SQL database, we typically use a REST API. This API will handle requests from the Angular application and interact with the database.

B. Setting Up Backend with Node.js

Install Express and MySQL by navigating to your backend directory and running:

npm install express mysql

Next, create a file named server.js and add the following code:


const express = require('express');
const mysql = require('mysql');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json());

// MySQL Connection
const db = mysql.createConnection({
    host: 'localhost',
    user: 'your_user',
    password: 'your_password',
    database: 'your_database'
});

db.connect(err => {
    if (err) throw err;
    console.log('MySQL Connected...');
});

// REST API for Users
app.get('/api/users', (req, res) => {
    db.query('SELECT * FROM Users', (err, results) => {
        if (err) throw err;
        res.json(results);
    });
});

// Start server
app.listen(3000, () => {
    console.log('Server running on port 3000');
});

V. Performing CRUD Operations

A. Create

To create a new user, you can add this POST route to your server:


app.post('/api/users', (req, res) => {
    const newUser = req.body;
    db.query('INSERT INTO Users SET ?', newUser, (err, result) => {
        if (err) throw err;
        res.status(201).json({ id: result.insertId, ...newUser });
    });
});

B. Read

This functionality is already covered in the GET route we created earlier. It allows us to retrieve all users from the database.

C. Update

To update a user’s information, add the following PUT route:


app.put('/api/users/:id', (req, res) => {
    const { id } = req.params;
    const updatedUser = req.body;
    db.query('UPDATE Users SET ? WHERE id = ?', [updatedUser, id], (err) => {
        if (err) throw err;
        res.json({ message: 'User updated' });
    });
});

D. Delete

Finally, to delete a user, include this DELETE route:


app.delete('/api/users/:id', (req, res) => {
    const { id } = req.params;
    db.query('DELETE FROM Users WHERE id = ?', [id], (err) => {
        if (err) throw err;
        res.json({ message: 'User deleted' });
    });
});

VI. Conclusion

A. Recap of Key Points

In this article, we covered the basics of setting up an Angular application, creating a sample SQL database, and establishing a REST API using Node.js. We also performed basic CRUD operations on our user data.

B. Future Trends in Angular and Database Integration

The integration of frameworks like Angular with databases is becoming increasingly sophisticated. Trends such as GraphQL and real-time databases may change how developers build applications in the future.

FAQs

1. What is Angular?

Angular is a web development framework used for building dynamic single-page applications.

2. Why use a SQL database?

A SQL database offers structured data storage, powerful querying capabilities, and data integrity features.

3. How does REST API work?

REST API allows communication between client and server using standard HTTP methods, returning data in a structured format like JSON.

4. What is CRUD?

CRUD stands for Create, Read, Update, and Delete – the four basic operations for data management.

5. Can I use other databases with Angular?

Yes, Angular can be connected to various databases, including NoSQL databases like MongoDB, depending on your application needs.

askthedev.com Latest Articles