AngularJS Ajax example using $http


In this tutorial, we are going to call ajax in angular js using $http service. AngularJS provides multiple services out of the box. $http service can be used to perform http request. It allows you create any http request by just injecting it via controller constructor.

In this example, we are going to read countries.json using ajax request from server and will show data of it in a table.

Ajax request in app.js

As you can see here , we are injecting $http in controller function here and assigning response to countries list.

 Lets see complete example:

 Project structure:

Step 1: Create dynamic web project named “AngularJSAjaxExample” in eclipse.
Step 2: We are going to read counties.json from server. Create countries.json in WebContent folder with below json text.

Step 3: Create angularJSAjaxExample.html in WebContent folder as below:

Here we are using ng-repeat tag to iterate counties list and showing it in table.

Step 4 : Create app.js in WebContent folder as below:

Step 5: We are going to apply style on this table, so create table.css as below in WebContent folder.

Step 6: Run the html file on the server. Right click on “angularJSAjaxExample.html” and go to run -> run on server.

You will see below output:

URL: http://localhost:8080/AngularJSAjaxExample/angularJSAjaxExample.html

Source code:

click to begin
20KB .zip

Add Comment