डाउनलोड पी.डी.एफ. ई-बुक्स
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.txt
Hello 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"}

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