Primeros pasos con AngularJs: scrum cards para Redmine

En el trabajo se usa Redmine como gestor de proyectos e incidencias. Aunque existen plugins como RedmineBacklogs que permiten darle un uso más acorde a Scrum, la idea es crear algo que no necesite ningún tipo de instalación. Usaremos la API REST que proporciona Redmine para recuperar las issues y darles  el aspecto de tarjetas de Scrum para poder imprimirlas y rellenar el panel físico que todo equipo Scrum debería mantener.

Para hacerlo he escogido AngularJs, un framework JavaScript para construir aplicaciones single-page, más que nada por qué es el framework utilizado para la capa de presentación en el proyecto en el que estoy actualmente.

Equipo:

Entrada a la aplicación

El punto de entrada a nuestra aplicación será la página index.html. Es aquí donde hemos de indicar que se trata de una aplicación angularjs y cargar el javascript necesario.

<html lang="en" ng-app="app">
  <head>
    <script src="src/lib/angular.min.js"></script>

    <script src="src/app.js"></script>
    <script src="src/controllers/IssuesListController.js"></script>
  </head>

  <body>
    <div ng-view></div>
  </body>
</html>

Con la directiva ng-app habilitamos el motor de angularjs. Al indicarle el modulo app le indicamos el módulo que configurará la aplicación.

Hemos de cargar la libreria de angularjs, la del modulo que estamos cargando (app.js) y todos los controladores (IssuesListController.js)

Con la directiva ng-view indicamos el contenedor donde los controladores irán intercambiando las vistas.

Routing

Vamos a configurar la aplicación en el módulo app. Básicamente se trata de asociar una ruta a un controlador y una vista:

angular.module('app', []).

//definimos las rutas de la 'app'
config(['$routeProvider', function($routes) {
  $routes.
    when('/issues', {
      templateUrl: 'src/views/issues.html',
      controller: IssuesListController
    }).

    //cualquier ruta no definida
    otherwise({
      redirectTo: '/issues'});
    }
]);

Controlador

function IssuesListController($scope, $http) {
  $url = 'data/issues.json';
  $http({method: 'GET', url: $url}).
	success(function(data, status) {
	  $scope.status = status;
	  $scope.data = data;
	}).
	error(function(data, status) {
	  $scope.data = data || "Request failed";
	  $scope.status = status;
	});
}

A través de $scope podemos pasar/recuperar variables a la vista. El valor de $scope.data lo podremos recuperar en la vista mediante {{data}}.
Con $http podemos hacer llamadas ajax fácilmente. Es una función con un único parámetro de entrada que genera la petición HTTP y que devuelve una promesa con dos métodos específicos: success y error. De entrada vamos a hacer la petición contra un fichero estático que contiene unas cuantas issues de ejemplo. Estas issues serán pasadas a la vista mediante la variable data.

Vista

En la vista,por el momento, lo que queremos es recorrer la lista de issues y pintar cada una como una tarjeta de scrum.

<div ng-repeat="issue in data.issues">
	<div ng-include src=" 'src/views/scrumcard.html' "></div>
</div>

Para ello hacemos un bucle con ng-repeat y con ng-include incluimos el contenido de scrumcard.html donde estará la presentación final de la tarjeta de scrum. La variable data que ha llenado el controlador se ha convertido en objeto con los datos del documento json que habíamos cargado. Así, para llegar a la lista de issues, es tan sencillo como acceder a data.issues. En la vista scrumcard.html todo lo que hacemos es mostrar los datos que queremos de cada issue:

<div class="row-fluid show-grid">
	<div class="span12">
		<div class="row-fluid show-grid">
			<div class="span2">
				{{issue.tracker.name}}
			</div>
			<div class="span9">
				{{issue.author.name}}
			</div>
			<div class="span1">
				{{issue.id}}
			</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span2">
				Estimation:
			</div>
			<div class="span10">
				{{issue.subject}}
			</div>
		</div>
	</div>
</div>
Anuncios