Home » AngularJS AJAX

AngularJS AJAX

AngularJS provides a $http service for reading data and remote servers. It is used to retrieve the desired records from a server.

AngularJS requires data in JSON format. Once the data is ready, $http gets the data form server in the following manner:

Here the file “data.txt” is employee’s records. $http service makes an AJAX call and sets response to its property employees. This model is used to draw tables in HTML.

AngularJS AJAX Example


Here the file data.txt contains the employee's record.

"data.txt" (employee's data in JSON format)

To execute the above example, you have 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.


The result would look like this:

angularjs with ajax


Name Age Salary
Mahesh Sharma 25 20000
Rohan Malik 20 22000
Robert Petro 45 67000
Jullia Roberts 21 55000

HTTP Service Methods

There are several shortcut methods of calling the $http service. In the above example, .get method of the $http service is used. Following are several other shortcut methods:

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


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.
  • .statusText a string defining the HTTP status.

You may also like