REESCRIBIENDO CONTROLADORES EN ANGULAR.JS

<script src=”my own” title=”reescribiendo controladores en angular.js”>

“Entre gustos y colores no se han escrito autores”, dicen #porai. Eso es cierto hasta que decides por un gusto en particular. En este caso, hablo específicamente de la manera de escribir código (Javascript, por supuesto XD ).

La librería Angular-Classy, propone un estilo de escribir controladores en Angular.js un tanto más estructurado y, tal vez, un tanto más entendible para una persona acostumbrada al orden y a una estructura ordenada (no quiero decir que yo no lo sea, sólo que prefiero las cosas simples a las cosas ordenadas).

Nada milagroso ni holístico, incluímos la librería (después de Angular.js, claro) y la “inyectamos” como dependencia en la aplicación. Bueno, ya que estamos en ese plan, y como para echarle un vistazo a la librería (aparte de quitarme un poco el prejuicio 😈 ), vamos a “reescribir” los controladores que llevamos hasta ahora en mi tutorial:

var libreria = angular.module('LibreriaApp', ['ngRoute', 'classy']);

libreria.classy.controller({
	name: "TemplateCtrl",

	inject: ['$scope'],

	data: {
		templates: [
			{url : 'templates/menu_superior.html'},
			{url : 'templates/nuevo_libro.html'},
			{url : 'templates/nueva_categoria.html'},
			{url : 'templates/comprar.html'}
		]
	}
});

libreria.classy.controller({
	name: "CategoriasCtrl",

	inject: ['$scope', 'categorias'],

	data: {
		categorias: 'categorias.listaCategorias',
		S_categorias: 'categorias'
	},

	methods: {
		nombrarCategoria: function(id){
			return this.$.categorias[id-1].nombre
		},

		addCategoria: function(nombre){
			this.S_categorias.addCategoria(nombre);
		}
	}
});

libreria.classy.controller({
	name: "LibrosCtrl",

	inject: ['$scope', 'libreria', '$routeParams'],

	data: {
		listaLibros: 'libreria.listaLibros'
	},

	methods: {
		filtrarLibros: function(){
			return this.libreria.filtrarLibros(parseInt(this.$routeParams.categoria));
		}
	}
});

Respecto a como estaba antes:

//Módulo principal de la aplicación, con Inyección de Dependencias
var libreria = angular.module('LibreriaApp', ['ngRoute']);

//Controller para administrar los templates
libreria.controller('TemplateCtrl', ['$scope', function($scope) {
	var rootDir = 'templates/';
	$scope.templates = [
		{url : rootDir+'menu_superior.html'},
		{url : rootDir+'nuevo_libro.html'},
		{url : rootDir+'nueva_categoria.html'},
		{url : rootDir+'comprar.html'}
	];
}]);

//Controller para administrar las categorías
libreria.controller('CategoriasCtrl', ['$scope', 'categorias', function($scope, categorias) {
	$scope.categorias = categorias.listaCategorias;

	$scope.nombrarCategoria = function(id){
		return $scope.categorias[id-1].nombre;
	};

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

}]);

//Controller para administrar los libros
libreria.controller('LibrosCtrl', ['$scope', 'libreria', '$routeParams', function($scope, libreria, $routeParams) {
	$scope.listaLibros = libreria.listaLibros;

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

}]);

¿53 líneas de Angular-Classy versus 37 líneas de Angular simple? Mmm, no me parece… o_O

Aunque ciertamente se ve un poco más estructurado, el coste son más líneas de código, que añaden un poco más de “complejidad” a la aplicación. La ventaja en este caso es tener nuestro código fuente con un poco más de claridad. En cualquier caso, pueden ver la documentación de la librería para más información, y mi repo para ver el código fuente.

Pero, y debo insistir: “entre gustos y colores, no se han escrito autores” 😉

</script>

Anuncios