Course Progress 32%

AngularJS AJAX – $http

← AngularJS Services AngularJS Tables →

AngularJS में AJAX calls करने के लिए $http service का उपयोग किया जाता है। $http एक built-in AngularJS service है जो server से data fetch करने, भेजने, update करने और delete करने के लिए use होती है। यह asynchronous तरीके से काम करती है, जिससे page reload किए बिना data exchange possible होता है।

Simple शब्दों में, जब AngularJS application को backend API या server से बात करनी होती है, तब $http का use किया जाता है।

$http Service क्या है

$http एक service है जो HTTP requests send करती है और response को handle करती है। यह JavaScript के XMLHttpRequest पर based होती है लेकिन AngularJS के features जैसे promises और digest cycle के साथ integrated रहती है।

$http JSON data के साथ काम करने के लिए specially optimized है।

$http Methods

AngularJS $http service ये common HTTP methods provide करती है:

  • GET – data read करने के लिए
  • POST – data send करने के लिए
  • PUT – data update करने के लिए
  • DELETE – data delete करने के लिए

$http GET Method

GET method server से data fetch करने के लिए use होती है।

app.controller("myCtrl", function($scope, $http) {
  $http.get("data.json").then(function(response) {
    $scope.users = response.data;
  });
});

HTML:

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

Code Explanation

  • $http.get("data.json") server से data request करता है
  • then() success होने पर response return करता है
  • response.data में actual data होता है
  • $scope.users में data store किया जाता है
  • ng-repeat list को dynamically display करता है

$http POST Method

POST method server को data भेजने के लिए use होती है।

app.controller("postCtrl", function($scope, $http) {
  $scope.sendData = function() {
    $http.post("/submit", {
      name: $scope.name,
      age: $scope.age
    }).then(function(response) {
      $scope.result = response.data;
    });
  };
});

HTML:

<div ng-controller="postCtrl">
  <input type="text" ng-model="name">
  <input type="number" ng-model="age">
  <button ng-click="sendData()">Submit</button>
  <p>{{result}}</p>
</div>

Code Explanation

  • User input $scope.name और $scope.age में store होता है
  • $http.post() server को data भेजता है
  • Server response $scope.result में store होता है
  • View automatically update हो जाती है

$http PUT Method

PUT method existing data को update करने के लिए use होती है।

$http.put("/user/1", {
  name: "Rahul"
});

Code Explanation

  • /user/1 resource identify करता है
  • Updated data server को भेजा जाता है
  • Mostly REST APIs में use होता है

$http DELETE Method

DELETE method data remove करने के लिए use होती है।

$http.delete("/user/1");

Code Explanation

  • Server को delete request भेजी जाती है
  • Resource remove हो जाता है

$http Response Object

$http response object में ये important properties होती हैं:

  • data – response body
  • status – HTTP status code
  • statusText – status message
  • config – request configuration
$http.get("data.json").then(function(response) {
  console.log(response.status);
});

Error Handling in $http

$http में error handling करना बहुत जरूरी होता है।

$http.get("data.json").then(
  function(response) {
    $scope.data = response.data;
  },
  function(error) {
    $scope.error = "Data load failed";
  }
);

Code Explanation

  • First function success case handle करता है
  • Second function error case handle करता है
  • Error message scope में store होकर View में दिखता है

$http with JSON Data

AngularJS automatically JSON data को parse कर देता है।

$http.get("users.json").then(function(response) {
  $scope.users = response.data;
});

Code Explanation

  • JSON file से data fetch होता है
  • Manual parsing की जरूरत नहीं होती

$http और Services

Best practice यह है कि $http calls controller में न लिखकर service में लिखी जाएँ।

app.service("dataService", function($http) {
  this.getUsers = function() {
    return $http.get("users.json");
  };
});

Controller:

app.controller("userCtrl", function($scope, dataService) {
  dataService.getUsers().then(function(response) {
    $scope.users = response.data;
  });
});

Code Explanation

  • $http logic service में shift किया गया
  • Controller clean और lightweight बना
  • Service reusable हो गई

$http Config Object

$http को config object के साथ भी use किया जा सकता है।

$http({
  method: "GET",
  url: "data.json"
}).then(function(response) {
  $scope.data = response.data;
});

Code Explanation

  • Method और URL explicitly define किए गए
  • Complex requests के लिए useful होता है

$http Best Practices

  • $http calls services में रखें
  • Proper error handling करें
  • Large responses को limit करें
  • Controllers को thin रखें

Common $http Mistakes

  • Controller में heavy AJAX logic लिखना
  • Error handling ignore करना
  • Wrong API URL देना
  • Response structure assume करना

Summary

इस chapter में आपने सीखा:

  • AngularJS $http service क्या है
  • GET, POST, PUT और DELETE methods
  • $http response object
  • Error handling
  • $http को service में use करना
  • Best practices और common mistakes
← AngularJS Services AngularJS Tables →
  • Home