In this article, we will learn about how we can call API in AngularJS.

API stands for Application Programming Interface. $http is an AngularJS service and can be used to read data from remote servers.

AngularJS $http

The $http service makes a request to the server and returns a response.

For calling the $http service there are several shortcut methods:

  • .get()
  • .delete()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()

Example

Open the Example1.html file and add the code in it.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <title></title>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h1>API Response:</h1>
        <p>Status: {{status}}</p>
        <table border="1" width="100%">
            <tr>
                <th>ID</th>
                <th>Email</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Avatar</th>
            </tr>
            <tr ng-repeat="x in data">
                <td>{{x.id}}</td>
                <td>{{x.email}}</td>
                <td>{{x.first_name}}</td>
                <td>{{x.last_name}}</td>
                <td align="center"><img src="{{x.avatar}}" height="50px" /></td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $http({
                method: "GET",
                url: "https://reqres.in/api/users"
            }).then(function Success(response) {
                $scope.data = response.data.data;
                $scope.status = "Success";
            }, function Error(response) {
                $scope.status = response.statusText;
            });
        });
    </script>
</body>
</html>

That’s it.

Output: