El objetivo de este capítulo no es explicar el concepto de módulo en JavaScript ,que asumimos que como lector lo conoces, sino más bien explicar cómo funciona un módulo en Angular y qué cosas podemos definir dentro de este módulo.

 

En Angular todo gira en torno a la inyección de dependencias y piensa que cualquiera de las funciones que puedes definir en un módulo son inyectables.

 

Los  conceptos que vamos a abordar en este capítulo son:

 

  1. Cómo creo un módulo.
  2. Cómo consumir un módulo.
  3. Cómo obtengo la referencia a un módulo ya creado.
  4. Qué tipo de objetos se pueden crear dentro de un módulo.

 

Otra cosa que te tiene que quedar clara si has leido el capitulo BootStrap de esta serie es que la definición de un módulo no implica para nada el arranque de una app Angular.

 

1. Creación de un módulo.

modulo01

 

En un archivo JavaScript simplemente tienes que escribir esa línea. El primer parámetro de la función module es el nombre de tu módulo y el segundo un array de string con los módulos de los que depende tu módulo, por ejemplo un módulo como ngRoute, que nos sirve para gestionar toda la casuística de routing en Angular. Ambos parámetros son requeridos

 

Existe otro parámetro opcional que es una función Javascript a la que se le pueden inyectar providers y constant de Angular y que es equivalente a module.config.

 

2. Consumir un módulo. Para ello tienes que referenciar dentro del html tus archivos JavaScript, siempre después de angular.js y de los módulos de los que dependa tu módulo.

modulo02

Como puedes observar en el archivo html hemos incluido myApp.js y en la etiqueta html observa la carga automática de nuestro módulo, llamado myApp a través del atributo ng-app.

 

3. Trabajar con un módulo. La mejor forma de ver cómo crear objetos dentro de un módulo, es con un sencillo ejemplo, para ello vamos a crear un controllador al que le vamos a crear un método helloWorld, que escriba por consola “Hello world” y bindear este a la vista de forma que podamos asociarlo al click de un button.

 

myController.js

modulo03

Observa en el código los siguientes detalles.

 

  1. El controlador está en un archivo separado y es así como tienes que escribir cada uno de los componentes en un módulo Angular, entre otras cosas porque te permiten separar cada cosa en un archivo diferente y poder testear una sola unidad, no te preocupes por la cantidad de archivos que tienes, puesto que después con herramientas de build como grunt o gulp, puedes concatenar todos en uno, hacer uglyfi, etc.
  2. Observa que todo el código está en una función autoejecutable que hace que todo se ejecute en el ámbito privado de esta y a la que se le pasa como parametro tu módulo.
  3. La función privada controller, recibe 2 parámetros “scope y window”, y dentro de ella a scope que sería nuestro enlace con la vista (MVVM o MVW) se le define una función “helloWorld”, a la que se le implementa la funcionalidad de escribir en consola “Hello World”.
  4. A la función controller se le define una variable estática llamada $inject que es necesaria para decirle a Angular, que objetos son los que tiene que inyectar. Si quieres ampliar más sobre la inyección de dependencias en Angular te recomiendo estas lecturas.

Inyección de dependencias en Angular

Dependency Injection en Angular

Service locator en angular

$injector

  1. Por último a nuestro módulo se le agrega un controlador con nombre myController y que apunta a la función privada controller. Es una buena práctica que en todos tus objetos utilices un prefijo tal y como lo estamos haciendo en nuestro caso “my”. Angular recomienda que los prefijos sean de dos letras, aunque nadie te impide que utilices 3, 4 o las que quieras, pero hazlo para evitar colisiones con otros módulos en la resolución de la inyección de dependencias.

 

index.html

modulo04

Por último vamos a unir la vista a nuestro código y ver la funcionalidad agregada, para ello tenemos que hacer lo siguiente:

 

  1. Agregar a nuestra vista los dos script necesarios myApp.js y myController.js aparte de angular.js. Esto lo puedes hacer así o bien con herramientas como require.js.
  2. En la etiqueta html agregamos un atributo ng-app con el nombre de nuestro módulo en este caso “MyApp” y esto es requerido para poder trabajar con Angular, recuerda el capítulo BootStrap.
  3. En un etiqueta div agregamos un atributo/directiva ng-controller donde establecemos el nombre de nuestro controlador myController.
  4. Por último a este div le agregamos un button y un atributo/directiva ng-click desde donde invocamos a la función de nuestro scope helloWolrd.

 

El resultado después de hacer click en el button es este.

modulo05

4. Objetos que podemos crear en un módulo. Vamos a separarlos en cuatro bloques bien diferenciados. Configuración, primera ejecución, lógica de negocio y vista.

 

Configuración.

 -config

-interceptor

-decorator

 

Primera ejecución.

run

Lógica de negocio.

-provider

-service

-factory

-costant

-value

Vista

-controller

-directive

-filter

-animation

 

Aunque iremos viendo el funcionamiento a lo largo del tutorial de cada uno de estos elementos te recomiendo esta lectura angular.Module.

Referencias.

Modulo en Angular

A JavaScript Module Pattern

JavaScript Module Pattern: In-Depth

Angular.Module Api

@_PedroHurtado y @XaviPaper

Vinculo hacia el capitulo anterior, (3) Bootstrap

4 Comentarios

  1. Buenas tardes Pedro, Xavi.

    Estoy siguiendo el tutorial al pie de la letra y a la par estoy haciendo una mini-app para ir practicando y así poder ir afianzando conceptos. Ahora mismo la mayor dudad que me surge es acerca de la organización de un proyecto en AngularJS ya que he leído en varios libros distintas propuestas de carpetas y archivos.

    ¿Qué estructura y nombres de archivos recomendáis vosotros?

    ¿Recomendáis el uso de RequireJS para trabajar con AngularJS? ¿Es “obligatorio”?

    :)

    Un saludo.
    Gracias.

    • Hola Miguel Angel,

      Imagino que conocerás esto https://github.com/angular/angular-seed de todas formas te cuento con una estructura parecida pero separando cada pieza de angular en un archivo para mi es lo ideal.

      Hay un proyecto que a mí me gusto bastante como está organizado https://github.com/InternetExplorer/Status.IE está hecho en Node y utiliza Angular, pero fíjate en el Index.html como tiene un comentario en todos los js y para ello utiliza https://github.com/yeoman/grunt-usemin. Esa forma puede ser ideal para una app no muy grande, ya que puedes depurar perfectamente y después cuando vas a pasar a producción haces uglify.

      Respecto a lo que preguntas de RequireJS obligatorio no es, ahora si tu app es muy grande si puede ser una buena opción, de todas formas nosotros en aplicaciones grandes y para evitar el tener cientos de archivos JavaScript que hacen lo mismo una y otra vez utilizamos este repositorio propio https://github.com/MagicCrudAngular/mgCrud, con lo cual toda la lógica de los controladores la hacemos de forma declarativa y te puedo adelantar que en un porcentaje muy grande es la misma, con lo cual tenemos los controladores y servicios justos.

      Esa idea nos surgió cuando estabamos haciendo una app hace ya un par de años y nos dimos cuenta que la lógica de los controladores del servidor la llevamos al cliente, cosa que no nos gusto y nos hizo apostar por esto.

      Gracias!!!

Dejar respuesta