CRUD Operations in Angular Using ASP.NET Web API

The Code Points
0

CRUD Operations in Angular Using ASP.NET Web API

The Code Points 0 31

Implementing CRUD operations (Create, Read, Update, Delete) is an essential part of developing web applications. Combining Angular for the front end and ASP.NET Web API for the back end creates a powerful, dynamic system for managing and interacting with data. In this article, we will walk through how to perform CRUD operations in Angular by integrating it with ASP.NET Web API.

Whether you're building a small app or a complex enterprise system, mastering CRUD operations is crucial. This tutorial will guide you through setting up a simple full-stack application, implementing basic data operations, and connecting them via HTTP requests.

Why Use Angular and ASP.NET Web API for CRUD Operations?

  • Angular is a popular framework for building dynamic, single-page applications (SPAs). It provides powerful tools for managing data, handling user interactions, and communicating with APIs.
  • ASP.NET Web API is a framework for building RESTful APIs in C# and .NET. It is ideal for serving data to the front end, handling business logic, and interacting with databases.

Together, Angular and ASP.NET Web API create a seamless experience for implementing CRUD operations in a full-stack environment, making it easier to manage data and ensure real-time updates between the client and the server.

Setting Up the Environment

Before starting, ensure you have the following prerequisites installed:

  • Node.js (for Angular)
  • Angular CLI (for creating and managing Angular projects)
  • Visual Studio (for creating ASP.NET Web API projects)
  • .NET SDK (for building and running the Web API)
  • SQL Server or any other database for storing data

Creating the ASP.NET Web API

  1. Open Visual Studio and create a new project by selecting ASP.NET Core Web Application.
  2. Choose the API template to create a RESTful service.
  3. Name your project (e.g., CrudApi), and click Create.

Creating the Model:

In the Web API, you will need a model to represent the data. Let’s use an Employee model for this example.

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Position { get; set; }
    public double Salary { get; set; }
}

Creating the Controller:

Now, create an API controller to handle CRUD operations for the Employee model.

[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public EmployeeController(ApplicationDbContext context)
    {
        _context = context;
    }

    // GET: api/employee
    [HttpGet]
    public async Task<ActionResult<IEnumerable<Employee>>> GetEmployees()
    {
        return await _context.Employees.ToListAsync();
    }

    // GET: api/employee/5
    [HttpGet("{id}")]
    public async Task<ActionResult<Employee>> GetEmployee(int id)
    {
        var employee = await _context.Employees.FindAsync(id);
        if (employee == null)
        {
            return NotFound();
        }

        return employee;
    }

    // POST: api/employee
    [HttpPost]
    public async Task<ActionResult<Employee>> PostEmployee(Employee employee)
    {
        _context.Employees.Add(employee);
        await _context.SaveChangesAsync();

        return CreatedAtAction("GetEmployee", new { id = employee.Id }, employee);
    }

    // PUT: api/employee/5
    [HttpPut("{id}")]
    public async Task<IActionResult> PutEmployee(int id, Employee employee)
    {
        if (id != employee.Id)
        {
            return BadRequest();
        }

        _context.Entry(employee).State = EntityState.Modified;
        await _context.SaveChangesAsync();

        return NoContent();
    }

    // DELETE: api/employee/5
    [HttpDelete("{id}")]
    public async Task<IActionResult> DeleteEmployee(int id)
    {
        var employee = await _context.Employees.FindAsync(id);
        if (employee == null)
        {
            return NotFound();
        }

        _context.Employees.Remove(employee);
        await _context.SaveChangesAsync();

        return NoContent();
    }
}

The above controller exposes the CRUD operations for managing employee data in your Web API.

Creating the Angular  Project

Open a terminal window and create a new Angular project by running:
ng new crud-angular

Navigate to the project directory:
cd crud-angular

Install HttpClientModule in your Angular project to make HTTP requests. Open app.module.ts and import HttpClientModule:
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Angular Frontend: Implementing CRUD Operations

Now, let’s create services and components to interact with the ASP.NET Web API for CRUD operations.

Creating the Employee Service:

Create a service file called employee.service.ts to handle API requests.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Employee } from './employee';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private apiUrl = 'https://localhost:5001/api/employee'; // URL for the Web API

  constructor(private http: HttpClient) { }

  getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(this.apiUrl);
  }

  getEmployee(id: number): Observable<Employee> {
    return this.http.get<Employee>(`${this.apiUrl}/${id}`);
  }

  addEmployee(employee: Employee): Observable<Employee> {
    return this.http.post<Employee>(this.apiUrl, employee);
  }

  updateEmployee(employee: Employee): Observable<void> {
    return this.http.put<void>(`${this.apiUrl}/${employee.id}`, employee);
  }

  deleteEmployee(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`);
  }
}

Creating the Employee List Component:

Create a component called employee-list.component.ts to display and manage the list of employees.

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from './employee.service';
import { Employee } from './employee';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  employees: Employee[];

  constructor(private employeeService: EmployeeService) { }

  ngOnInit(): void {
    this.loadEmployees();
  }

  loadEmployees(): void {
    this.employeeService.getEmployees().subscribe(data => {
      this.employees = data;
    });
  }

  deleteEmployee(id: number): void {
    this.employeeService.deleteEmployee(id).subscribe(() => {
      this.loadEmployees();
    });
  }
}

Employee List Template (HTML):
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Salary</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let employee of employees">
      <td>{{ employee.name }}</td>
      <td>{{ employee.position }}</td>
      <td>{{ employee.salary }}</td>
      <td>
        <button (click)="deleteEmployee(employee.id)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

Conclusion

Integrating Angular with ASP.NET Web API for CRUD operations allows you to build efficient and scalable full-stack web applications. By following the steps outlined in this guide, you’ve learned how to implement Create, Read, Update, and Delete operations in both the backend and frontend. This foundational knowledge can be applied to a variety of web application projects, making it an essential skill for full-stack developers.


Tags:

Post a Comment

Previous Post Next Post