30 Mar 2016

Dibujar lista de elementos con JSON y Angular

Dibujar lista de elementos con JSON y Angular

Angularjs es un framework que esta tomando cada vez más fuerza en los desarrollos web, sobre todo por la facilidad de uso y por la oportunidad que brinda al crear 'plantillas' que son fáciles de mantener

El siguiente ejemplo utiliza la estructura básica de cualquier petición de datos externos y dibuja el resultado según la vista lo define.

<!-- Invocar la libreria -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<!-- Toda esta division contiene la aplicacion 'Customers' -->
<div ng-app="Customers" ng-controller="customersCtrl"> 
	<ul>
<!-- Repetir esto por cada customer que nos devuelve la peticion AJAX -->
		<li ng-repeat="cutomer in customers">
		{{ cutomer.Name + ', ' + cutomer.Country }}
		</li>
	</ul>

</div>

<script>
// Iniciar la aplicacion
var app = angular.module('Customers', []);
// Definir el controladr
app.controller('customersCtrl', function($scope, $http) {
	// Al crear el controlador se hace una peticion ajax...
    $http.get("http://www.w3schools.com/angular/customers.php").then(function(response) {
    	// ... cuando la peticion responde, regresamos los datos
    	// a la variable que hace el ciclo en la vista
        $scope.customers = response.data.records;
    });
});
</script>

Sólo debes guardar el archivo como un html normal en tu webserver y consultarlo desde tu navegador.

Artículos relacionados