Qué son los módulos en AngularJS como crear un objeto module en el framework y qué tipo de cosas se podrán hacer con ellos.
Los módulos son una de las piezas fundamentales en el desarrollo con AngularJS y nos sirven para organizar el código en esta librería. Lo puedes entender como un contenedor donde situas el código de los controladores, directivas, etc.
La incorporación de módulos en AngularJS es motivada por la realización de aplicaciones con mejores prácticas. Son como contenedores aislados, para evitar que tu código interactúe con otros scripts Javascript que haya en tu aplicación (entre otras cosas dejarán de producirse colisiones de variables, nombres de funciones repetidos en otras partes del código, etc.). Los módulos también permiten que el código sea más fácilmente reutilizable, entre otras ventajas.
Indicar el módulo al arrancar la aplicación
Cuando arrancas una aplicación AngularJS, usando ng-app generalmente pondrás el nombre del módulo que quieres ejecutar en tu aplicación.
<HTML ng-app="miAplicacion">
angular.bootstrap(document.getElementById('miapp'), [modulos opcionales];En ese caso se supone que para identificar tu aplicación dentro del DOM le has colocado un identificador "miapp". Aprecia también que los módulos son opcionales e incluso que podría haber varios módulos que deseas arrancar, algo posible, pero raramente usado.
Recuerda que hasta ahora, en lo que llevamos del Manual de AngularJS, en la directiva ngApp, atributo ng-app, no colocábamos ningún valor. Eso era porque hasta el momento no habíamos trabajado con módulos. Sin embargo, a partir de ahora que los aprendemos a utilizar recuerda que los vas a tener que indicar al arrancar la aplicación.
Creación de módulos
Desde Javascript crearás los módulos usando el método angular.module() e indicándole una serie de parámetros. Echa un vistazo a esta sintaxis.
angular.module('miAplicacion', [ ... ], function(...){ ... })La variable "angular" la tienes como variable global cuando cargas AngularJS, dentro tiene un objeto que estará disponible en cualquier parte de tu código. Luego ves "module", que es un método del objeto "angular" y que sirve para crear el módulo. El primer argumento es el nombre del módulo, que corresponde con el nombre de tu aplicación. En el segundo parámetro puedes indicar una serie de módulos adicionales, separados por comas, que serían tus dependencias. Pueden ser módulos de otros autores o puede que tú mismo hayas decidido organizar tu código en diferentes módulos. El tercer parámetro es opcional y en él colocamos una función que sirve para configurar AngularJS.
Para comenzar crearás tus módulos probablemente de una manera sencilla, tal como puedes ver a continuación:
angular.module('nuevaApp', []);En el código anterior "nuevaApp" es el nombre de tu módulo. Como se comentó anteriormente, ese módulo se debe indicar en el bootstrap (arranque) de tu aplicación, comúnmente en la directiva ngApp.
<html ngApp="nuevaApp">
El objeto module
Esta llamada a angular.module() te devuelve un objeto module, que tiene una serie de métodos como config, run, provider, service, factory, directive, controller, value, etc. que son los que nos sirven para controlar la lógica de presentación y la lógica de negocio. Verás dos variantes de código en este sentido:
OPCIÓN 1) Puedes "cachear" (almacenar) el módulo en una variable y luego usarlo para crear tus controladores, factorías, etc.
var nuevaApp = angular.module('nuevaApp', []);
nuevaApp.controller( ... );OPCIÓN 2) Aunque en muchos casos verás que ese objeto module ni siquiera se guarda en una variable, sino que se encadenan las creaciones de los controladores o factorías todo seguido. A esto último se suele llamar estilo "Fluent"
angular
.module('nuevaApp', [])
.controller( ... )
.factory( ... );Estas dos opciones proponen estilos de código distintos. En la segunda opción, al encadenar las llamadas desde la creación del módulo hasta los controladores u otras cosas que necesitemos, nos estamos ahorrando la creación de una variable global, eliminando posibilidad de que colisione con otras del mismo nombre que haya en otras partes de tu aplicación. Como te imaginarás, se recomienda la OPCIÓN 2).
Acceder a un módulo ya creado en nuestra aplicación
El módulo lo crearás una vez, pero puedes necesitarlo en diversos puntos de tu código. Si lo has cacheado en una variable global, tal como se comentaba en la OPCIÓN 1) del punto anterior, podrás acceder a él en cualquier lugar de tu aplicación. Sin embargo, habíamos dicho que no era la opción más recomendable, así que necesitamos alguna otra manera de acceder a un módulo ya creado.
Lo conseguimos por medio del mismo método module() que utilizamos para crear el módulo, solo que en esta ocasión solo le indicaremos el módulo al que queremos acceder.
angular.module('nuevaApp')Por si no has visto la diferencia con angular.module('nombreModulo', []) creamos un módulo y con angular.module('nombreModulo') recuperamos un módulo que haya sido creado anteriormente con el nombre 'nombreModulo'.
Módulos en adelante
Me gustaría terminar el artículo con un ejemplo práctico de uso módulos en AngularJS pero si utilizamos simplemente el nuevo conocimiento de este artículo sería complicado. En realidad los módulos sirven como base para implementar muchas cosas en AngularJS, por lo que enseguida les sacaremos bastante provecho.
En el siguiente artículo nos introduciremos en los controladores y comenzaremos a utilizar el famoso "scope". Para todo ello es condición indispensable comenzar con un módulo, así que las prácticas en esta ocasión las dejaremos para más adelante.
Pedro Hurtado
Amante de las novedades, defensor de la comunidad. Compartir es la fuente de la...