Modularizando nuestra aplicación de Angular

Si por algo destaca Angular, es por su gran organización. Todo está correctamente separado por ficheros o directorios en función de su función de lo que hace en nuestra aplicación. Cuando un proyecto de Angular va creciendo/tomando envergadura será necesario el crear muchos componentes, directivas, formularios, clases, interfaces, etc.

Para poder continuar manteniendo este orden en nuestros proyectos, Angular, nos provee de módulos que son capaces de agrupar/contener en su interior a componentes, directivas, formularios, clases, interfaces, etc.

Por tanto, los módulos son mecanismo para subdividir en partes nuestra aplicación. El proceso de subdividir una aplicación en módulos recibe el nombre de modularizar/modularización.

Cuando creamos un proyecto, por defecto, tendremos cómo mínimo 1 módulo el AppModule (Root) que será nuestro CoreModule (módulo central). Aunque si responde Yes a ¿Would you like to add Angular routing? (¿Te gustaría agregar un enrutamiento angular?) se nos crearán dos y no un sólo módulo al realizar la creación de la estructura básica de un proyecto.

Por tanto, si tenemos 1 o 2 dependerá de si creamos routing en nuestro módulo. Si le damos a no tenemos uno solamente el por defecto que sería app.module.ts. En el caso que hayamos contestado Yes a la pregunta del routing podemos comprobar que ya tenemos dos módulos.

Si nos fijamos dentro del array de declarations, declaramos el listado de componentes que formaran parte de nuestro modulo. Además de ello, tenemos que exportar el módulo que nos queremos traer al módulo app.module.ts (Root CoreModule) con el fin de poder tener visibilidad/acceso desde nuestro módulo central. Es decir, declarando como export el módulo le indicamos a Angular que tenemos una especie de “acceso” a ese módulo desde otros módulos.

Creando un módulo

Para crear un módulo vamos a la terminal y podemos crearlo a partir de dos formas:

  • Mediante a la instrucción al completo: ng generate module nombreModulo
  • Mediante a la instrucción abreviada: ng g m nombreModulo

El resultado es el mismo. Vamos a ver un ejemplo:

Si abrimos el fichero podemos ver el código de nuestro fichero:

Ahora vamos a añadir un componente sobre nuestro módulo de Angular.

La primera opción para agregar componentes sobre nuestro nuevo modulo hello-world será utilizar:

  • Mediante a la instrucción al completo: ng generate component nombreComponente
  • Mediante a la instrucción abreviada: ng g c nombreComponente

Esta vez, vamos a utilizar la versión más reducida:

Y vemos que se nos ha generado un componente y que nos lo ha auto asignado Angular en nuestro modulo hello-world.module.ts.

Ahora tendremos que importar el módulo hello-world.module.ts sobre nuestro módulo Root app.module.ts de la siguiente manera:

Si copiamos el selector de nuestro componente que se encuentra dentro del módulo hello-world.module.ts y lo pegamos sobre nuestro componente por defecto (que se encuentra declarado dentro del app.module.ts). Podemos observar que nos aparece un error:

Este error se produce debido a que hemos exportado el módulo hello.world.module.ts pero no hemos exportado el component greet.components.ts y, por tanto, para nuestro app.module.ts el módulo hello.world.module.ts es visible y muestra de ello es que lo hemos importado pero el componente greet.component.ts por el momento no es visible.

Para resolver esto, tenemos que agregar un array de exports dentro del módulo:

Si ahora arrancamos la aplicación, podemos ver que ya tenemos conectado y operativo nuestro módulo de hello-world.module.ts:

Eliminando un componente de un módulo

Existe una alternativa mucho más rápida para hacer esto, si borramos el componente greet:

Si intentamos volver a arrancar la aplicación se nos quejará debido a que hemos eliminado el componente pero aún lo tenemos registrado en el array de declaraciones y del de exports:

Para resolver esto, deberíamos eliminar el componente quedando nuestro hello-world.module.ts de la siguiente manera:

Y finalmente eliminaremos el selector del componente de nuestro template:

Añadiendo componentes en nuestro módulo de una manera más rápida

De hecho, si dentro de nuestro módulo hello-world.module.ts eliminamos el array de exports. Podemos observar que estamos en el punto inicial de cuando habíamos creado nuestro módulo hello-world.module.ts:

Y si ahora hacemos ng generate componente –help (en cualquiera de sus versiones la abreviada o la completa). Podemos observar que nos aparece un listado de muchos argumentos que le podemos pasar a nuestro componente durante su creación:

Nosotros vamos a trabajar con:

Si volvemos a crear el componente de greet pero esta vez añadiendo estos argumentos, podemos observar cómo nos crear el exports (en el caso de que no exista) y nos añade a nuestro  componente:

Como podéis ver esta manera es mucho más rápida que la anterior. Y ahora solo nos faltaría repetir el proceso anterior añadir el selector, a nuestro app.component.ts y ya estaría todo (ya que el módulo ya lo habíamos cargado anteriormente sobre el módulo principal app.module.ts.

Espero que os haya gustado y os haya servido para familiarizaros con el concepto de módulos de Angular. Un saludo 🙂

5 comentarios

  1. Gracias totales

  2. This excellent website really has all the information I wanted
    concerning this subject and didn’t know who to ask.

  3. There’s definately a great deal to learn about this
    topic. I like all of the points you have made.

  4. Wow that was unusual. I just wrote an very long comment but after I clicked submit my comment
    didn’t show up. Grrrr… well I’m not writing all that over again. Anyways,
    just wanted to say fantastic blog! quest bars http://bitly.com/3jZgEA2 quest bars

  5. Thank you for another excellent post. Where else could
    anyone get that type of info in such an ideal means of writing?
    I’ve a presentation next week, and I’m at the look for such
    info. quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar