---
title: "How do you make an HTTP call in AngularJS?"  
description: "How do you make an HTTP call in AngularJS?"  
author: "Ravi Vishwakarma"  
published: 2025-12-28  
updated: 2025-12-28  
canonical: https://www.mindstick.com/interview/34429/how-do-you-make-an-http-call-in-angularjs  
category: "angular js"  
tags: ["angular js"]  
reading_time: 3 minutes  

---

# How do you make an HTTP call in AngularJS?

In **AngularJS (1.x)**, HTTP calls are made using the built-in `$http` **service**. It returns a [**promise**](https://www.mindstick.com/articles/337707/explaining-the-promise-in-javascript-and-different-status) and supports all standard HTTP methods.

### Short answer (interview-friendly)

> *In AngularJS, HTTP calls are made using the* `$http` *service, which returns a promise and supports methods like* [*GET, POST, PUT, and DELETE*](https://www.mindstick.com/blog/304321/explain-the-http-request-methods-in-html)*.*

## 1. Basic `$http` GET request

```javascript
app.controller('MyCtrl', function ($scope, $http) {

    $http.get('/api/users')
        .then(function (response) {
            // success
            $scope.users = response.data;
        })
        .catch(function (error) {
            // error
            console.error(error);
        });

});
```

## 2. POST request

```javascript
$http.post('/api/users', {
    name: 'John',
    email: 'john@test.com'
})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.error(error);
});
```

## 3. Full `$http` configuration object (recommended in real projects)

```javascript
$http({
    method: 'PUT',
    url: '/api/users/1',
    data: {
        name: 'Updated Name'
    },
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.error(error);
});
```

## 4. Using `$http` in a service / factory (best practice)

```javascript
app.factory('UserService', function ($http) {
    return {
        getUsers: function () {
            return $http.get('/api/users');
        },
        addUser: function (user) {
            return $http.post('/api/users', user);
        }
    };
});
```

Controller usage:

```javascript
app.controller('MyCtrl', function ($scope, UserService) {

    UserService.getUsers()
        .then(function (res) {
            $scope.users = res.data;
        });

});
```

## 5. Handling response structure

AngularJS `$http` response object contains:

```plaintext
response.data     // actual response body
response.status   // HTTP status code
response.headers  // response headers
response.config   // request config
```

## 6. Older `.success()` / `.error()` (deprecated)

```javascript
$http.get('/api/users')
    .success(function (data) {
        console.log(data);
    })
    .error(function (err) {
        console.error(err);
    });
```

Not recommended anymore—use `.then()` instead.

## 7. Common interview notes (important)

- `$http` returns a **promise**
- Internally uses [**XHR / Fetch**](https://www.mindstick.com/articles/338802/basic-introduction-of-javascript-ajax)
- Supports interceptors
- Can be wrapped in services for reuse
- `$httpBackend` is used for unit testing

###

## Answers

### Answer by Ravi Vishwakarma

In **AngularJS (1.x)**, HTTP calls are made using the built-in `$http` **service**. It returns a [**promise**](https://www.mindstick.com/articles/337707/explaining-the-promise-in-javascript-and-different-status) and supports all standard HTTP methods.

### Short answer (interview-friendly)

> *In AngularJS, HTTP calls are made using the* `$http` *service, which returns a promise and supports methods like* [*GET, POST, PUT, and DELETE*](https://www.mindstick.com/blog/304321/explain-the-http-request-methods-in-html)*.*

## 1. Basic `$http` GET request

```javascript
app.controller('MyCtrl', function ($scope, $http) {

    $http.get('/api/users')
        .then(function (response) {
            // success
            $scope.users = response.data;
        })
        .catch(function (error) {
            // error
            console.error(error);
        });

});
```

## 2. POST request

```javascript
$http.post('/api/users', {
    name: 'John',
    email: 'john@test.com'
})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.error(error);
});
```

## 3. Full `$http` configuration object (recommended in real projects)

```javascript
$http({
    method: 'PUT',
    url: '/api/users/1',
    data: {
        name: 'Updated Name'
    },
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.error(error);
});
```

## 4. Using `$http` in a service / factory (best practice)

```javascript
app.factory('UserService', function ($http) {
    return {
        getUsers: function () {
            return $http.get('/api/users');
        },
        addUser: function (user) {
            return $http.post('/api/users', user);
        }
    };
});
```

Controller usage:

```javascript
app.controller('MyCtrl', function ($scope, UserService) {

    UserService.getUsers()
        .then(function (res) {
            $scope.users = res.data;
        });

});
```

## 5. Handling response structure

AngularJS `$http` response object contains:

```plaintext
response.data     // actual response body
response.status   // HTTP status code
response.headers  // response headers
response.config   // request config
```

## 6. Older `.success()` / `.error()` (deprecated)

```javascript
$http.get('/api/users')
    .success(function (data) {
        console.log(data);
    })
    .error(function (err) {
        console.error(err);
    });
```

Not recommended anymore—use `.then()` instead.

## 7. Common interview notes (important)

- `$http` returns a **promise**
- Internally uses [**XHR / Fetch**](https://www.mindstick.com/articles/338802/basic-introduction-of-javascript-ajax)
- Supports interceptors
- Can be wrapped in services for reuse
- `$httpBackend` is used for unit testing

###


---

Original Source: https://www.mindstick.com/interview/34429/how-do-you-make-an-http-call-in-angularjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.