Tutorial 31 – service $http in angularjs

Service $http in angularjs

 In AngularJS the $http is a core service for reading data from web servers.
Expression: $http.get(url) 

Example:
we have a url as http://www.youdomain.com/data/getStudent and this url return following data


{
"records": [
  {
    "Name" : "Huynh Xuan Hai",
    "City" : "Ho Chi Minh",
    "Country" : "Viet Nam"
  },
  {
    "Name" : "Vais",
    "City" : "Moscow",
    "Country" : "Russia"
 
  },
  {
    "Name" : "Kevin",
    "City" : "New York",
    "Country" : "US"

  },
   {
    "Name" : "Muira",
    "City" : "Tokyo",
    "Country" : "Japan"
 
  }
]
}

And then here is full code of this sample


 <!DOCTYPE html>  
 <html>  
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
 <script>  
   var app = angular.module('myApp', []);  
   app.controller('customersCtrl', function ($scope, $http) {  
     $http.get("http://www.youdomain.com/data/getStudent")  
     .success(function(response) {  
       $scope.students = response.records;  
       });  
   });  
 </script>  
 <style>  
   .odd {  
     background: Green;  
     color: #FFF;  
   }  
 </style>  
 <body>  
   <div ng-app="myApp" ng-controller="customersCtrl" ng-init=" students = [  
                     {Name: 'Huynh Xuan Hai', City: 'Ho Chi Minh', Country: 'Viet Nam'},  
                     {Name: 'Vais', City: 'Russia', Country: 'Viet Nam'},  
                     {Name: 'Kevin', City: 'New York', Country: 'US'},  
                     {Name: 'Muira', City: 'Tokyo', Country: 'Japan'}  
                   ]">  
     <table class="table table-striped">  
       <thead>  
         <tr>  
           <th>Edit</th>  
           <th> Name</th>  
           <th> City </th>  
           <th> Country </th>  
         </tr>  
       </thead>  
       <tbody>  
         <tr ng-class-odd="'odd'" ng-repeat="user in students">  
           <td>  
             <button class="btn">  
               <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit  
             </button>  
           </td>  
           <td>{{ user.Name}}</td>  
           <td>{{ user.City}}</td>  
           <td>{{ user.Country}}</td>  
         </tr>  
       </tbody>  
     </table>  
   </div>   
 </body>  
 </html>  



6 comments:

  1. I have read your article, it is very informative and helpful for me. I admire valuable information you offer this articles. Thanks for posting it. Flutter App Development Company

    ReplyDelete
  2. This is the first time I am visiting your website. I would like to tell you that I am genuinely engaged by reading your blogs. Keep up the good work! React Native App Development Company

    ReplyDelete
  3. Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging ! Flutter App Development Company

    ReplyDelete
  4. This post is really nice and informative. The explanation given is really comprehensive and informative.React Native App Development Company

    ReplyDelete
  5. Avenging Security PVT LTD. one of the leading Sports Team Management App Development Company in Jaipur India. If you are looking for a company that offersTeam Management App software in India with affordable prices, then think about us!

    ReplyDelete

Popular Posts