angularjs ajax call – angularjs ajax call with example of json

angularjs ajax call – angularjs ajax call with example of json

angularjs ajax call :: AngularJS provides $https: 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.

Once the data is ready, $https: can be used to get the data from server in the following manner −

function userController($scope,$https:) {
	var ajax_data_txt = "user_data.txt";
    $https:.get(ajax_data_txt).success( function(response) 
    {
      $scope.user = response; 
    });
}

Here, the file user_data.txt contains users records. $https: :: service makes an ajax call and sets response to it’s property users. users model can be used to draw tables in HTML.

Examples

user_data.txt

[
{
"Username" : "Mahesh Kad",
"Erno" : 452,
"Percentage" : "22%"
},

{
"Username" : "Dinkar Parashar",
"Erno" : 952,
"Percentage" : "55%"
},

{
"Username" : "Robert Do",
"Erno" : 158,
"Percentage" : "95%"
},

{
"Username" : "Julian Roy",
"Erno" : 125,
"Percentage" : "74%"
}
]

ajax-AngularJS.html File

   
          
angularjs ajax call - onlinecode


      






User Name


Er No


Percentage






{{ users.Username }}


{{ users.Erno }}


{{ users.Percentage }}






  

OUTPUT ::

To execute this example of call of angularjs ajax , we need to deploy ajax-AngularJS.html and user_data.txt file to a web server. Open the file ajax-AngularJS.html using the URL of your server in a web-browser and see like following the result.

angularjs ajax call – onlinecode

Service HTTP Methods

There are many several shortcut methods of calling the $http service. In the above example,we use .get method of the $http service is used.

Following are several other shortcut methods for $http ::

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