AngularJS with RESTful API (CRUD App)

अब हम आते हैं AngularJS Tutorial के एक बेहद practical और industry-level चैप्टर पर:

🔁 AngularJS with RESTful API (CRUD App)

(Server से Data लाना, दिखाना, जोड़ना, अपडेट करना और हटाना – सबकुछ AJAX से)

---

📌 RESTful API क्या होता है?

REST API (Representational State Transfer) एक ऐसा सिस्टम होता है जो आपके App को HTTP के ज़रिए data भेजने और लेने की सुविधा देता है।

AngularJS में हम इस API को AJAX के ज़रिए use करते हैं, खासकर $http या $resource services से।

Operation	HTTP Method	URL	काम
Create	POST	/users	नया user जोड़ना
Read	GET	/users	सभी users लाना
Read One	GET	/users/1	एक user की details
Update	PUT / PATCH	/users/1	user details बदलना
Delete	DELETE	/users/1	user हटाना

---

🎯 इस चैप्टर में हम क्या बनाएंगे?

एक Complete CRUD (Create, Read, Update, Delete) App
जिसमें हम एक mock API (e.g. JSONPlaceholder) से users को लाएँगे, जोड़ेंगे, बदलेंगे और हटाएँगे।

---

✅ App Setup (app.js)

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

---

✅ Controller (UserCtrl)

app.controller("UserCtrl", function($scope, $http) {
  const API = "https://jsonplaceholder.typicode.com/users";

  $scope.users = [];
  $scope.user = {};

  // READ - Get all users
  $scope.loadUsers = function() {
    $http.get(API).then(function(res) {
      $scope.users = res.data;
    });
  };

  // CREATE - Add new user
  $scope.addUser = function() {
    $http.post(API, $scope.user).then(function(res) {
      $scope.users.push(res.data);
      $scope.user = {}; // Reset form
    });
  };

  // UPDATE - Edit user
  $scope.editUser = function(u) {
    $scope.user = angular.copy(u);
  };

  $scope.updateUser = function() {
    $http.put(API + "/" + $scope.user.id, $scope.user).then(function(res) {
      const index = $scope.users.findIndex(u => u.id === $scope.user.id);
      $scope.users[index] = res.data;
      $scope.user = {};
    });
  };

  // DELETE - Remove user
  $scope.deleteUser = function(id) {
    $http.delete(API + "/" + id).then(function() {
      $scope.users = $scope.users.filter(u => u.id !== id);
    });
  };

  // Initialize
  $scope.loadUsers();
});

---

✅ HTML Structure (index.html)

<div ng-app="crudApp" ng-controller="UserCtrl" class="w3-container w3-padding">

  <h2>User Management (CRUD)</h2>

  <form ng-submit="user.id ? updateUser() : addUser()" class="w3-card w3-padding w3-margin-bottom">
    <input ng-model="user.name" placeholder="Name" class="w3-input w3-margin-bottom" required />
    <input ng-model="user.email" placeholder="Email" class="w3-input w3-margin-bottom" required />
    <button type="submit" class="w3-button w3-green">
      {{ user.id ? 'Update' : 'Add' }} User
    </button>
  </form>

  <table class="w3-table-all">
    <tr>
      <th>ID</th><th>Name</th><th>Email</th><th>Actions</th>
    </tr>
    <tr ng-repeat="u in users">
      <td>{{ u.id }}</td>
      <td>{{ u.name }}</td>
      <td>{{ u.email }}</td>
      <td>
        <button ng-click="editUser(u)" class="w3-button w3-blue w3-small">Edit</button>
        <button ng-click="deleteUser(u.id)" class="w3-button w3-red w3-small">Delete</button>
      </td>
    </tr>
  </table>

</div>

---

✅ App Behavior Summary

Feature	Action
Load Users	Page load पर GET request से data
Add User	Form submit पर POST request
Edit User	Fields auto-fill, PUT request on submit
Delete User	Delete button से DELETE request

---

⚠️ ध्यान दें:

• JSONPlaceholder एक mock API है — POST/PUT/DELETE सिर्फ simulate करता है
• आप अपनी backend API बनाकर इसे fully functional बना सकते हैं
• Real-world में authentication/token headers भी लगेंगे

---

💡 Extra Ideas (Practice के लिए)

• Validation (required, email pattern)
• Success/error messages
• Pagination या search
• LocalStorage fallback
• Loader/spinner on API call

---

🧠 अभ्यास प्रश्न (Exercise)

1. REST API के कौन-कौन से HTTP methods हैं?
2. AngularJS में $http.post() से data भेजते वक्त क्या payload होता है?
3. एक user को update करने के लिए $http.put() में क्या parameters जाते हैं?

---

✅ आपने क्या सीखा?

• AngularJS और RESTful API को कैसे integrate करें
• Complete CRUD operations: GET, POST, PUT, DELETE
• Form binding और table rendering
• Real-world SPA की basic structure
• HTTP Calls को handle करना with $http

---

🎯 अब आप AngularJS App को किसी भी backend या third-party API के साथ जोड़कर powerful, dynamic और fully functional application बना सकते हैं।