English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de AngularJS

Ajax de AngularJS

AngularJS proporciona el controlador $http, que se puede usar como servicio para leer datos del servidor. El servidor realiza llamadas a la base de datos para obtener los registros necesarios. AngularJS requiere datos en formato JSON. Una vez que los datos estén listos, se pueden obtener datos del servidor utilizando $http de la siguiente manera-

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

Aquí, el archivo data.txt contiene registros de estudiantes. El servicio $http realiza una llamada AJAX y configura la respuesta en su atributo students. El modelo de estudiante se puede usar para dibujar la tabla HTML.

Ejemplo

data.txt

[
　　　{
　　　　　　"Name": "Marisco Mar",
　　　　　　"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 sólido gris;
　　　　　　　　　　　　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-Ajax ejemplo de uso</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>
　　　　　　　　　　　　　　　<td>{{ student.RollNo }}</td>/td>
　　　　　　　　　　　　　　　<td>{{ student.Percentage }}</td>/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>
Prueba y observa‹/›

Resultados de salida

Para ejecutar este ejemplo, necesita quetestAngularJS.htmydata.txtEl archivo se despliega en el servidor web. Abra el archivo usando la URL del servidor en el navegador de redtestAngularJS.htmluego ver los resultados.

Vistas de AngularJSInclusión de AngularJS