एंगुलरजेएस - अजाक्स
AngularJS $ http कंट्रोल प्रदान करता है जो सर्वर से डेटा पढ़ने के लिए एक सेवा के रूप में काम करता है। सर्वर वांछित रिकॉर्ड प्राप्त करने के लिए एक डेटाबेस कॉल करता है। AngularJS को JSON प्रारूप में डेटा की आवश्यकता है। डेटा तैयार होने के बाद, सर्वर से डेटा प्राप्त करने के लिए $ http का उपयोग निम्न तरीके से किया जा सकता है -
function studentController($scope,$https:) {
var url = "data.txt";
$https:.get(url).success( function(response) {
$scope.students = response;
});
}यहां, फ़ाइल data.txt में छात्र रिकॉर्ड हैं। $ http सेवा एक अजाक्स कॉल करती है और अपनी संपत्ति के छात्रों की प्रतिक्रिया निर्धारित करती है। छात्रों के मॉडल का उपयोग HTML में तालिकाओं को बनाने के लिए किया जा सकता है।
उदाहरण
data.txt
[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]testAngularJS.htm
<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "" ng-controller = "studentController">
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Percentage</th>
</tr>
<tr ng-repeat = "student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url = "/data.txt";
$http.get(url).then( function(response) {
$scope.students = response.data;
});
}
</script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
</body>
</html>उत्पादन
इस उदाहरण को निष्पादित करने के लिए, आपको एक वेब सर्वर पर testAngularJS.htm और data.txt फ़ाइल को तैनात करने की आवश्यकता है । वेब ब्राउज़र में अपने सर्वर के URL का उपयोग करके फ़ाइल testAngularJS.htm खोलें और परिणाम देखें।