AngularJS API

📌 AngularJS और API क्या है?

🔹 API (Application Programming Interface) क्या होता है?

API एक ऐसा रास्ता है जिससे आपका AngularJS App किसी external system या server से data ले सकता है या भेज सकता है।

Example: Weather API से मौसम का data, या User API से user की list।

---

🔹 AngularJS API से कैसे जुड़ता है?

AngularJS में API से connect होने के लिए हम use करते हैं:

✅ $http Service

यह AngularJS का built-in service है जो HTTP request भेजता है:

• GET – Data को fetch करने के लिए
• POST – Data को submit करने के लिए
• PUT – Data को update करने के लिए
• DELETE – Data को delete करने के लिए

---

✅ Example 1: GET Request (Data Fetch करना)

<div ng-app="myApp" ng-controller="apiCtrl">
  <ul>
    <li ng-repeat="user in users">{{ user.name }}</li>
  </ul>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("apiCtrl", function($scope, $http) {
  $http.get("https://jsonplaceholder.typicode.com/users")
    .then(function(response) {
      $scope.users = response.data;
    }, function(error) {
      console.log("Error:", error);
    });
});
</script>

यह external API से 10 users की list लाकर दिखाएगा।

---

✅ Example 2: POST Request (Data भेजना)

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

<script>
var app = angular.module("myApp", []);
app.controller("apiCtrl", function($scope, $http) {
  $scope.user = {};
  $scope.submitUser = function() {
    $http.post("https://jsonplaceholder.typicode.com/users", $scope.user)
      .then(function(response) {
        $scope.msg = "User submitted with ID: " + response.data.id;
      }, function(error) {
        $scope.msg = "Error occurred!";
      });
  };
});
</script>

API पर नाम भेजा जाता है और reply आता है — “User submitted…”

---

✅ Common Use-Cases of API in AngularJS

काम	API Use
Users list लाना	GET /users
नया user जोड़ना	POST /users
User को update करना	PUT /users/:id
User को delete करना	DELETE /users/:id
Login/Signup	POST /login, /register
Search	GET /products?q=mobile

---

✅ Advanced: Headers के साथ Request भेजना (Auth Token)

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

जब secure API हो, तो token header में भेजना ज़रूरी होता है।

---

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

1. AngularJS में API से data लाने के लिए कौन-सी service use होती है?
2. GET और POST request में क्या फर्क होता है?
3. नीचे दिए गए code का क्या मतलब है?

$http.post("/api/feedback", $scope.feedbackData)

---

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

• AngularJS API से कैसे connect होता है
• $http.get(), $http.post() का इस्तेमाल
• Real API से data fetch और submit करना
• Authorization headers और error handling
• Real-world use cases जैसे login, CRUD, etc.

---

🎯 अब आप अपने AngularJS App को live server data से connect कर सकते हैं — एकदम प्रोफेशनल App की तरह!