Estimated reading: 4 minutes 34 views

🔁 AngularJS CRUD Operations – Build Full-Stack Functionality with `$http` (2025 Guide)

🧲 Introduction – Why Learn AngularJS CRUD Operations?

CRUD stands for Create, Read, Update, Delete—the four essential operations for interacting with data in web applications. AngularJS, when combined with its powerful $http service, allows developers to implement full-featured CRUD interfaces seamlessly using RESTful APIs or backend endpoints.

Mastering CRUD in AngularJS helps you:

Build fully functional data-driven apps
Manage data from external APIs
Implement forms, tables, updates, and delete functionality with ease

🎯 In this guide, you’ll learn:

How to implement CRUD operations using AngularJS
Real examples for GET, POST, PUT, DELETE
How to organize logic into controllers and services
Tips for managing UI and state updates

⚙️ Tools Required

AngularJS Library
Backend API (e.g., Node.js, PHP, Firebase, etc.)
REST endpoints like /users, /users/:id

📦 Sample CRUD App Structure

angularjs-crud-app/
│
├── index.html
├── app.js
├── controllers/
│   └── userController.js
├── services/
│   └── userService.js
├── views/
│   ├── user-list.html
│   ├── user-form.html

✅ Step 1: Create the AngularJS App

var app = angular.module('crudApp', []);

✅ Step 2: Create a Reusable UserService

app.service("UserService", function($http) {
  var apiUrl = "https://api.example.com/users";

  this.getAll = function() {
    return $http.get(apiUrl);
  };

  this.getById = function(id) {
    return $http.get(apiUrl + '/' + id);
  };

  this.create = function(user) {
    return $http.post(apiUrl, user);
  };

  this.update = function(user) {
    return $http.put(apiUrl + '/' + user.id, user);
  };

  this.delete = function(id) {
    return $http.delete(apiUrl + '/' + id);
  };
});

✅ Step 3: Create the Controller

app.controller("UserController", function($scope, UserService) {

  // READ - Get all users
  $scope.getUsers = function() {
    UserService.getAll().then(function(response) {
      $scope.users = response.data;
    });
  };

  // CREATE or UPDATE
  $scope.saveUser = function() {
    if ($scope.user.id) {
      UserService.update($scope.user).then(function() {
        $scope.getUsers();
        $scope.user = {};
      });
    } else {
      UserService.create($scope.user).then(function() {
        $scope.getUsers();
        $scope.user = {};
      });
    }
  };

  // DELETE
  $scope.deleteUser = function(id) {
    if (confirm("Are you sure?")) {
      UserService.delete(id).then(function() {
        $scope.getUsers();
      });
    }
  };

  // LOAD USER FOR EDIT
  $scope.editUser = function(user) {
    $scope.user = angular.copy(user);
  };

  // Initial fetch
  $scope.getUsers();
});

🖥️ HTML View – `index.html`

<!DOCTYPE html>
<html ng-app="crudApp">
<head>
  <title>AngularJS CRUD</title>
</head>
<body ng-controller="UserController">

  <h2>User Form</h2>
  <form ng-submit="saveUser()">
    <input type="text" ng-model="user.name" placeholder="Name" required>
    <input type="email" ng-model="user.email" placeholder="Email" required>
    <button type="submit">Save</button>
  </form>

  <h2>User List</h2>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
    <tr ng-repeat="u in users">
      <td>{{ u.name }}</td>
      <td>{{ u.email }}</td>
      <td>
        <button ng-click="editUser(u)">Edit</button>
        <button ng-click="deleteUser(u.id)">Delete</button>
      </td>
    </tr>
  </table>

</body>
</html>

🔁 Summary of CRUD Mappings

CRUD Action	HTTP Method	Function Used	UI Trigger
Create	POST	`UserService.create()`	Form Submit
Read	GET	`UserService.getAll()`	On Load
Update	PUT	`UserService.update()`	Form Submit (Edit)
Delete	DELETE	`UserService.delete()`	Delete Button

📌 Summary – Recap & Next Steps

AngularJS makes implementing CRUD operations straightforward and efficient. By using $http along with a modular architecture of controllers and services, developers can handle full-stack API communication with ease.

🔍 Key Takeaways:

Use $http methods for CRUD: GET, POST, PUT, DELETE
Abstract API logic into services for reusability
Use forms for Create/Update, and list views for Read/Delete
Always refresh view after data change

⚙️ Real-world Relevance:
Used in admin dashboards, task managers, inventory apps, user profile editors, content management systems (CMS), and more.

❓ FAQ – AngularJS CRUD Operations

❓ Can I use one form for both creating and updating a user?
✅ Yes, check if user.id exists to determine whether to POST or PUT.

❓ How do I refresh the data after saving or deleting?
✅ Call your GET method (like $scope.getUsers()) after saving or deleting.

❓ Where should I write my $http logic in AngularJS?
✅ Prefer writing $http logic inside services (UserService) and use them in controllers.

❓ Can I do CRUD with other backends like Firebase or Node.js?
✅ Absolutely! As long as the backend provides RESTful endpoints, AngularJS can communicate with it using $http.

« Previous Next »

Share Now :

🔁 AngularJS CRUD Operations – Build Full-Stack Functionality with $http (2025 Guide)