Esta publicación tiene 15 meses de antigüedad, te invitamos a buscar publicaciones más recientes relacionados a este tema aquí.

Hola chicos, este tema ya lo hemos visto en publicaciones pasadas pero no está de más volver a explicar este tema que es muy importante a la hora de trabajar con AngularJs. 

 

La razón por la que quiero escribirles este tema es que les enseñaré también a cómo crear nuestros propios filtros en AngularJs pero para esto primero necesitamos aprender cómo hacer módulos, ya que los filtros van incluidos en los módulos. 

¿Que es un módulo en AngularJs?

La definición que le da la documentación oficial de AngularJs dice que podemos referirnos a un módulo cómo un contenedor para las diferentes partes de una aplicación: controladores, servicios, filtros, directivas y mucho más. 

Otra pregunta muy importante es ¿Porque utilizar módulos en AngularJs? hay un par de razones que debemos resaltar, primeramente por la razón común que con un módulo podemos hacer fácilmente código reutilizable.

Por ejemplo: si estamos creando una plataforma de audios y para esta plataforma necesitamos crear un modulo para subir los audios al sistema, entonces en nuestro módulo crearemos una colección de controladores, servicios y filtros. Y si tuviéramos otro proyecto donde necesitaramos este mismo módulo entonces solo copiamos el módulo creado y lo reutilizamos. 

La otra razón por la que utilizamos módulos en AngularJs es porque cuando nos encontramos haciendo “unit testing” lo único que necesitamos es cargar los módulos relevantes, así, será más fácil de entender y seguir cada componente rápidamente. 

¡Creando un módulo en AngularJs!

Crear un módulo en AngularJs es bastante sencillo, lo único que tenemos que hacer es declarar angular.module y entre paréntesis el nombre del módulo seguido de las dependencias que le vayamos a adjuntar a ese módulo:

angular.module('nombreModulo', []);
 

Nota: en nuestro caso dejamos el array vacío debido a que no queremos adjuntarle ninguna dependencia al módulo.

Entonces, cómo ya lo mencionamos nuestro módulo va a ser un contenedor para los controladores, servicios, filtros, etc. es decir, nuestro código quedaría de la siguiente manera:

angular.module('nombreModulo', [])
 
.controller('nombreControlador', function($scope, jsonFilter){
 
...
 
});
 

Para que nuestro módulo funcione tenemos que especificarlo en la vista (HTML), es decir, agregarlo a la directiva ng-app="nombreModulo".

<html lang="en" ng-app="contactsMgr" ng-controller="AppCtl">
 

Código de ejemplo sobre creación de módulo en AngularJs:

HTML

<!DOCTYPE html>
<html lang="en" ng-app="contactsMgr" ng-controller="AppCtl">
	<head>
		<meta charset="utf-8">
		<title>Contact Manager</title>
		<link rel="stylesheet" type="text/css" href="css/filters.css">
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="js/controller.js"></script>
	</head>
	<body>
 
		{{contacts | json}}
 
	</body>
</html>
 

MODULE

angular.module('contactsMgr', [])
 
.controller('AppCtl', function($scope, jsonFilter) {
	$scope.contacts = [
		{
			name: 'Cristina rojas',
			phone: '12345',
			email: 'cristina@gmail.com'
		},
		{
			name: 'Francisco Santana',
			phone: '213124',
			email: 'francisco@gmail.com'
		},
		{
			name: 'Carlos Santana',
			phone: '56789',
			email: 'carlos@gmail.com'
		}
	];
});
 

En la próxima publicación estaremos viendo como crear nuestros filtros en AngularJs.

@telecristy.

¿Te gustó esta publicación? Márcala como favorita