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
        
              
   
     

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

Name Roll No Percentage
Mahesh Kad 952 22%
Dinkar Parashar 201 55%
Robert Do 158 95%
Julian Roy 125 74%

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()

Leave a Comment

Your email address will not be published. Required fields are marked *

7  +  1  =  

We accept paid advance and paid guest Posting on our Site : Contact US