AjaxAngularJS

AngularJS fornisce il controllo $http, che può essere utilizzato come servizio per leggere dati dal server. Il server esegue chiamate al database per ottenere le record necessarie. AngularJS richiede dati nel formato JSON. Una volta pronti, i dati possono essere recuperati dal server utilizzando $http nel modo seguente-

function studentController($scope, $https:) {}}
　　　var url = "data.txt";
　　　$https:.get(url).success(function(response) {
　　　　　　$scope.students = response;　
　　　});
}

Qui, l'archivio data.txt contiene le registrazioni degli studenti. Il servizio $http invia una chiamata AJAX e imposta la risposta sul proprietà students. Il modello degli studenti può essere utilizzato per disegnare la tabella HTML.

Esempio

data.txt

[
　　　{
　　　　　　"Name": "Sea Gull",
　　　　　　"RollNo": 101,
　　　　　　"Percentuale": "80%"
　　　},
　　　{
　　　　　　"Name": "Dinkar Kad",
　　　　　　"RollNo": 201,
　　　　　　"Percentuale": "70%"
　　　},
　　　{
　　　　　　"Name": "Robert",
　　　　　　"RollNo": 191,
　　　　　　"Percentuale": "75%"
　　　},
　　　{
　　　　　　"Name": "Julian Joe",
　　　　　　"RollNo": 111,
　　　　　　"Percentuale": "77%"
　　　}]

testAngularJS.htm

Esempio

<html>
　　　<head>
　　　　　　<title>Angular JS Include</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>Esempio di utilizzo di AngularJS-Ajax</h2>
　　　　　　<div ng-app="" ng-controller="studentController">
　　　　　　
　　　　　　　　　<table>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<th>Nome</th>
　　　　　　　　　　　　　　　<th>Numerazione di Roll</th>
　　　　　　　　　　　　　　　<th>Percentuale</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 = "/run/angularjs/data.txt";
　　　　　　　　　　　　$http.get(url).then(function(response) {
　　　　　　　　　　　　　　　$scope.students = response.data;
　　　　　　　　　　　　});
　　　　　　　　　}
　　　　　　</script>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.2.15/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

输出结果

要执行此示例，您需要将testAngularJS.htm和data.txt文件部署到Web服务器。在网络浏览器中使用服务器的URL打开文件testAngularJS.htm，然后查看结果。

视图AngularJS 包含AngularJS

Corso di base AngularJS

AjaxAngularJS

Esempio

data.txt

testAngularJS.htm