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> Edit
</button>
</td>
<td>{{ user.Name}}</td>
<td>{{ user.City}}</td>
<td>{{ user.Country}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
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
ReplyDeleteThis 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
ReplyDeleteWonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging ! Flutter App Development Company
ReplyDeleteThis post is really nice and informative. The explanation given is really comprehensive and informative.React Native App Development Company
ReplyDeleteHi thanks for sharing this amazing article, it has a amazing content
ReplyDeleteDo Backlinks
Do Backlinks
Do Backlinks
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