August 21, 2019 12:35 by
Peter
In this tutorial, I will tell you about $http in AngularJS. I am gonna show you AngularJS Basic Filters. $http is a service for reading data from web services. It will use get (service URL) method for the process. Now, write the following code:
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in details">{{ det.name + ', ' + det.countrycode }}
</li>
</ul>
</div>
In the below code, we've an Angular app httpApp and a controller httpController. currently we want to make our controller part, right?
< script >
var app = angular.module('httpApp', []);
app.controller('httpController', function($scope, $http) { $http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=- 22.4&west=55.2&lang=de&username=demo")
.success(function(response) {
$scope.details = response.geonames;
});
}); < /script>
In the preceding code we are using the $http.get() technique of Angular. within the url part we've got given a sample web service url of geo data. you'll get these free net services here. So within the success part we tend to are returning the response of the web service. Now if you write the response.geonames within the success in the browser console as follows, you'll get the array as shown on the following code:
console.log(response.geonames);
Once it is returned we are showing the response data to the UI using the repeat directive.
And here is the complete HTML
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular $http</title>
<style>
li {
border: 1px solid #ccc;
border-right: none;
border-left: none;
padding: 2px;
text-align: center;
list-style:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in details">{{ det.name + ', ' + det.countrycode }} </li>
</ul>
</div>
<script>
var app = angular.module('httpApp', []);
app.controller('httpController', function ($scope, $http) {
$http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=peter")
.success(function (response) {
$scope.details = response.geonames;
console.log(response.geonames);
});
});
</script>
</body>
</html>
You can add the following CSS to your page.
< style > li {
border: 1px solid#ccc;
border - right: none;
border - left: none;
padding: 2px;
text - align: center;
list - style: none;
} < /style>
AngularJS with Free ASP.NET Hosting
Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.
