¿Cómo se estructuran las aplicaciones de Angular desde sus componentes?
En Angular, los componentes son la base para construir aplicaciones robustas, como si fueran piezas de Lego que permiten crear grandes arquitecturas. Un componente en Angular se compone de un template, un CSS y un archivo de lógica en TypeScript. La comunicación entre el template y la lógica se efectúa mediante el property binding y el event binding. Estos permiten enviar datos desde la lógica al template y recibir eventos del usuario, como clics o teclas presionadas, para modificar propiedades del componente.
¿Cómo crear y organizar tus propios componentes?
La versatilidad de Angular no se limita a usar solo etiquetas HTML estándar; puedes desarrollar tus propios componentes, con propiedades y eventos personalizados. Al iniciar un proyecto grande, es conveniente organizar la aplicación en módulos o dominios. Cada dominio puede representar diferentes secciones del proyecto, como productos, ventas o autentificación. Así puedes estructurar tu proyecto de esta manera:
Carpetas por dominio: Cada dominio como "productos" o "ventas" tendrá su propia carpeta.
Subcarpetas para páginas y componentes: Dentro de cada dominio, puedes crear:
Páginas: Utilizadas principalmente en el enrutado de la aplicación.
Componentes: Los bloques reutilizables que componen estas páginas.
¿Cómo se generan componentes desde la terminal?
Una vez definida la estructura, pasa a la terminal para empezar a crear los componentes. Utiliza el comando ng generate o su abreviatura ng g. Por ejemplo:
ng generate component domains/productos/pages/list
Este comando crea una página de lista dentro del dominio de productos. Para componentes más específicos, por ejemplo, para un producto individual:
ng generate component domains/productos/components/product
¿Cómo integrar los componentes en el sistema de rutas?
El siguiente paso es modificar el sistema de rutas para que tu aplicación no dependa exclusivamente del app component, sino que permita el uso de páginas y componentes definidos en tu proyecto modular. Para este propósito se utiliza:
Router Outlet: Este es el elemento que permite el reconocimiento de rutas y el renderizado de componentes según la navegación del usuario.
En el archivo de rutas, asegura que el app component contenga el router outlet para activar la lógica de rutas, y define las rutas necesarias como la ruta inicial vacía ('') que renderice el list component:
const routes:Routes=[{ path:'', component:ListComponent},// otras rutas];
¿Es necesario un archivo separado para cada template?
Para templates muy pequeños, Angular ofrece flexibilidad. No es obligatorio crear un archivo HTML separado para cada template sencillo. Podrías simplificar definiendo el template directamente en el componente mediante la propiedad template en lugar de templateUrl. Pese a esta opción, si el template requiere una lógica compleja, es preferible tenerlo en un archivo separado. Esto ayuda a mantener el código limpio y fácil de gestionar.
¿Cómo puedo reducir el tamaño del app.component?
El app.component puede volverse muy liviano si optas por eliminar un archivo CSS dedicado y eventuales archivos HTML innecesarios, siempre que contengas la lógica necesaria dentro del componente:
Eliminación de archivos innecesarios: Cuando todos los estilos globales están consolidados en un único archivo styles.css, el archivo CSS propio del app.component puede ser redundante y removido.
Simplificación del template: Si tienes un template mínimo, defínelo directamente en el componente para evitar archivos extra.
Con estas acciones, reduces la complejidad y mejoras el rendimiento de tu aplicación a medida que crece.
Si el template es pequeño, podemos usar template directamente y omitir styleUrls:
Ejemplo:
template:'<router-outlet />'
Ventajas:
Separación de lógica y vista: útil para templates grandes y complejos.
Simplicidad y eficiencia: ideal para templates pequeños, evita archivos separados innecesarios.
Consideraciones:
Si el template es pequeño, usar template directamente.
Si el template crece, usar templateUrl.
Omitir styleUrls si no hay estilos específicos o son mínimos.
A mi el truco del <router-outlet /> directo como template del componente no me funciono, me dice que no existe el componente y tengo que crear y ligar un archivo aparte de HTML 🥲
si le cambiaste de templateURL a template?
Recuerda que debes usar template en vez de templateURL cuando solo quieres un string y no enlazarlo a un archivo
Gracias por hacerlo Domain Driven <3 es muy poca la gente que aplica domains lastimosamente :(
📍Mantener el app.component liviano es una buena práctica
Me llevo que un buen enfoque es reducir al mínimo el app.component, eliminando CSS o templates innecesarios y dejando allí solo la estructura base y el enrutamiento global.
📍El Router Outlet como pieza clave
Me llevo que el router-outlet es fundamental para desacoplar la aplicación del app.component y permitir que las páginas reales se rendericen según las rutas definidas.
📍Generar componentes desde la terminal ahorra tiempo
Me llevo que usar ng generate component directamente desde la terminal no solo acelera el desarrollo, sino que además fuerza una estructura ordenada y consistente en todo el proyecto.
📍Organización por dominios desde el inicio
Me llevo la importancia de organizar la aplicación por dominios (productos, ventas, auth, etc.), separando pages y components, lo cual hace que el proyecto sea más escalable y fácil de mantener en aplicaciones grandes.
📍Los componentes como bloques de construcción
Me llevo que en Angular todo gira alrededor de los componentes, que funcionan como piezas de Lego: cada uno tiene su template, su lógica y sus estilos, y se comunican mediante property binding y event binding.
LA división en dominios sería similiar a la división en módulos que se hacía antes?
No necesariamente, es mas una forma de organizar la aplicación
Los inputs en Angular son conceptualmente similares a las props en React. Ambos se utilizan para pasar datos de un componente padre a un componente hijo. En Angular, los inputs se definen mediante el decorador @Input(), que permite recibir datos en el componente hijo. En React, las props se pasan como atributos de un componente y se acceden directamente en el objeto props. Ambos mecanismos favorecen la reutilización y la comunicación entre componentes, facilitando la gestión del estado en aplicaciones.
No me funciono usando el template: '<router-outlet></router-outlet>'
