Módulo, objeto module en AngularJS

  • Por
  • y  
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">

Nota: La manera recomendada de arrancar la aplicación es con la directiva ngApp, aunque también podrías si lo deseas arrancarla con el método angular.bootstrap().

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.

Nota: Aunque en varios lugares de este manual nos podamos referir a ngApp como "directiva" queremos aclarar que realmente no lo es. La propia documentación de AngularJS también la llama así, pero simplemente es un atributo y sirve para arrancar desde la function BootStrap, que es llamada desde la function angularInit. https://github.com/angular/angular.js/blob/master/src/Angular.js Tampoco queremos liarte de momento con estos detalles, solo era una aclaración que pensamos es importante hacer.

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).

Nota: Los módulos tienen mucha importancia en AngularJS, por lo que aprenderemos a hacer muchas cosas con ellos. De momento me interesan para crear controladores y poder avanar un poco en los ejemplos prácticos del Manual de AngularJS, así que no nos vamos a detener mucho en ellos todavía.

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.

Autor

Pedro Hurtado

Amante de las novedades, defensor de la comunidad. Compartir es la fuente de la Sabiduria. No te cierres en tu mundo y da lo mismo tus creencias. Estamos en mundo abierto. Desarrollador en .Net, Nodejs, Angular convencido y porque no el resto, como G

Autor

Xavier Jorge Cerdá

Xavier, conocido entre sus amigos como Xavi Paper, es CTO en Ambiental Intelligence & Interaction, como desarrollador es especialista en tecnologías Microsoft y en Javascript, impulsor del framework AngularJS.

Compartir

Comentarios

Sebastian

28/2/2016
Error
Puede ser que haya un error en esta línea:

<html ngApp="nuevaApp">

No debería ser:
<html ng-app="nuevaApp">

Ya que como decían en las páginas anteriores en el html se utiliza la notación separada por guiones dejando la notación camelcase para el lado de JS.