AngularJS HTTP

📌 AngularJS $http क्या है?

AngularJS में $http एक built-in service है जो हमें HTTP requests भेजने की सुविधा देता है — जैसे:

• ✅ GET (डेटा लाने के लिए)
• ✅ POST (डेटा भेजने के लिए)
• ✅ PUT (डेटा अपडेट करने के लिए)
• ✅ DELETE (डेटा हटाने के लिए)

आसान भाषा में: $http का इस्तेमाल हम API से डेटा लाने या भेजने के लिए करते हैं — बिल्कुल JavaScript के fetch() या XMLHttpRequest जैसे।

---

✍️ Basic Syntax

$http({
  method: 'GET',
  url: 'https://api.example.com/data'
}).then(function(response) {
  // success
}, function(error) {
  // error
});

---

✅ Example: Simple GET Request

<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="item in items">{{ item.title }}</li>
  </ul>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
  $http.get("https://jsonplaceholder.typicode.com/posts")
    .then(function(response) {
      $scope.items = response.data.slice(0, 5); // 5 पोस्ट दिखाएँ
    }, function(error) {
      console.log("Error:", error);
    });
});
</script>

जैसे ही पेज लोड होगा, API से डेटा आएगा और list में दिखेगा।

---

🔁 GET vs POST

Method	Use
GET	Server से data लाने के लिए
POST	Server को data भेजने के लिए (e.g. form submit)

---

✅ Example: POST Request (Form Submit)

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="user.name" placeholder="Name">
  <button ng-click="submitForm()">Submit</button>
  <p>{{ responseMessage }}</p>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
  $scope.user = {};
  $scope.submitForm = function() {
    $http.post("https://jsonplaceholder.typicode.com/posts", $scope.user)
      .then(function(response) {
        $scope.responseMessage = "Form submitted! ID: " + response.data.id;
      }, function(error) {
        $scope.responseMessage = "Something went wrong!";
      });
  };
});
</script>

Output: API पर डेटा भेजा जाएगा और response message मिलेगा।

---

📦 Common Response Properties

Property	Use
response.data	Actual response content
response.status	HTTP status code (e.g. 200, 404)
response.headers()	Headers info
response.config	Original request config

---

🔐 Headers के साथ Request भेजना

$http({
  method: 'GET',
  url: 'https://api.example.com/data',
  headers: {
    'Authorization': 'Bearer token123'
  }
})
.then(function(response) {
  $scope.data = response.data;
});

---

⚠️ Error Handling

हमेशा .then(success, error) में error function को include करें ताकि अगर API fail हो जाए तो graceful message दिखा सकें।

---

💡 Real-Life Use Cases:

• Blogs/posts/data fetch करना
• Contact form submit करना
• Admin panel से डेटा load/update/delete करना
• External API (जैसे weather, news, quotes) integrate करना

---

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

1. $http service का use क्या है AngularJS में?
2. .then() function में कितने arguments होते हैं और उनका मतलब क्या है?
3. POST request कब और क्यों use किया जाता है?

---

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

• AngularJS में $http service क्या है
• GET और POST request कैसे भेजते हैं
• API से डेटा लाने और भेजने का तरीका
• Error handling और response structure
• Real-world examples

---

🎯 अब आप अपने AngularJS App को बाहरी दुनिया से connect करना सीख चुके हैं — यानी Real Data Ready!