Excelente referencia Leifer hace 4 meses estaba buscando justo esto. Jaja y no encontré ese artículo pero ahora comprendo mejor lo que decía Dominicode con respecto a crear un módulo por componente. Exelente estoy muy feliz
@@LeiferMendez Una pregunta y que recomiendas para los módulos de Angular Material?? Yo lo trabajaba como un modulo que podía importar en el modulo donde es requerido.. Pero con esta explicación que diste, no me parece bueno cargar todos los modulos del material cada vez que lo necesite algún componente?
Buen video Leifer. Se explican conceptos como el page y components que no los tenía muy claro. Por cierto, en un artículo de Tomas Trajan, leí que no era recomendable usar los servicios dentro de la carpeta/modulo shared ya que cada modulo cargado perezosamente y que importe el modulo shared creará una instancia del mismo servicio y que la mayoría de las veces queremos que los servicios sean globales . Gracias por compartir y enseñar tus conocimientos.
OJO hay que aclarar varios puntos importantes que le faltaron a tu video, y es que antes de la version 9, si existia la preocupacion de la carga de los componentes.(Que si creo muchos componentes en un solo modulo o muchos modulos para 1 o 2 componentes). Lo cierto es que en tiempo de ejecucion cargar 100kb 0 1mb no marca mucha diferencia pero cuando la aplicacion es enorme si lo hace. Es por ello que se implemento el TREE SHAKING, el cual es un mecanismo del motor IVY que optimiza el compilado de las aplicaciones angular 9+. Por lo que no interesa cargar 20 o 30 componentes en un modulo, ya que en el compilado solo se cargara lo que el modulo necesite en ese momento. Asi que crear 1 modulo para cada componente solo beneficia en tema de escabilidad y mantenibilidad, mas no de tiempos de ejecucion. Con respecto a la estructura de carpetas, pues depende del patron arquitectonico que uses y la logica del negocio.
Saludos Miguel muchísimas gracias por tu comentario le aporta un gran valor al video, cada día aprendemos más y más 🎉🎉 lo tomaré en cuenta para próximas videos
@Leifer: Podrias hacer un curso de udemy con una app/caso real sobre gestion de almacen(warehouse) que hice en Django para empresa de automocion donde poder aplicar esa organizacion..etc.. muy buena explicacion.
Me parece que el tema de la carpeta shared, se resolvió ahora con el standalone component, donde podemos usar componentes sin declararlos en un módulo. Es cierto que está el Tree Shking de Ivy y todo eso, pero muy en el fondo, es cierto que si el proyecto es grande, algo te dice que no es necesario cargarte 30 componentes que tengas en el shared.module para solo usar uno... Por lo menos así lo veo. Creo que, ahora lo que tenga en el shared, lo usaría como standalone Solo una consulta, es que estoy en investigación del tema de arquitectura para proyectos angular. ¿Este video lo hiciste antes o después del que hiciste con Gentleman Programming de Clean Architecture? Por cierto, también soy un web developer venezolano en españa, un saludo🙌🏻
Hola Leifer excelente video 😀👍, una pregunta cómo hacés la configuración para que al importar el SharedModule aparezca from '@shared/shared.module'? Y no from '../../shared/shared.module'.?
Hola Enrique. Eso lo puedes hacer, agregando la propiedad "path" dentro de la propiedad "compilerOptions" en el archivo tsconfig.json. "compilerOptions":{ "path":{ "@shared/*": ["src/app/shared/*"] } }
Amigo, queria echarle un vistazo al proyecto de spotify pero requiere de un servicio en el puerto 3000 para funcionar y no lo vi en el repositorio, donde lo podria revisar? gracias
Ahora me quedo con la duda, es recomendable crear el típico módulo de angular material donde tienes todos los componentes de angular material y ese módulo me lo voy importando por todos lados, como debería ser ahí, importar cada módulo del componente donde lo necesite y no importar todo el modulo que en teoría tiene cosas que no ocupo?
@@LeiferMendez Gracias bro. con respecto al video... entonces una buena practica sería crear un modulo por cada componente sin importar si el proyecto es pequeño como un portafolio? Así sean componentes tan simples como un botón? lo digo para empezar a usar buenas practicas desde el principio para hacerlo de forma natural en futuros proyectos. y de ser así, tendría una carpeta Shared pero que funcione de forma conceptual, con esto me refiero a que solo sería una carpeta para identificar los componentes que uso de forma compartida en el proyecto y no que sea un modulo para evitar el problema de peso al usar uno de esos componentes compartidos. Espero haberme explicado lo mejor posible. Gracas de antemano por tu tiempo. ¡Saludos!
Hola, una consulta... si tengo un sitio web estatico (maquetado con html , css y js) donde deberia ir ubicado en mi app de Angular ? (es decir, que carpeta y subcarpeta deberia crear para alojar dicha referencia). "ejemplo, las vistas van en la carpeta views" - a esto me refiero - Ya que tengo que integrar todo en un mismo repo para que quede vinculado y no me doy cuenta donde iria ubicado. Gracias de antemano ^^
Excelente video Leifer, muchas gracias!! Una consulta.. ¿cómo puedo crear la estructura del video usando sólo cli? Por ejemplo: src/modules/home/home.module.ts (con lazy loading, por ende actualizando app-routing.module.ts) src/modules/home/home-routing.module.ts src/modules/payments/paginas/payments-stepOne/payments-stepOne.component.ts (actualizando home.module.ts y home-routing.module.ts)
Gran video Leifer... Lo único que no me quedo muy claro fue el tema de shared module, entonces es mejor crear un module por cada componente compartido para evitar sobrecargar shared, para usarlos sería solo importarlos donde necesite ? Osea ya no importar el shared module completo ?
Buena Noche, Leifer una pregunta, yo tengo un proyecto el cual utilizo alias ejemplo @shared/shared.module, pero cuandoejecuto el ng test genera un error por que no encuentra la importación de los alias en la configuración normal que se crea en el spec por ejemplo si el componente es creado con éxito, no se si sabes cual pueda ser al solución o que se le debe configurar para que reconozca las pruebas, gracias
Métele DDD y sin importar la versión de Angular va a estructurar mejor tu proyecto, de hecho ninguna estructura debería depender de qué tipo de detalle de implementación tecnológica sin importar si está hecho en React, Angular, Flutter etc....
𝘼𝙉𝙂𝙐𝙇𝘼𝙍 principiantes ⮕ link.codigoencasa.com/PROMO-INICIAL
ANGULAR desde cero ⮕ bit.ly/367tJ32
NODE Express desde cero ⮕ bit.ly/3od1Bl6
MONGODB desde cero ⮕ bit.ly/3qh35wK
SOCKET desde cero ⮕ bit.ly/3pg1Q02
Llevaba ratos buscando una estructura bastante limpia y escalable.
Gracias por el video.
Excelente video, me gustaria saber como hacer para implementar roles en la arquitectura modular
Hice tu curso en Udemy y este vídeo me ayudo a refrescar todo. Muchas gracias!!
Excelente referencia Leifer hace 4 meses estaba buscando justo esto. Jaja y no encontré ese artículo pero ahora comprendo mejor lo que decía Dominicode con respecto a crear un módulo por componente. Exelente estoy muy feliz
Saludos Dajan excelente Sisi cada día aprendemos más y es la idea 💡
@@LeiferMendez Una pregunta y que recomiendas para los módulos de Angular Material?? Yo lo trabajaba como un modulo que podía importar en el modulo donde es requerido.. Pero con esta explicación que diste, no me parece bueno cargar todos los modulos del material cada vez que lo necesite algún componente?
Muchas gracias por compartir tu conocimiento, muy bien explicado!!
Gracias Leifer. Con el standalone se soluciona el tedio de hacer módulos por cada componentes.
Justo mañana presentare la estructura del proyecto(carpetas), Gracias por compartir esos conocimientos Saludos
Gracias a ti Jesús por comentar y formar parte de esta comunidad
Buen video Leifer. Se explican conceptos como el page y components que no los tenía muy claro. Por cierto, en un artículo de Tomas Trajan, leí que no era recomendable usar los servicios dentro de la carpeta/modulo shared ya que cada modulo cargado perezosamente y que importe el modulo shared creará una instancia del mismo servicio y que la mayoría de las veces queremos que los servicios sean globales . Gracias por compartir y enseñar tus conocimientos.
Gracias Januz por tu comentario perfecto tu aportación si pudieras dejar el link de post sería excelente
@@LeiferMendez Estoy tratando de compartir el link pero UA-cam me está borrando la respuesta.
tomastrajan.medium.com/how-to-build-epic-angular-app-with-clean-architecture-91640ed1656
OJO hay que aclarar varios puntos importantes que le faltaron a tu video, y es que antes de la version 9, si existia la preocupacion de la carga de los componentes.(Que si creo muchos componentes en un solo modulo o muchos modulos para 1 o 2 componentes). Lo cierto es que en tiempo de ejecucion cargar 100kb 0 1mb no marca mucha diferencia pero cuando la aplicacion es enorme si lo hace. Es por ello que se implemento el TREE SHAKING, el cual es un mecanismo del motor IVY que optimiza el compilado de las aplicaciones angular 9+. Por lo que no interesa cargar 20 o 30 componentes en un modulo, ya que en el compilado solo se cargara lo que el modulo necesite en ese momento. Asi que crear 1 modulo para cada componente solo beneficia en tema de escabilidad y mantenibilidad, mas no de tiempos de ejecucion. Con respecto a la estructura de carpetas, pues depende del patron arquitectonico que uses y la logica del negocio.
Saludos Miguel muchísimas gracias por tu comentario le aporta un gran valor al video, cada día aprendemos más y más 🎉🎉 lo tomaré en cuenta para próximas videos
Gracias por compartir tu tiempo y conocimiento,
Muchas gracias por compartir tu conocimiento.
Gracias a ti Antony por comentar y pasarte
Gracias, buen aporte. La estructura es algo muy importante.
Gracias por comentar Jampool siempre es importante tener en cuenta la estructura
@Leifer: Podrias hacer un curso de udemy con una app/caso real sobre gestion de almacen(warehouse) que hice en Django para empresa de automocion donde poder aplicar esa organizacion..etc.. muy buena explicacion.
Me parece que el tema de la carpeta shared, se resolvió ahora con el standalone component, donde podemos usar componentes sin declararlos en un módulo.
Es cierto que está el Tree Shking de Ivy y todo eso, pero muy en el fondo, es cierto que si el proyecto es grande, algo te dice que no es necesario cargarte 30 componentes que tengas en el shared.module para solo usar uno... Por lo menos así lo veo. Creo que, ahora lo que tenga en el shared, lo usaría como standalone
Solo una consulta, es que estoy en investigación del tema de arquitectura para proyectos angular. ¿Este video lo hiciste antes o después del que hiciste con Gentleman Programming de Clean Architecture?
Por cierto, también soy un web developer venezolano en españa, un saludo🙌🏻
Hola Leifer excelente video 😀👍, una pregunta cómo hacés la configuración para que al importar el SharedModule aparezca from '@shared/shared.module'? Y no from '../../shared/shared.module'.?
Hola Enrique. Eso lo puedes hacer, agregando la propiedad "path" dentro de la propiedad "compilerOptions" en el archivo tsconfig.json.
"compilerOptions":{
"path":{
"@shared/*": ["src/app/shared/*"]
}
}
Excelente Januz colocando los alias
Excelente muchas gracias Januz y Leifer.
Amigo, queria echarle un vistazo al proyecto de spotify pero requiere de un servicio en el puerto 3000 para funcionar y no lo vi en el repositorio, donde lo podria revisar? gracias
excelente video
Ahora me quedo con la duda, es recomendable crear el típico módulo de angular material donde tienes todos los componentes de angular material y ese módulo me lo voy importando por todos lados, como debería ser ahí, importar cada módulo del componente donde lo necesite y no importar todo el modulo que en teoría tiene cosas que no ocupo?
Gracias
Hola Leifer. la apliacion que creaste en angular (similar a spotify) no está en el curo de Angular de UA-cam o si? Gracias de antemano.
Hola Julian gracias por preguntar esa esta solo en Udemy link.codigoencasa.com/PROMO-INICIAL
@@LeiferMendez Gracias bro. con respecto al video... entonces una buena practica sería crear un modulo por cada componente sin importar si el proyecto es pequeño como un portafolio? Así sean componentes tan simples como un botón? lo digo para empezar a usar buenas practicas desde el principio para hacerlo de forma natural en futuros proyectos. y de ser así, tendría una carpeta Shared pero que funcione de forma conceptual, con esto me refiero a que solo sería una carpeta para identificar los componentes que uso de forma compartida en el proyecto y no que sea un modulo para evitar el problema de peso al usar uno de esos componentes compartidos. Espero haberme explicado lo mejor posible. Gracas de antemano por tu tiempo. ¡Saludos!
Excelente video. Una consulta, que herramientas es esa que usas para modelar la estructura de carpetas?
Hola Darwin la herramienta que uso es whimsical.com/
Hola, una consulta... si tengo un sitio web estatico (maquetado con html , css y js) donde deberia ir ubicado en mi app de Angular ? (es decir, que carpeta y subcarpeta deberia crear para alojar dicha referencia). "ejemplo, las vistas van en la carpeta views" - a esto me refiero - Ya que tengo que integrar todo en un mismo repo para que quede vinculado y no me doy cuenta donde iria ubicado. Gracias de antemano ^^
Muy bueno Leifer, la gran pregunta cada ves que inicio un proyecto es que estructura de carpetas uso. 🙌
Saludos Mariano esta es una muy usado aunque también existen otras espero traerlas próximamente
Que gran video! Por cierto, donde consigues que te hagan esos iconos que tienes? o los haces en alguna página web? me interesa!👀
Saludos Adamari los realiza un conocido 👋
@@LeiferMendez Súper! Si tiene alguna página o algo déjala
Excelente video Leifer, muchas gracias!!
Una consulta.. ¿cómo puedo crear la estructura del video usando sólo cli?
Por ejemplo:
src/modules/home/home.module.ts (con lazy loading, por ende actualizando app-routing.module.ts)
src/modules/home/home-routing.module.ts
src/modules/payments/paginas/payments-stepOne/payments-stepOne.component.ts (actualizando home.module.ts y home-routing.module.ts)
Gracias a ti por formar parte de la comunidad. Un saludo!! ✌
Gran video Leifer... Lo único que no me quedo muy claro fue el tema de shared module, entonces es mejor crear un module por cada componente compartido para evitar sobrecargar shared, para usarlos sería solo importarlos donde necesite ? Osea ya no importar el shared module completo ?
Exacto Joel si tú aplicación la estás pensando para una escalamiento alto y desacoplado se suele usar de esa manera módulo por componente
ayuda, porque al crear un proyecto en angular no me aparece la carpeta environments?
Buena Noche,
Leifer una pregunta, yo tengo un proyecto el cual utilizo alias ejemplo @shared/shared.module, pero cuandoejecuto el ng test genera un error por que no encuentra la importación de los alias en la configuración normal que se crea en el spec por ejemplo si el componente es creado con éxito, no se si sabes cual pueda ser al solución o que se le debe configurar para que reconozca las pruebas, gracias
Hola Andrés, asegúrate de que estés declarando los alias en el archivo principal del ts config.
Un saludo!
Una pregunta como haces para que los comentarios al momento de escribir TODO: se remarque en un color, en tu caso amarillo...
marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
Métele DDD y sin importar la versión de Angular va a estructurar mejor tu proyecto, de hecho ninguna estructura debería depender de qué tipo de detalle de implementación tecnológica sin importar si está hecho en React, Angular, Flutter etc....
Y el core ?
vengo del futuro y ya no hay módulos - standalone : true.
Es como hace angular material :v
Saludos José no suelo usar mucho material pero puede que sí tenga una estructura basada en este patrón gracias por comentar 👏👏