AngularJS
  • Sign In
Menu
  • Sign In
Menu
  • Products
    • Form Builder
    • Email Marketing
  • SignUp
  • SignIn
  • Sign Up Free
Menu
  • Sign Up Free

AngularJS – $http | AngularJS ajax

Updated on July 2, 2020
by Neeraj Agarwal

$http service of AngularJS is used to fetch data from the remote server. It needs the data available at the server must be in JSON format or an javascript object. $http fetches the data from the server using browser.

We already know how to use services in Angularjs.By using the same method here, we are going to use $http services in angular.


Watch the live demo or download code from the link given below.[dlv dl_url=”https://www.formget.com/wp-content/uploads/2015/12/angularjs_http_download.zip” dl_text=”” lv_url=”http://www.aorank.com/tutorial/angularjs_$http_demo/” lv_text=”” prev_domain=”mailget” prev_first=”” prev_second=”” prv_btn_text=”” prv_btn_link=”” ]


Syntax of $http:

modulename.controller('controllername',function($http) {

$http({
method: 'GET',
url: 'enter url here'
}).then(function successCallback(response) {
//this function will get run when data recieved
}, function errorCallback(response) {
// this function will run when any error occured
});
});

method: Here we difined the method of the method of trasfer data between client and server such as GET and POST.

method: 'GET',      //Here we can use GET or POST method both to send data over the server

url: Here we difined the url from where we are going to fetch the data

url: 'enter url here'

successCallback: This finction will get called when our server returns response.

.then(function successCallback(response) {}

errorCallback: This function will get called when server returns error.

 function errorCallback(response) {}

Shortcut methods for using $http:

Here are some shortcut method of using $http service with GET and POST method.

$http.get('/someUrl', config). then(function(response){.........}, function(){...............});
$http.post('/someUrl', data, config). then(function(){..............}, function(){...................});


Creating an application:

Now, we will create a application in which we fetch the json data in a table written on the text file.

We will do this by using $http service of angular.

First you have to include bootstrap.min.css and angular.min.js file in your html page

HTML File: index.html

This file is showing the result fetch from the $http services.

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-app="appl" ng-controller="fetchcontrol">
<table class="col-md-offset-4 col-md-3 col-xs-12" border="1" >
<thead><tr><td><strong>Person Id</strong></td><td>Name</td><td>Country</td></tr></thead>
<tbody>
<tr ng-repeat="n in nmt"><td>{{n.nameid}}</td><td>{{n.name}}</td><td>{{n.country}} </td></tr>
</tbody>
</table>
</div>
</body>
</html>

Javascript File: app.js This file fetches the data from details.txt using $http service.

This file fetches the data from details.txt using $http service.

Here the shortcut method of using $http service is implemented.

var appl = angular.module("appl", []);
appl.controller('fetchcontrol', function ($scope, $http) {
$http.get("details.txt")
.then(function (response) {
$scope.nmt = response.data;
}, function () {
alert('error occured');
});
})

CSS File: style.css:

/*----------------------------------------------
css settings for table and fonts
------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
table{
width:300px;
margin-bottom: 15px;
border: 2px solid #ccc;
}
thead td{
background-color:#FFCB00;
text-align:center;
padding:15px;
}
tbody tr td {
text-align:center;
padding:15px;
}
tbody tr td:hover{
background-color:#FEFFED;
}

Note: This blog contains a zip file of complete application just download it and use it. i am sure that it will makes you more clear about the working of $http service.

Conclusion:

I hope that at this point you must be feeling yourself comfortable with $http service of angularjs. Please comment for any query. Keep visiting our website for the latest coding tricks.

Related Posts:

AngularJS Routing : Connect Different Templates In Single Page Application
AngularJS - Services
AngularJS Controller : Add Behaviour To Application
PrevAngularJS Routing : Connect Different Templates In Single Page Application
Remove Hashtag From The Routing URL – $locationProviderNext

Leave a Reply Cancel reply

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

Take Your Email Marketing To The Next Level!

Start using MailGet and experience world class email builder, create email newsletters in a snap and send great
emails to your audience. Do amazing email marketing at an affordable price.

try It For Free
Our Solution
  • Subscription Billing
  • Form Builder
  • Email Marketing
  • Email List Cleaning
Connect With Us
  • Contact Us
  • Careers
Company
  • About Us
  • Privacy Policy
  • Terms and Conditions
  • Affiliate
  • Branding
Resources
  • Blog
  • Blog Categories
  • FormGet Features
  • Email Templates
  • Form Templates
AngularJS
Analytics
AngularJS

FormGet © 2020. All rights reserved.

Made with love for you