Crear una aplicación Angular puede ser muy fácil (como lo vimos en este post), pero lo divertido no termina ahí, por el contrario, recién comienza. En esta ocasión les voy a enseñar a agregar un módulo Angular a su aplicación.
¿Qué es un módulo Angular?
Bueno, para arrancar, un módulo es un conjunto de código y de datos relacionados lógicamente, encapsula (o encierra) los detalles de cómo esta escrito el código; esto es para que aquel que usa el módulo no necesite saber «cómo esta hecho», sino «cómo se usa». El módulo expone una API pública, o sea, hace pública la forma en que deben «usarlo». Finalmente, combinando varios módulos se pueden crear aplicaciones mucho más grandes.
Entonces, ¿qué es un módulo Angular?
Es un módulo con esteroides de Angular, je. Yendo al grano, un módulo Angular es una clase declarada con la palabra «ngModule» precedida por un arroba (@)
Un módulo Angular te permite re-agrupar tu código, re-ordenarlo en bloques de código con cierta lógica y agregarle funcionalidades de módulos externos (o de otros módulos que hayamos creado).
Tiene las siguientes ventajas y restricciones con respecto a los módulos Javascript (Para saber mas sobre módulos mira este post):
- En un módulo de Angular sólo se pueden usar clases declarables (o sea, un componente, directiva o pipe de Angular). ¿Que pasaría si importáramos algo que no es una clase declarable? Pues que el código nos arrojaría un error
- En vez de agregar toooodas las clases de tu aplicación en un solo y enorme archivo, las podés agrupar por módulos Angular
- En un módulo Angular, sólo podés exportar (o compartir) con otros módulos Angular, clases declarables de tu propiedad o que te importaste (o trajiste de otro módulo)
- Se le puede agregar funcionalidades extra a TODA tu aplicación Angular agregando servicios Angular.
Una breve explicación
Lo primero que vamos a hacer es crear un proyecto de cero usando Angular-cli (si no sabés cómo hacerlo, mirá este post). Cuando creamos un proyecto de esta forma ya se nos crea un módulo Angular, llamado «App» y, dentro de ese módulo, un componente llamado «app»
Tendríamos algo así:
La idea es agregarle un segundo módulo Angular, que dependa del módulo que ya existe «app«. Lo vamos a llamar «Cocina»
¡Manos a la Obra!
Lo primero que vamos a hacer es crear un proyecto de cero usando Angular-cli.
ng new mi-casa-inteligente
Como mencionamos antes, se nos crea un módulo «app» y dentro, su componente «app» (el componente sería la página web)
El siguiente paso es agregar el módulo «Cocina», esto lo hacemos con el siguiente comando:
ng g module cocina
nota: (este comando hay que hacerlo dentro del directorio «mi-casa-inteligente» que se crea cuando hacemos ng new mi-casa-inteligente)
Esto nos crea un directorio «cocina» junto con su módulo «cocina.module.ts»
Ahora veamos qué tiene el archivo «cocina.module.ts» que se creó en el paso anterior
Primero, vemos que el módulo Angular es una clase, como mencionamos antes, llamada «CocinaModule»
Después, algo interesante, la clase «CocinaModule» es «decorada» con la palabra NgModule (o sea, se agrega «@» seguido de NgModule). Esto le indica a Angular que ésta clase «CocinaModule«, es un módulo Angular.
Por último, vemos que en el módulo Angular se importa el módulo «CommonModule» y que, para usar tanto los módulos «NgModule» como «CommonModule» (que son propias de Angular), hay que importarlos usando la forma de TypeScript (para más detalle, ver el siguiente post)
Y ahora, ¿cómo uno la cocina con el resto de la casa?
¡Acá falta algo! ¡la cocina no está dentro de la casa! Efectivamente, el módulo «Cocina» todavía no está linkeado a la aplicación, sólo está creado el módulo, pero volando en el aire. Sería algo así:
Ahora, lo que hacemos es agregar el módulo «Cocina» al módulo «app» (en el archivo «app.module.ts» del proyecto que se creó con el comando «ng new mi-casa-inteligente«). Para ésto, a la lista de «imports«, que está dentro de nuestro módulo Angular, se agrega el módulo «CocinaModule«, que creamos en el paso anterior
Y así conectamos los dos módulos y ¡ampliamos nuestra casa!
Conclusiones
Si bien hay muchas cosas mas que se pueden hacer con los módulos de Angular, esto sería lo necesario para arrancar. En otros posts, explicaré el resto de las opciones para hacer nuestra «casa» todavía mas inteligente ;=)
Suscribíte a la Newsletter!
Si te suscribís, nunca te vas a perder un post Y vas a tener acceso a mi contenido exclusivo de forma totalmente gratuita. ¡Suscribite!
gustavodohara.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Gustavo Dohara como responsable de esta web.
Finalidad de la recolección y tratamiento de los datos personales: gestionar el alta a esta suscripción y remitir boletines periódicos con información y oferta prospectiva de productos o servicios propios y de terceros afiliados.
Legitimación: Consentimiento del interesado. Destinatarios: Mailchimp. Puedes consultar aquí su política de privacidad. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en gustavo@gustavodohara.com así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad