forum

Home / DeveloperSection / Forums / How to use the $http service in my AngularJS?

Ask Question
Anubhav Kumar

Anubhav Kumar

Follow
The Anubhav portal was launched in March 2015 at the behest of the Hon'ble Prime Minister for retiring government officials to leave a record of their experiences while in Govt service .

Can you answer this question?

Answer

1 Answers

Manish Sharma

Manish Sharma

16-May-2024

The $http service in AngularJS makes HTTP requests to communicate with remote servers. It provides a simplified API for interacting with web services and allows you to perform CRUD (Create, Read, Update, Delete) operations. Here's a basic guide on how to use the $http service in AngularJS.

 

Setting Up Your AngularJS App

First, ensure you have AngularJS included in your project. You can include it via a CDN or by downloading it and adding it to your project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS $http Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
    <div>
        <h1>Data from Server</h1>
        <ul>
            <li ng-repeat="item in data">{{ item.name }}</li>
        </ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

 

Creating the AngularJS App and Controller

In your app.js file, set up your AngularJS application and a controller. Use the $http service within the controller to fetch data from a server.

// Define the AngularJS module
var app = angular.module('myApp', []);

// Define the MainController and inject the $http service
app.controller('MainController', function($scope, $http) {
    
    // Function to fetch data from the server
    $scope.getData = function() {
        $http({
            method: 'GET',
            url: 'https://api.example.com/data'
        }).then(function successCallback(response) {
            // Store the data in the scope variable
            $scope.data = response.data;
        }, function errorCallback(response) {
            console.error('Error fetching data:', response.status, response.statusText);
        });
    };

    // Call the function to fetch data when the controller is initialized
    $scope.getData();
});

 

Explanation of the Code

AngularJS Module and Controller:

  • The myApp module is defined using angular.module('myApp', []).
  • The MainController is created and the $http service is injected into it.

Using the $http Service:

  • The $http service is used inside the getData function to make a GET request to https://api.example.com/data.
  • The $http function is called with a configuration object that specifies the HTTP method and the URL.
  • The then method is used to handle the promise returned by $http. The successCallback function processes the successful response, storing the fetched data in $scope.data.
  • The errorCallback function handles errors, logging them to the console.

Displaying the Data:

  • In the HTML, the ng-repeat directive is used to loop through the items in data and display each item's name property.

 

CRUD Operations with $http

Here’s how you can perform other CRUD operations using the $http service:

 

Create (Post request)

$http({
    method: 'POST',
    url: 'https://api.example.com/data',
    data: {
        name: 'New Item',
        description: 'Description of the new item'
    }
}).then(function successCallback(response) {
    console.log('Item created:', response.data);
}, function errorCallback(response) {
    console.error('Error creating item:', response.status, response.statusText);
});

 

Update (Put request)

$http({
    method: 'PUT',
    url: 'https://api.example.com/data/1',
    data: {
        name: 'Updated Item',
        description: 'Updated description'
    }
}).then(function successCallback(response) {
    console.log('Item updated:', response.data);
}, function errorCallback(response) {
    console.error('Error updating item:', response.status, response.statusText);
});

 

Delete (Delete request)

$http({
    method: 'DELETE',
    url: 'https://api.example.com/data/1'
}).then(function successCallback(response) {
    console.log('Item deleted:', response.data);
}, function errorCallback(response) {
    console.error('Error deleting item:', response.status, response.statusText);
});

 

Conclusion

The $http service in AngularJS is a powerful tool for making HTTP requests to interact with APIs and web services. By using this service, you can easily perform CRUD operations and manage data within your AngularJS applications. The examples demonstrate how to set up and use the $http service for different requests.

 

Thank you.

MindStick Training

Liked By