Cuando iniciamos un proyecto en Angular, debemos hacer un análisis cuidadoso de todos los integrantes de nuestra aplicación. Antes de empezar la creación de componentes, es recomendable disponer de un esquema a seguir. Para este ejemplo, seguiremos el siguiente esquema:

 

Esquema Angular

En esta imagen, tenemos 4 componentes: 3 de ellos conforman una estructura de básica de html, mientras que el Config Component es un componente dentro de Header Component.

Creación de componentes

Usando la terminal dentro del directorio raíz de nuestro proyecto, generaremos los componentes necesarios y los organizaremos en directorios.

ng generate c components/layout/header 
ng generate c components/layout/sidebar 
ng generate c components/layout/footer 
ng generate c components/layout/header/config

El resultado final será el siguiente:

Como se puede apreciar en la imagen se ha creado un directorio llamado components, destinado a almacenar los componentes. Layout son aquellos que conforman la estructura del proyecto. Finalmente, dentro de layout tenemos los componentes que hemos creado con anterioridad.

En este punto, si nos fijamos en el archivo app.module.ts dentro de nuestro directorio app veremos que se han realizado automáticamente las importaciones de estos elementos para que puedan ser utilizados posteriormente.

Trabajar con organización en los directorios es imprescindible. No obstante, deberíamos de preguntarnos: ¿es reutilizable? La respuesta es NO. El proceso es correcto pero no está enfocado a la reutilización de esos componentes del proyecto. Además, imaginemos que tenemos cientos y cientos de componentes. En ese caso, nuestro archivo app.module.ts sería demasiado extenso.

Creando un archivo module.ts

Vamos a comenzar creando un archivo que voy a llamar layout.module.ts y lo colocaré dentro del directorio layout.

ng generate module components/layout

El siguiente paso es mover las importaciones realizadas de los componentes creados de app.module.ts a layout.module.ts. El código de layout quedará de la siguiente manera:

Como podéis observar, han cambiado las rutas de los diferentes componentes; los hemos declarado y hemos añadido exports para que sean accesibles desde fuera del directorio.

Ahora, solamente hay que añadir el modulo que acabamos de crear en el archivo app.module.ts de la siguiente manera:

import { LayoutModule } from './components/layout/layout.module';

Añadimos LayoutModule a imports.

Una vez configurado, ya tenemos separado el modulo principal de nuestra aplicación del modulo que se encargará de todo lo que tenga que ver con el layout. De este modo, nuestro layout se ha vuelto una parte más reutizable ya que permite coger todo el directorio de Layout y trasladarlo a otro proyecto. Simplemente importando el módulo, tendremos todo lo necesario del layout.

Aplicando componentes a la vista

Para la vista, es recomendable usar Clarity Design (cómo configurar Clarity Design correctamente). Aplicando los ejemplos de header y sidenav que encontramos en su página oficial, copiamos y pegamos respectivamente en nuestros archivos html, según cada componente.

El resultado final es el siguiente:

A continuación, nos dirigimos al archivo header.component.html de nuestro componente y únicamente introducimos las líneas necesarias que tienen que ver con nuestro archivo, así como los CSS y funcionalidades.

En el esquema, el header a su vez tenía un componente llamado config. Por eso, el html de la sección headers-action de nuestro header lo podemos mover dentro del html de nuestro componente y llamar a su selector desde nuestro header.component.html.

Exactamente igual ocurrirá con el archivo sidebar.component.html. Una vez terminado este paso, abrimos nuestro archivo app.component.html, que es nuestro archivo principal. Aquí, simplemente hay que llamar a los componentes que están dentro de éste, usando sus selectores.

Resultado final

Una vez echo todo lo anterior si usamos el comando ng-serve, podemos ver el resultado final.

En futuras entradas, explicaré las rutas en Angular.

¿Prefieres que te echemos un cable?

A veces, ciertas cosas pueden sonar a chino. Estaremos encantados de conocer tu proyecto para darte una solución personalizada.

¡Contáctanos!

¿Te has quedado con ganas de más?

Echa un vistazo a otros posts del blog.
¡Nos esforzamos por crear contenido útil para ti!

¡Ver posts!

    Deja un comentario

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