LIBRERIA ANGULAR. PARTE 3. FABRICANDO

<script src=”my own” title=”parte 3. fabricando”>

Como cambian las cosas cuando nos ponemos a inventar. Creo que lo vi en una comiquita venezolana…

¿Qué creen? Hoy es miércoles, y dado que me he retrasado tanto por el laburo y por otras cosas más. He decidido publicar sin más demora la siguiente parte de la creación de nuestra librería que va quedando chula, ¿no? En el post anterior expliqué las Rutas, y en esta parte explicaré las Fábricas, sin olvidar algunas modificaciones adicionales… ¡Manos a la ubre!

Controlando

Si se dieron cuenta en mi repo, hay varios cambios importantes, y uno de ellos es precisamente el hecho de que la lista de libros y la lista de categorías desapareció de los respectivos controladores definidos en controllers.js. ¿Qué pasó? Separé los datos del controlador, mediante un módulo separado para los datos que voy a explicar más adelante, y agregué un nuevo método para cada controlador.

...
$scope.filtrarLibros = function(){
	return libreria.filtrarLibros(parseInt($routeParams.categoria));
};
...

Este método filtrará las lista de libros por categoría.

...
$scope.addCategoria = function(nombre){
	categorias.addCategoria(nombre);
};
...

Este método añadirá una nueva categoría.

Dirigiendo

Tenemos un nuevo template llamado categorias.html que se renderiza cuando se filtran las categorias. Dentro del mismo template (que es una “copia” del template libros.html) todo el filtrado de libros se hace en esta linea:

...
<div class="libro col-xs-6 col-sm-2 text-center pull-left" ng-repeat="libro in filtrarLibros() | orderBy: $index">
...

La función filtrarLibros() del controlador LibrosCtrl se usa para realizar el fitrado en la lista retornada por dicha función. El filtrado se ejecuta tomando como referencia el parámetro establecido en la ruta señalada dentro del template menu_superior.html el cual fue levemente modificado así:

Ahora necesitamos definir la url #/categorias/{{categoria.categoria}} a la que apunta el link de cada categoría.

Enrutando

Definimos la nueva ruta que va a renderizar el template con todas las url definidas en el punto anterior en nuestro archivo router.js.

...
.when('/categorias/:categoria', {
	templateUrl: rootDir+'/categorias.html',
	controller: 'LibrosCtrl'
})
...

En la linea 10, la sección de la url señalada con : indica un parámetro variable que va a ser manejado por el objeto global de Angular llamado $routeParams, el cual puede ser instanciado desde cualquier parte de la aplicación, siempre que se “inyecte” la dependencia de ese objeto en el módulo requerido, tal y como se puede apreciar en la definición modificada de los controladores en el archivo controllers.js.

Fabricando

Una fábrica es un módulo de Angular que se encarga, ni más ni menos, de “fabricar” (valga la redundancia) datos comunes a toda la aplicación y proveerlos donde se “inyecte” dicho módulo. Piensen en ello como una base de datos con tablas nomencladoras en el caso de SQL.

La idea central de la fábrica es buscar que datos comunes pueden existir (entre dos controladores, por ejemplo), para retornarlos agrupados en un objeto definido dentro de la fábrica. En nuestro caso, elaboré dos fábricas, las cuales están definidas en el archivo app/factories.js.

Veamos en detalle la definición de una de ellas:


libreria.factory('categorias', [function() {
	var categorias = {}; //Se define el objeto a ser retornado

	// Refactorizado desde CategoriasCtrl
	categorias.listaCategorias = [
		{categoria: 1, nombre: "Ciencia-Ficción"},
		{categoria: 2, nombre: "Romance"},
		{categoria: 3, nombre: "Histórica"},
		{categoria: 4, nombre: "Misterio"},
	];

	// Método para añadir categorías
	categorias.addCategoria = function(name){
		categorias.listaCategorias.push(
			{categoria: categorias.listaCategorias.length+1, nombre: name}
		);
	}

	return categorias;
}]);

La definición es muy similar a la de un controlador, salvo que usamos la palabra reservada factory para denotar que se trata de una fábrica. Por la forma en la que Angular estructura la las fábricas, se requiere retornar de manera obligatoria un objeto para cada fábrica definida. Por convención, recomiendo usar el mismo nombre de la fábrica como el nombre de la variable que contendrá el objeto a retornar.

La aplicación funciona de manera transparente…

Tiene pinta de librería, ¿no? Se nota que me encanta el azul... juejuejue

Tiene pinta de librería, ¿no? Se nota que me encanta el azul… juejuejue

… y el filtro responde como se espera.

¡Funciona! Me costó hacerlo pero valió la pena

¡Funciona! Me costó hacerlo pero valió la pena

Sigo aumentando +1 a la cuenta. ¡Que emoción! 😉

</script>

Anuncios

Un comentario en “LIBRERIA ANGULAR. PARTE 3. FABRICANDO

Los comentarios están cerrados.