Tutorial #22 del curso de Angular JS, en este tutorial continuamos con el manejo de datos, ahora importaremos los datos desde un archivo externo en formato json, y mostraremos estos datos en nuestra aplicación con una lista, utilizaremos el objeto nativo $http para cargar el archivo externo, es muy importante utilizar un servidor web para este ejercicio.
<!DOCTYPE html>
<html ng-app="datosApp">
<head>
<meta charset="utf-8">
<title>Importar datos</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-controller="controladorDatos">
<h1>A-Team</h1>
<p>{{equipo.historia}}</p>
<ul>
<li ng-repeat="intengrante in equipo.integrantes">
{{intengrante.rango}} {{intengrante.nombre}} {{intengrante.especialidad}}
</li>
</ul>
</div>
<script type="text/javascript">
var misDatos = angular.module('datosApp', []);
misDatos.controller('controladorDatos',function($scope,$http){
$scope.importar = function(){
$http.get('datos.json').success(function(datos){
$scope.equipo = datos;
});
}
$scope.importar();
});
</script>
</body>
</html>{
"integrantes": [
{
"nombre": "john 'Hannibal' Smith",
"especialidad": "Estrategia",
"rango": "Coronel"
},
{
"nombre": "Templeton Peck",
"especialidad": "Logistica",
"rango": "Teniente"
},
{
"nombre": "H.M. Murdock",
"especialidad": "Piloto",
"rango": "Capitan"
},
{
"nombre": "B.A Baracus",
"especialidad": "Artilleria",
"rango": "Sargento"
}
],
"historia": "Hace 10 años un tribunal militar condenó a prisión a un grupo de comandos por un crimen que no cometieron, esos hombres escaparon de prisión y si alguien tiene un problema, necesita ayuda y puede localizarlos, tal vez pueda contratarlos."
}