Post
Ask Question

Learning AngularJS: $http

Introduction

Hi all, I hope you are fine. Today we will learn about AngularJS Basic Filters. If you are new to AngularJS then I suggest you read the Basics of AngularJS.

Now with the assumption that you have read my previous article, we are starting.

This article explains $http in Angular JS.

Using the code

$http is a service for reading data from web services. It uses the get (service URL) method for the process. We will see that with an example.

  1. <div ng-app="httpApp" ng-controller="httpController">  
  2.     <ul>  
  3.         <li ng-repeat="det in details">{{ det.name + ', ' + det.countrycode }}  
  4. </li>  
  5.     </ul>  
  6. </div>  
In the preceding code, we have an Angular app httpApp and a controller httpController. Now we need to create our controller part, right?
  1. < script >  
  2. var app = angular.module('httpApp', []);  
  3. app.controller('httpController', function($scope, $http) {  
  4.     $http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=- 22.4&west=55.2&lang=de&username=demo")  
  5.         .success(function(response) {  
  6.         $scope.details = response.geonames;  
  7.     });  
  8. }); < /script>  
In the preceding code we are using the $http.get() method of Angular. In the URL part we have given a sample web service URL of geo data. You can get these free web services here.

So in the success part we are returning the response of the web service.

Now if you write the response.geonames in the success in the browser console as follows, you will get the array as shown below.
  1. console.log(response.geonames);  



Once it is returned we are showing the response data to the UI using the repeat directive.

So that is all.

Complete HTML

  1. <!DOCTYPE html>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <title>Angular $http - SibeeshPassion </title>  
  6.         <style>  
  7.          li {  
  8.             border: 1px solid #ccc;  
  9.             border-right: none;  
  10.             border-left: none;  
  11.             padding: 2px;  
  12.             text-align: center;  
  13.             list-style:none;  
  14.           }   
  15.          </style>  
  16.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  17.     </head>  
  18.     <body>  
  19.         <div ng-app="httpApp" ng-controller="httpController">  
  20.             <ul>  
  21.                 <li ng-repeat="det in details">{{ det.name + ', ' + det.countrycode }} </li>  
  22.             </ul>  
  23.         </div>  
  24.         <script>  
  25.             var app = angular.module('httpApp', []);  
  26.             app.controller('httpController', function ($scope, $http) {  
  27.             $http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=sibeeshvenu")  
  28.             .success(function (response) {   
  29.                $scope.details = response.geonames;   
  30.                console.log(response.geonames);  
  31.                });  
  32.          });  
  33.          </script>  
  34.     </body>  
  35. </html>  
Output



Now apply the CSS

Add the following CSS to your page.

  1. < style > li {  
  2.     border: 1px solid#ccc;  
  3.     border - right: none;  
  4.     border - left: none;  
  5.     padding: 2px;  
  6.     text - align: center;  
  7.     list - style: none;  
  8. } < /style>  
Once you add the CSS you will get output as follows.



Cool. We did it.

Conclusion

Now that is all for the day, I will return with another set of items in Angular JS soon. I hope you liked this article. Please provide your valuable suggestions.

Kindest Regards,

Sibeesh venu
Sibeesh Passion


Similar Articles