AngularJS AJAX – $http

If you are interested to learn about the AngularJS Filters

$http is an AngularJS service for reading data from remote servers. AngularJS provides $http control which works as a service to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format.

AngularJS $http

The AngularJS $http service makes a request to the server, and returns a response. AngularJS provides a $http service for reading data and remote servers. It is used to retrieve the desired records from a server.

Example

Make a simple request to the server, and display the result in a header:

div ng-app="myApp" ng-controller="myCtrl"> ;
p>Today's welcome message is:
/p><br> ;h1>{{myWelcome}};
/div> 
script><br>var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {<br>  $http.get("welcome.htm")<br>  .then(function(response) {<br>    $scope.myWelcome = response.data;<br>  });
/script>

What is $HTTP service?

The $http service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP. For unit testing applications that use $http service, see $httpBackend mock

Methods

The example above uses the .get method of the $http service. The .get method is a shortcut method of the $http service. There are several shortcut methods:

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

The methods above are all shortcuts of calling the $http service:

chapter: Chapter-9 / AngularJS Book

Example

var app = angular.module('myApp', []);
<br>app.controller('myCtrl', function;
then(function mySuccess(response)    $scope.myWelcome = response.data;},
 function myError(response)  $scope.myWelcome = response.statusText; 

The example above executes the $http service with an object as an argument. The object is specifying the HTTP method, the url, what to do on success, and what to do on failure.

Properties

The response from the server is an object with these properties:

  • .config the object used to generate the request.
  • .data a string, or an object, carrying the response from the server.
  • .headers a function to use to get header information.
  • .status a number defining the HTTP status.
  • .status Text a string defining the HTTP status.

Example

var app = angular.module('myApp', []);
app.controller('myCtrl', function;
then(function(response) {<br>    
$scope.content = response.data;
$scope.statuscode = response.status;    $scope.statustext = response.statusText;

To handle errors, add one more functions to the .then method:

Example

var app = angular.module('myApp', []);
<br>app.controller('myCtrl', function
get("wrongfilename.htm")
then(function(response)  // First function handles success    $scope.content = response.data; function(response)    // Second function handles error< $scope.content = "Something went wrong";

How can you make Ajax call using AngularJS?

Make AJAX Call and Return JSON Using AngularJS

<script> var myapp = angular. 
module('myApp', []);
myapp. controller('control', function ($scope, $http)
 {  var call = "WebService1. asmx/HelloWorld";
 $http. post(call). success(function (response)
 { $scope. value = response; }) . 
error(function (error) {

JSON

The data you get from the response is expected to be in JSON format. JSON is a great way of transporting data, and it is easy to use within AngularJS, or any other JavaScript. Example: On the server we have a file that returns a JSON object containing 15 customers, all wrapped in array called records.

Example

The ng-repeat directive is perfect for looping through an array:

div ng-app="myApp" ng-controller="customersCtrl">;
li ng-repeat="x in myData">    {{ x.Name + ', ' + x.Country }} ;
/li>  ul> /div> ;
script> var app = angular.module('myApp', []);
app.controller('customersCtrl', function  get("customers.php").
then(function(response) myData = response.data.records;
/script>

Examples

data.txt

[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]

testAngularJS.htm

html;
head;
   title ;Angular JS Includes ;/title;
      
    style
    table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      /style ;
   /head;
   
   body;
      h2&gt;AngularJS Sample Application&lt;/h2;
      div ng-app = "" ng-controller = "studentController";
      
        table;
            tr;
              th ;Name;/th;
              th;Roll No;/th;
              th&gt;Percentage&lt;/th;
            /tr;
         
            tr ng-repeat = "student in students;
               {{ student.Name }}/td;
              {{ student.RollNo }}
              {{ student.Percentage }}
           /tr;
         /table;
     /div;
      
      script;
         function studentController($scope,$http) {
            var url = "/data.txt";

            $http.get(url).then( function(response) {
               $scope.students = response.data;
            });
         }
      /script;
      
      script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"&gt;
      /script;
      
   /body;
/html

Output

To execute this example, you need to deploy testAngularJS.htm and data.txt file to a web server. Open the file testAngularJS.htm using the URL of your server in a web browser and see the result.

AngularJS Sample Application

NameRoll NoPercentage
Mahesh Parashar10180%
Dinkar Kad20170%
Robert19175%
Julian Joe11177%
AngularJS AJAX – $http
Show Buttons
Hide Buttons