AJS - AJAX
AngularJS में http service; ये Browser के XMLHttpRequest या JSONP का इस्तेमाल करके data send या receive करने के लिए इस्तेमाल किया जाता है |
$http service ये remote server से data को read करता है |
$http ये XMLHttpRequest Object होता है |
Example for $http Reading JSON Format Data in AngularJS
data.html
[
{
"name" : "Rakesh",
"percentage" : "89.50"
},
{
"name" : "Ramesh",
"percentage" : "90"
},
{
"name" : "Maria",
"percentage" : "70.48"
},
{
"name" : "Mangesh",
"percentage" : "75.87"
},
{
"name" : "Kamalesh",
"percentage" : "60"
}
]
Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
<table border="1" cellpadding="5" cellspacing="0">
<tr><th>Student Name</th><th>Percentage</th></tr>
<tr ng-repeat = "stud in students">
<td>{{stud.name}} </td>
<td>{{stud.percentage}}%</td>
</tr>
</table>
<br />
data : {{data}}<br />
<p>status : {{code}}<br />
<p>statusText : {{text}}
</div>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $http) {
$http.get("data.html")
.then(function (response){
$scope.students = response.data;
$scope.data = response.data;
$scope.code = response.status;
$scope.text = response.statusText;
},
function (response){
alert("Data Cannot read");
});
});
</script>
</body>
</html>
Output :
data : [{"name":"Rakesh","percentage":"89.50"},{"name":"Ramesh","percentage":"90"},{"name":"Maria","percentage":"70.48"},{"name":"Mangesh","percentage":"75.87"},{"name":"Kamalesh","percentage":"60"}]
status : 200
statusText : OK
Properties
- data : server से आनेवाले response को string या object में return करता है |
- status : Number में HTTP Status क return करता है |
- statusText : String में HTTP Status क return करता है |
- config : request को generate करने के लिए इस्तेमाल किया जाता है |
- headers() : header information को प्राप्त करने के लिए इस्तेमाल किया जाता है |
Example for $http Properties in AngularJS
data.txtHello World
Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
Data : {{data}}<br />
Status : {{code}}<br />
StatusText : {{text}}<br />
Headers : {{header}}<br />
</div>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $http) {
$http.get("data.txt")
.then(function (response){
$scope.data = response.data;
$scope.code = response.status;
$scope.text = response.statusText;
$scope.header = response.headers();
});
});
</script>
</body>
</html>
Output :
Data : Hello World
Status : 200
StatusText : OK
StatusText : {"content-type":"application/xml","content-length":"449"}
Status : 200
StatusText : OK
StatusText : {"content-type":"application/xml","content-length":"449"}
Example for Handling Error in AngularJS
Example पर कहा पर भी 'dat.txt' ये file नहीं है | .then() method पर जब पहला function दिया जाता है तो वो function; data success; read होने पर दिया जाता है और दूसरा function ये data read करने में failed होने पर दिया जाता है |
Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
Data : {{data}}<br />
</div>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $http) {
$http.get("dat.txt")
.then(function (response){
$scope.data = response.data;
},
function (response){
alert("Data Cannot read");
});
});
</script>
</body>
</html>
Output :
Example for $http() function in AngularJS
Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
Data : {{data}}<br />
</div>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $http) {
$http({
method : "GET",
url : "data.txt"
}).then(function (response) {
$scope.data = response.data;
}, function (response) {
$scope.data = "Error";
});
});
</script>
</body>
</html>
Output :
Data : Hello World