Introduction
Angular.js has gained immense popularity among web developers due to its powerful features and ease of use. In this tutorial, we will explore how to implement CRUD (Create, Read, Update, Delete) operations using Angular.js 14. We will build a simple application that allows users to manage a list of items through a user-friendly interface.
To follow along with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, and Angular.js. Additionally, ensure that you have Angular.js 14 installed on your system.
You might also like
Setting Up the Project
To get started, we need to set up a new Angular.js project. Open your preferred code editor and follow these steps:
1. Create a new project directory for your CRUD application.
2. Open a terminal and navigate to the project directory.
3. Run the following command to create a new Angular.js project:
ng new crud-app
4. Once the project is created, navigate to the project directory:
cd crud-app
Creating the CRUD Components
Now that our project is set up, let’s create the necessary components for performing CRUD operations. Angular.js follows a component-based architecture, which allows us to organize and reuse code effectively.
1. Create the “item-list” component:
Open a terminal and run the following command:
ng generate component item-list
This command will generate the component files for displaying the list of items.
2. Create the “add-item” component:
Open a terminal and run the following command:
ng generate component add-item
This command will generate the component files for adding new items.
3. Create the “edit-item” component:
Open a terminal and run the following command:
ng generate component edit-item
This command will generate the component files for editing existing items.
## Implementing the CRUD Operations
Now that we have our components in place, let’s implement the CRUD operations using Angular.js 14.
Create Operation
The create operation involves adding new items to our application. In the “add-item” component, we will create a form with input fields to capture the item details. Upon submitting the form, we will handle the data and update the item list.
Open the generated HTML file for the “add-item” component (`add-item.component.html`) and replace the existing code with the following:
“`html
<h1>Add Item</h1>
<form (submit)=”addItem()”>
<label>Name:</label>
<input type=”text” [(ngModel)]=”name”>
<label>Description:</label>
<textarea [(ngModel)]=”description”></textarea>
<button type=”submit”>Add</button>
</form>
“`
In the component class for “add-item” (`add-item.component.ts`), add the following code:
“`typescript
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-add-item’,
templateUrl: ‘./add-item.component.html’,
styleUrls: [‘./add-item.component.css’]
})
export class AddItemComponent {
name: string = ”;
description: string = ”;
addItem() {
const newItem = {
name: this.name,
description: this.description
};
// Code to add the new item to the item list goes here
// Reset the form fields
this.name = ”;
this.description = ”;
}
}
“`
Read Operation
The read operation involves fetching and displaying the list of items. In the “item-list” component, we will create a table to display the items. Using Angular.js 14’s built-in HTTP module, we will make a request to retrieve the item data from an API or a local data source.
Open the generated HTML file for the “item-list” component (`item-list.component.html`) and replace the existing code with the following:
“`html
<h1>Item List</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor=”let item of items”>
<td>{{ item.name }}</td>
<td>{{ item.description }}</td>
<td>
<!– Edit button goes here –>
<!– Delete button goes here –>
</td>
</tr>
</tbody>
</table>
“`
In the component class for “item-list” (`item-list.component.ts`), add the following code:
“`typescript
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-item-list’,
templateUrl: ‘./item-list.component.html’,
styleUrls: [‘./item-list.component.css’]
})
export class ItemListComponent {
items: any[] = []; // Initialize an empty array to hold the items
// Code to fetch the items from the data source goes here
editItem(item: any) {
// Code to handle editing an item goes here
}
deleteItem(item: any) {
// Code to handle deleting an item goes here
}
}
“`
Update Operation
The update operation allows us to modify existing items. In the “edit-item” component, we will create a form similar to the “add-item” component. However, this form will be pre-filled with the existing item’s details. Upon submission, we will update the item in the item list.
Open the generated HTML file for the “edit-item” component (`edit-item.component.html`) and replace the existing code with the following:
“`html
<h1>Edit Item</h1>
<form (submit)=”updateItem()”>
<label>Name:</label>
<input type=”text” [(ngModel)]=”item.name”>
<label>Description:</label>
<textarea [(ngModel)]=”item.description”></textarea>
<button type=”submit”>Update</button>
</form>
“`
In the component class for “edit-item” (`edit-item.component.ts`), add the following code:
“`typescript
import { Component, Input } from ‘@angular/core’;
@Component({
selector: ‘app-edit-item’,
templateUrl: ‘./edit-item.component.html’,
styleUrls: [‘./edit-item.component.css’]
})
export class EditItemComponent {
@Input() item: any;
updateItem() {
// Code to update the item in the item list goes here
}
}
“`
Delete Operation
The delete operation involves removing an item from the list. In the “item-list” component, we will add a delete button for each item. Clicking on the delete button will prompt the user for confirmation and, upon confirmation, delete the item from the list.
Open the generated HTML file for the “item-list” component (`item-list.component.html`) and replace the existing code for the delete button column with the following:
“`html
<td>
<button (click)=”editItem(item)”>Edit</button>
<button (click)=”deleteItem(item)”>Delete</button>
</td>
“`
In the component class for “item-list” (`item-list.component.ts`), add the following code:
“`typescript
deleteItem(item: any) {
const index = this.items.findIndex(i => i.id === item.id);
if(index !== -1) {
this.items.splice(index, 1);
}
}
“`
Conclusion
In this article, we walked through the process of implementing CRUD operations using Angular.js 14. We set up a new Angular.js project, created the necessary components, and implemented functionalities for each CRUD operation. By following this example, you now have a solid foundation for building more complex applications using Angular.js.
Remember to explore Angular.js’s extensive features and experiment with different functionalities to enhance your web development skills. The possibilities are endless with Angular.js, and it continues to be a reliable choice for front-end web development.
