Hasta ahora había mostrado por encima los módulos en AngularJS a la hora de usar los filtros. En este post profundizaré un poco más en este concepto. Un módulo es una colección de controladores, directivas, filtros, servicios y cualquier información de configuración. Sin embargo, no es preciso que un módulo tenga todos los elementos mencionados. Antes de continuar, te recomiendo que tengas claro los conceptos Modelo Vista Controlador que puedes leer en este post.
El método angular.module
La creación, llamada y registro de todos los módulos en AngularJS dependen de angular.module. Es una vía para llamar a la API de módulos y configurar el módulo que queramos.
|
1 |
var miModuloVar = angular.module('miModulo', []); |
El método del módulo, angular.module, se usó para crear un módulo llamado miModulo. Además, el objeto que devuelve angular.module, es asignado dentro de una variable. De esta manera podemos hacer referencia a nuestro módulo usando miModuloVar. Dentro del método se pasa un array vacío, esto es para llamar a las dependencias que vayamos a necesitar, es decir, llamar a otros módulos.
Ahora podemos agregar al módulo un filtro.
|
1 2 3 |
miModuloVar.filter('quitaEspacios', function() { //Código del filtro }); |
Usamos la variable creada para hacer referencia al módulo que hemos creado y con el método filter creamos un filtro llamado quitaEspacios. El segundo argumento es una función anónima que contiene las acciones que queremos que realice el filtro.
De la misma manera, se puede añadir un controlador a nuestro módulo. Para ello en vez de usar filter, empleamos el método controller.
|
1 2 3 4 |
miModuloVar.controller('miControlador', function ($scope) { //Código del controlador } ); |
De esta forma añadimos al módulo el controlador llamado miControlador. Se crea una función anónima que contendrá el código de controlador además de pasarle el objeto $scope que se emplea en la vista para poder acceder a los datos que tenga el controlador.
Poniendo en práctica el módulo
El atributo ng-app que has visto en otros posts anteriores, no sólo permite indicar dónde se ejecutará el código Angular sino también indicar, de manera opcional, qué módulo cargará en la etiqueta donde se encuentre asignado el atributo ng-app.
Si quisiéramos que en toda la página se cargue el módulo que hemos creado, miModulo, sería así
|
1 |
<html ng-app="miModulo"> |
De esta forma todo código dentro <html>, o sea todo, se podrá emplear los recursos del módulo. Esto se podría aplicar a otros elementos de HMTL pero, sólo puede haber un ng-app en la página. Aunque uses la directiva más de una vez, Angular sólo tendrá en cuenta la primera que encuentre.
Para ser un poco más organizado, vamos a meter todo el código del módulo en un archivo .js que llamaremos más tarde en el index. Este sería el contenido de modulo.js
|
1 2 3 4 5 6 7 8 9 10 |
var miModuloVar = angular.module('miModulo', []); miModuloVar.filter('quitaEspacios', function() { //Código del filtro }); miModuloVar.controller('miControlador', function ($scope) { //Código del controlador } ); |
Aunque en este caso, se almacena la referencia al módulo miModulo en una variable, podríamos referenciar al módulo con angular.module().
|
1 2 3 4 5 6 7 |
angular.module('miModulo ', []); angular.module('miModulo').controller('miControlador', function ($scope) { //Codigo del controlador aqui } ); |
Como se puede ver, se emplea el argumento de angular.module para obtener la referencia del módulo creado.
Ambas opciones son válidas pero si prefieres un código menos redundante, te recomendaría almacenar la referencia del módulo en una variable.
Ahora que tenemos nuestro script, vamos a crear un index.html invocando el script y empleando las directivas de Angular necesarias.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html > <html ng-app="miModulo"> <!--Indico el modulo por defecto--> <head lang="en"> <meta charset="UTF-8"> <title>Módulos en Angular</title> <script src="angular.min.js"></script> <script src="modulo.js"></script> <!--Llamo al script que contiene el módulo--> </head> <body ng-controller="miControlador"> <!--Indico donde el controlador tendrá influencia--> </body> </html> |
Hemos asociado nuestro módulo a la página index.html. Además, hemos asociado el controlador dentro del <body>. De este modo, los datos que queramos mostrar de nuestro controlador, se podrán mostrar dentro del elemento <body>.
Y hasta aquí los módulos en AngularJS. En otro post mostraré cómo emplear un filtro personalizado usando módulos partiendo de este ejemplo. A seguir picando 🙂