Front & Back

Blog sobre el Desarrollo de aplicaciones web

Front end Consumiendo un API Rest con Angular.js

Angular.js es un framework para Javascript que extiende la sintaxis de HTML5 para proveer funciones concretas; de esta forma permite realizar operaciones que de otra manera supondrían una gran cantidad de código. Por otra parte ayuda a poner orden en la interacción con el DOM, proveyendo una arquitectura basada en el paradigma MVC.

En este artículo vamos a programar a modo de ejemplo una pequeña aplicación para listar los registros de un archivo que simula el contenido de un servicio REST que nos devolverá los datos en formato JSON.

breaking_bad_char.json


[
{"id": 1,"name": "Walter", "surname": "White"},
{"id": 2,"name": "Jesse", "surname": "Pinkman"}
]

Nuestro objetivo es construir una tabla en HTML a través del contenido de ese recurso. Para hacerlo tenemos en primer lugar que crear el archivo que contendrá la plantilla sobre la que Angular pintará el contenido.

index.html

<!DOCTYPE html>
<html ng-app="myApp"> <!--ng-app define el espacio del DOM donde actuará Angular, y lo vincula con el módulo que hemos llamado "myApp" -->
<head>
<!--El núcleo de Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<!--Esta extensión nos ayudará a manejar de forma sencilla las llamadas al API -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
</head>
<body>
<table id="breakingBadChar" ng-controller="BreakinBadCharCtrl"> <!-- ng-controller define qué controlador se encargará de manejar la tabla-->
<thead>
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="character in characters"> <!-- ng-repeat function como un "for" iterando la variable characters hidratada en el controlador -->
<!-- Muestra los datos del registro -->
<td>{{character.name}}</td>
<td>{{character.surname}}</td>
</tr>
</tbody>
</table>
</body>
</html>

Por sí solo este código no hace nada; ahora necesitamos programar la lógica; comenzaremos en primer lugar por definir el servicio Rest dentro de nuestra aplicación:

js/services.js
angular.module('myAppServices', ['ngResource']).
factory('BreakinBadChar', function($resource){
return $resource(':resourceName.json', {}, {
query: {method:'GET', params:{resourceName:'breaking_bad_char'}, isArray: true}
});
});

Básicamente hemos creado un módulo "myAppServices" que extiende "ngResource" donde indicamos dónde está el origen de los datos y el método de entrada (GET en este caso). Ahora necesitamos un controlador; una función que se encargue de hidratar una variable en el "scope" con los datos del API:

js/controller.js
function BreakinBadCharCtrl($scope, BreakinBadChar) {
$scope.characters = BreakinBadChar.query();
}

En este punto contamos con el modelo, la vista y el controlador, pero necesitamos coesionar su funcionamiento en la aplicación que hemos indicado en el documento HTML "myApp":

js/app.js
angular.module('myApp', ['myAppServices']);

Ahora tendremos que añadir estos archivos a la cabecera de nuestro documento HTML, que quedaría de la siguiente manera:

<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
<script type="text/javascript" charset="utf-8" src="js/controller.js"></script>
<script type="text/javascript" charset="utf-8" src="js/services.js"></script>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>

¡Ojo porque el orden es imporante!

En este punto, cada vez que la página se actualice, Angular se ecargará de conectarse al recurso, iterar el resultado y pintar los datos.