Cargando...

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.