hi lets see how to call a http rest api from angularjs
1. create the rest api which returns JSON data
2. Host the Http rest api ( in my case im hosting it on localhost )
3. Now we will see how to call this http api from angularjs
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="EmpData">
<div ng-repeat="x in Emp">
<h1> {{ 'Employee ID:' + x.EID }} </h1>
<p>{{ 'Name: ' + x.EName}}</p>
<p>{{ 'Salary: ' + x.ESalary}}</p>
</div>
</div>
<script>
function EmpData($scope, $http) {
$http.get("http://localhost/api/Home").
success(function (data) {
$scope.Emp = data;
});
}
</script>
</body>
</html>
4. Output
1. create the rest api which returns JSON data
2. Host the Http rest api ( in my case im hosting it on localhost )
3. Now we will see how to call this http api from angularjs
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="EmpData">
<div ng-repeat="x in Emp">
<h1> {{ 'Employee ID:' + x.EID }} </h1>
<p>{{ 'Name: ' + x.EName}}</p>
<p>{{ 'Salary: ' + x.ESalary}}</p>
</div>
</div>
<script>
function EmpData($scope, $http) {
$http.get("http://localhost/api/Home").
success(function (data) {
$scope.Emp = data;
});
}
</script>
</body>
</html>
4. Output
Thanks chandan sir.This article helped a lot.Very simple way of explanation with example.
ReplyDelete