HTTP Communication in AngularJS

AngularJS http Communication

In AngularJS, HTTP connections are mainly handled using the $http service, which allows data to be sent and received from a remote server. The $http service is a basic AngularJS service that provides a simple interface for processing HTTP requests and responses.

Here is a simple guide on how to make an HTTP connection in AngularJS using the $http implementation,

Configure the AngularJS application

First, you need to add AngularJS to your project. You can do this by adding an AngularJS library to your HTML file.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
   <div ng-controller="MainController">
       <!-- Your content goes here -->
   </div>
   <script src="app.js"></script>
</body>
</html>

Create the AngularJS Application Module and Controller

Next, create an AngularJS module and controller. On the controller, it will use the $http service to make HTTP requests.

angular.module('myApp', [])
  .controller('MyController', function ($scope, $http) {
    // making http get request
    $scope.getData = function() {
      $http.get('https://api.example.com/data')
          .then(function(response) {
              // Handle response if data fetched successfully
              $scope.data = response.data;
          }, function(error) {
              // Handle if any error occured
              console.error('Error:', error);
          });
    };
    // making http post request
    $scope.postData = function() {
      var data = {
          key: 'value'
      };
      $http.post('https://api.example.com/data', data)
          .then(function(response) {
              // Handle response if data saved successfully
              $scope.response = response.data;
          }, function(error) {
              // Handle if any error occured
              console.error('Error:', error);
          });
    };
  });

Performing an HTTP GET request

The $http.get method is used to make an HTTP GET request. It takes this URL as a parameter and returns a promise.

$http.get('https://api.example.com/data')
   .then(function(response) {
       // Handle success
       $scope.data = response.data;
   }, function(error) {
       // Handle error
       console.error('Error:', error);
   });

Creating an HTTP POST Request

The $http.post method is used to make an HTTP POST request. It takes a URL and a data item as parameters and returns a promise.

var data = {
   key: 'value'
};
$http.post('https://api.example.com/data', data)
   .then(function(response) {
       // Handle success
       $scope.response = response.data;
   }, function(error) {
       // Handle error
       console.error('Error:', error);
   });

Handling Promises

The $http function returns a promise, which can be processed using the .then() method for both success and failure cases. The .then() method takes two functions as parameters: if the request succeeds, the first operation is executed, and if the request fails, the second operation is executed

Also, Read: Form validation in AngularJS

Additional HTTP Methods

The $http service supports other HTTP methods such as PUT, and DELETE.

HTTP ‘PUT’ request

var data = {
   key: 'new value'
};
$http.put('https://api.example.com/data/1', data)
   .then(function(response) {
       // Handle success
       $scope.response = response.data;
   }, function(error) {
       // Handle error
       console.error('Error:', error);
   });

HTTP ‘DELETE’ request

$http.delete('https://api.example.com/data/1')
   .then(function(response) {
       // Handle success
       $scope.response = response.data;
   }, function(error) {
       // Handle error
       console.error('Error:', error);
   });

Configuring Requests

You can also configure the request by passing a configuration object to the $http path. The configuration object allows you to configure titles, parameters, and other options.

$http({
   method: 'GET',
   url: 'https://api.example.com/data',
   params: { id: 1 },
   headers: {
       'Authorization': 'Bearer token'
   }
}).then(function(response) {
   // Handle success
   $scope.data = response.data;
}, function(error) {
   // Handle error
   console.error('Error:', error);
});

You can also use the above $http({…})methods for HTTP communication in AngularJS application.

The $http function in AngularJS is a powerful tool to handle HTTP connections in your application.

Also, Read: Fetch Data from RESTFul APIs in AngularJS

articles