---
title: "Fetch Data from RESTFul APIs in AngularJS"
description: "You can effectively fetch data from RESTful APIs in AngularJS and integrate it into your web application."
author: "Ashutosh Patel"
published: 2024-06-24
updated: 2024-06-24
canonical: https://www.mindstick.com/articles/336200/fetch-data-from-restful-apis-in-angularjs
category: "angular js"
tags: ["javascript", "angular js", "angularjs filter"]
reading_time: 3 minutes
---
# Fetch Data from RESTFul APIs in AngularJS
#### RESTFul APIs in AngularJS
AngularJS uses AngularJS’s **built-in** services to make `HTTP` requests to [retrieve data](https://answers.mindstick.com/qa/102391/how-does-a-computer-hard-drive-store-and-retrieve-data) from [RESTful APIs](https://answers.mindstick.com/qa/111790/how-do-i-design-and-implement-restful-apis-for-my-applications). Here is a step-by-step guide to fetch data from a RESTful API in AngularJS,
#### Set Up Your AngularJS Application
First, make sure [your project](https://answers.mindstick.com/qa/93843/is-it-necessary-to-add-bootstrap-js-and-bootstrap-css-both-in-your-project) includes AngularJS. You can download or use the **CDN** [link in your](https://www.mindstick.com/forum/156588/bootstrap-js-and-bootstrap-css-link-in-your-project) HTML file.
```html
```
#### Create your AngularJS Module and Controller
Define your AngularJS module and controller. Load the `$http` service, which is used to make [HTTP requests](https://www.mindstick.com/forum/23192/using-java-dot-net-urlconnection-to-fire-and-handle-http-requests).
```javascript
// app.js
var app = angular.module('myApp', []);
// add angular services in controller
app.controller('MainController', ['$scope', '$http', function($scope, $http) {
// Function to fetch data
$scope.fetchData = function() {
$http.get('https://api.example.com/data')
.then(function(response) {
// Handle successful response
$scope.data = response.data;
}, function(error) {
// Handle error
console.error('Error fetching data:', error);
});
};
// Initial fetch when controller loads
$scope.fetchData();
}]);
```
The other way to fetch data from RESTful API using `$http({…})` method is as follow,
```javascript
angular.module('myApp', [])
.controller('MyController', function ($scope, $http) {
// fetch data from API
$http({
url: "https://api.example.com/data",
method : "GET",
DataType: "json"
}).then(function(response){
$scope.items = response.data;
}).catch(function(error){
console.log("error: ", error);
});
});
```
#### Fetch Data Using $http
In the controller, use the `$http.get` method to retrieve data from your RESTful API. Replace '**https://api.example.com/data**' with your actual API endpoint.
**success Handler-** `.then (function(response) { ... })`
- This function is called if the [HTTP request](https://www.mindstick.com/forum/161390/what-is-http-service-in-angularjs-and-how-do-you-make-an-http-request) is successful. response.data contains the response data from the API.
- Assign the fetched data to a `$scope` variable (e.g., `$scope.data`) and use it in your HTML.
**Error handler-** `.catch(function(error) { ... }) .`
- This function handles any errors that occur during an HTTP request.
#### Show Fetched Data in your HTML
Update your HTML to [display data](https://www.mindstick.com/forum/34030/how-to-display-data-in-the-table-using-angular-js) fetched with AngularJS directives.
```html
{{ item.name }} - {{ item.description }}
```
## In the example above
- `ng-controller="MainController"` Assigns the controller to a specific part of the HTML.
- `ng-repeat="object in data"` Repeats over each object in the [data structure](https://www.mindstick.com/forum/157579/what-is-a-graph-in-data-structure-explain-it-with-an-example) retrieved from the API.
- `{{ item.name }}` and `{{ item.description }}` specify the attributes of each item in the list.
## Example-
```html
AngularJS Loop Example