¡Gracias por tu comentario, Sonia! La verdad es que estamos encantados con Mario, es muy top explicando, así que nos alegramos de que nuestro contenido te sirva de ayuda :)
Excelente video, muy claro y ejemplificador, con ejemplos prácticos, una joya del desarrollo en angular. Lo estoy aplicando en la migración de un proyecto personal en Angular 18 y me viene muy bien todos los tips, muchas gracias!
¡¡¡¡¡¡ FELICIDADES !!!!!!! 👏👏👏 Por fin alguien que explica de forma clara y muy consisa el uso de los standalone component. Así como es una estructura de carpetas para tener un código organizado y escalable. Muchas gracias por compartir formación para torpes como yo. Saludos desde Sevilla. Te pediría un video sobre un login con refresh token para torpes ya que lo que veo por ahí lo hacen súper complicado mezclando cosas que no tienen nada que ver con el login y lo complican demasiado. Gracias de antemano
@@Garajedeideas Me sumo a esta solicitud. Estoy desarrollando una API en Laravel con Laravel Sanctum Token for Mobile Applications y seria interesante ver como lo implementas. Gracias!
Buen video! Conciso, claro y con ejemplos reales. Es la arquitectura que a mi me gusta utilizar con lo que coincido plenamente. Como dices al final yo agrupo las funcionalidades en una carpeta. Me hubiera gustado ver cómo organizarías la parte de los tests (por ejemplo los mocks asociados a ellos). Gracias por el video de nuevo!! Quedo a la espera de más así 😊
Eso daría para hablar mucho :). Depende de cómo te sientas más cómodo. Se podrían establecer los tests dentro de cada una de las funcionalidades o replicar la estructura de carpetas dentro del directorio clásico de tests, ahí no tengo todavía muy clara mi postura :)
En mi caso lo lleve un poco mas allá, aparte del auth admin core y shared, tuve un public y un private, meti los modulos segun el nivel de acceso a ellos
Muy bueno!, me estaba enrredando sin al app.component y donde voy a importar el httpclient, forms module, reactive forms, material design y demás, pero ya vi de manera general cómo hacerlo, muchas gracias.
Gracias. Hace poco conocí Angular 16 modificando un proyecto, y no tenía claro cómo se debería manejar las rutas en Angular 17 en un proyecto personal. Gracias por aclararlo.
Uff, muchas gracias por tu explicación de como ordenar bien las rutas. Sabía hacer esto solo con la técnica de los modulos... con standalone ponía todas las rutas en el archivo principal y se veía tremendo archivo todo lleno de comentarios para no perderme.
Yo recomendaría meter cada una de las carpeta con funcionalidades en una carpeta homóloga de lo que antes era modules. Puede suceder que si el proyecto es muy grande y tiene muchas funcionalidades se acumularía eso de muchos directorios al mismo nivel donde están core y shared lo que podría ser un poco dificil de ubicar a simple vista.
Gracias por tu aporte , queria saber como puedo hacer para que al momento de renderizar mi layout de admin , no me renderize el layout principal de app.component ?
Tremendo el video. Muy bueno y muy claro. ¿Cómo lo adaptarías a Clean Architecture? ¿La carpeta de Core es equivalent a la capa de Aplicación en ese diseño de arquitectura?
estaria bueno un video con un proyecto usando esta arquitectura, xq veo que hay ficheros que los mueves a otras carpetas de las que da por defecto angular o eso me parece, y bueno estaria bueno ver ese proceso de construccion desde adentro.
tambien se puede por ejemplo en la carpeta articles crear sub carpetas. article components interfaces/models services para que cada modulo tenga sus servicios independientes y modelos. porque tenerlos todos en la carpeta core no es complicado. O como seria mejor maestro?
Es otra opción muy buena. Creo que depende de lo encapsulado que esté tu funcionalidad. Si tienes muchos componentes globales al final vas a tener que ponerlos en un ámbito superior. Pero sí, es otra opción muy a tener en cuenta
Muchas gracias por compartir estos conocimientos!!! tengo una duda, que programa utilizas para hacer los draw en la pantalla? (dibujar en la pantalla) me seria muy util..
Por qué ven tan necesario usar Angular o React, si esas funcionalidades se pueden hacer con javascript puro, en la estructura index.html, style.css y la carpeta con los javascript. Quiero entenderlos, para que Angular o React?
excelente video 🔥, quizás mas adelante podrias hacer este mismo ejemplo pero creando micro-frontends seria interesante ver en angular 17 como hacer eso, saludos desde Colombia
Gracias por el vídeo. Tienes algún tutorial donde expliques algo más sobre los guard?. He estado buscando información en mdn y aparece que están deprecados pero no estoy seguro al 100% sin se trata de lo mismo
Gracias a ti por tu aportación :). Nos anotamos los guard por si podemos encajar algún vídeo sobre ello o pasaros alguna info más detallada en el apartado de comunidad de nuestro canal.
Uso loadchildren porque estoy cargando otro fichero de rutas a partir de la principal. Si en vez de un fichero de rutas cargase un único componente, utilizaría loadComponent
No sé si te refieres a configurar subdominios. Desconozco con las herramientas de Angular si se puede hacer. Quizá es una configuración propia del seevidor donde colocas la app
El uso de módulos entra dentro de las buenas prácticas del desarrollo de software en general, y eso no cambia con las últimas versiones de Angular a pesar de que ahora sea todo standalone por defecto. Las nuevas versiones de Angular son para atraer gente del mundo de React, Vue y Vanilla JavaScript y que la gente que no sabe de arquitectura de software pueda seguir haciendo sus chapuzas incluso con Angular. Es más mercadotecnia que otra cosa.
Tengo una pregunta un poco pava. Si dentro de mi home quiero llamar 2 componentes. Banner y products. Como seria la manera correcta? (Es que me aparece en todas las paginas)
Amigos recomiendan aprender Angular? Ya se las bases de Angular pero desde hace meses termine aprendiendo React y despues nextjs, y ahorita estoy en Nextjs, pero veo que Angular podria tener mayor posibilidades para emigrar no?
Creo que lo importante aquí es tener una base fuerte de cómo se desarrollan aplicaciones web independientemente del framework o librería que utilices para ello. A partir de una buena base, dar el salto de una a otra es sencillo.
El framework de Angular genera aplicaciones web para la parte del front, es decir, se ejecutan en el cliente. Para poder hacer una interfaz en el back dependerá de la tecnología que uses en dicho back
No te parece mejor guardar los modelos de article dentro de la carpeta article? es decir, tratar de dejar el core lo más agnóstico, posible, dejando elementos que tengan una sola instancia y sean globales en toda la aplicación
7 หลายเดือนก่อน +1
Y los servicios de articles tb?, pero que tontería, los modelos son transversales
Hola buenas, haciendo un proyecto usando la librería de componentes PrimeNG con Angular 17 es necesario el app.module.ts ya que PrimeNG aún funciona con eso. La estructura de un proyecto con Angular utilizando PrimeNG sería igual o parecida a esta?
No es necesario contar con el módulo para usar PrimeNG. Importas el módulo del componente que vayas a utilizar dentro de tu propio componente, en la propiedad imports del decorador @Component Para el tema de las animaciones, puedes incluirlas en el array de providers del fichero app.config. Otra cosa es que no hayan modificado la documentación
@@mariogiron Ah pues mira, seguramente porque llevo ya varios días metiendome cabezazos con Angular y PrimeNG porque todos lo explican con el app.module.ts y no sabía si es que primeNG aún lo necesita, muchas gracias
👉 ¡En Garaje, seguimos creciendo! Conoce nuestras vacantes actuales de tecnología: bit.ly/talento-tech-GDI
Solo argentina y españa?
Muchas gracias!, precisamente estaba buscando como manejar las rutas en Angular 17 y aparecio tu video :)
Me alegro que te haya servido 😁
Excelente muy práctico, mantenible y escalable 10/10
Muchas gracias :)
El mejor vídeo que he visto en mi vida, gracias desde Turquía, profe.
¡Gracias por tu comentario, Sonia! La verdad es que estamos encantados con Mario, es muy top explicando, así que nos alegramos de que nuestro contenido te sirva de ayuda :)
Excelente video, muy claro y ejemplificador, con ejemplos prácticos, una joya del desarrollo en angular. Lo estoy aplicando en la migración de un proyecto personal en Angular 18 y me viene muy bien todos los tips, muchas gracias!
¡¡¡¡¡¡ FELICIDADES !!!!!!! 👏👏👏 Por fin alguien que explica de forma clara y muy consisa el uso de los standalone component. Así como es una estructura de carpetas para tener un código organizado y escalable. Muchas gracias por compartir formación para torpes como yo. Saludos desde Sevilla. Te pediría un video sobre un login con refresh token para torpes ya que lo que veo por ahí lo hacen súper complicado mezclando cosas que no tienen nada que ver con el login y lo complican demasiado. Gracias de antemano
¡Graciñas por tu comentario! Nos apuntamos lo de Login con refresh token a ver si se nos ocurre algo 😉
@@Garajedeideas Me sumo a esta solicitud. Estoy desarrollando una API en Laravel con Laravel Sanctum Token for Mobile Applications y seria interesante ver como lo implementas. Gracias!
@@Garajedeideas En mi pueblo cuando algo tarda mucho se dice que uno se murió esperando a ver si hay suerte es antes de que salga la versión 20. 😂😂😂😂😂
Excelente. Muy útil para los que estamos empezando
Muchas gracias, me alegro que te guste
Justamente estaba luchando para crear una estructura que pudiera ser organizada y escalable, tu video es una joya!!!
Fantástica explicación y muy útil, los ejemplos propuestos me han servido mucho! 😄
Me alegro que te haya servido
Buen video! Conciso, claro y con ejemplos reales. Es la arquitectura que a mi me gusta utilizar con lo que coincido plenamente. Como dices al final yo agrupo las funcionalidades en una carpeta.
Me hubiera gustado ver cómo organizarías la parte de los tests (por ejemplo los mocks asociados a ellos).
Gracias por el video de nuevo!! Quedo a la espera de más así 😊
Eso daría para hablar mucho :). Depende de cómo te sientas más cómodo. Se podrían establecer los tests dentro de cada una de las funcionalidades o replicar la estructura de carpetas dentro del directorio clásico de tests, ahí no tengo todavía muy clara mi postura :)
Muy buena la manera en la describes la estructura, fácil de entender y al punto, muchas gracias.
Gracias a ti por tu comentario y nos alegramos de que nuestro contenido te sirve de ayuda :)
Muchas gracias estaba buscando un arquitectura simple y escalable
En mi caso lo lleve un poco mas allá, aparte del auth admin core y shared, tuve un public y un private, meti los modulos segun el nivel de acceso a ellos
Toma ya! Eso si que es sacarle partidazo! :)
Muy bueno!, me estaba enrredando sin al app.component y donde voy a importar el httpclient, forms module, reactive forms, material design y demás, pero ya vi de manera general cómo hacerlo, muchas gracias.
Al final es une nueva fórmula y debemos adaptarnos :)
Gracias. Hace poco conocí Angular 16 modificando un proyecto, y no tenía claro cómo se debería manejar las rutas en Angular 17 en un proyecto personal. Gracias por aclararlo.
¡Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
¡Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
Excelente video, justo lo que estaba buscando.
Me alegro que te sirva
Uff, muchas gracias por tu explicación de como ordenar bien las rutas. Sabía hacer esto solo con la técnica de los modulos... con standalone ponía todas las rutas en el archivo principal y se veía tremendo archivo todo lleno de comentarios para no perderme.
Gracias por tu comentario! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Excelente explicación, muy clara y facil de entender.
Hola, muchas gracias! :D
Excelente Mario! siempre claro! muy bueno el video!!
Muchísimas gracias :)
Muy bien explicado, esa duda tenía con el nuevo angular 17👍
Un gran video, saludos desde Bolivia!
Gracias. Saludos! :)
Yo recomendaría meter cada una de las carpeta con funcionalidades en una carpeta homóloga de lo que antes era modules. Puede suceder que si el proyecto es muy grande y tiene muchas funcionalidades se acumularía eso de muchos directorios al mismo nivel donde están core y shared lo que podría ser un poco dificil de ubicar a simple vista.
Excelente video, muy claro y justo en el tema. Muchas gracias.
Gracias por tu comentario! Nos alegramos de que nuestro contenido te sirva de ayuda :)
Excelente video, muy orientado a la escalabilidad y a sacarle el mayor provecho a angular 17. Muchas gracias
Gracias a ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Buenasss, con respecto a los módulos, entonces no se utilizan módulos que tengan sus propios componentes?
buenisimoooo! gran video felicidades
Gracias por tu aporte , queria saber como puedo hacer para que al momento de renderizar mi layout de admin , no me renderize el layout principal de app.component ?
Me ha gustado mucho esta estructura de carpetas. Gracias por compartirla.
Gracias a ti por tu comentario Emerson y nos alegramos de que nuestro contenido te sirva de ayuda! :)
llegue, me dijiste exactamente lo que tenia que saber, y me fui.
VIDEAZO AMIGX ♥
Buenisimo si pudieran hacer un viedo introductorio de como testear en angular seria genial slaudos y exitos buenismo canal
Estamos en ello ;)
Gracias por el video, excelente como lo explicas cada parte
Gracias a ti por tu comentario y nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
Tremendo el video. Muy bueno y muy claro. ¿Cómo lo adaptarías a Clean Architecture? ¿La carpeta de Core es equivalent a la capa de Aplicación en ese diseño de arquitectura?
Muy buena explicación, gracias por mostrar ejemplos, saludos !!
Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda y te guste :)
¿Cómo puedo enrutar el CSS y el JS??
muy buenos videos, suscrito!
Gracias! 😊
Eres un crack, un ejemplo claro y conciso que se puede aplicar en cualquier proyecto.. y para cuando el curso de cero a experto con angular? xD
Yo uso module core y shared.
Cómo dijiste, que no hubo un cambio tan grande con dejar de usar modulos.
estaria bueno un video con un proyecto usando esta arquitectura, xq veo que hay ficheros que los mueves a otras carpetas de las que da por defecto angular o eso me parece, y bueno estaria bueno ver ese proceso de construccion desde adentro.
Gracias por tu feedback, Bruno! Lo tenemos en cuenta por si puede encajar en un vídeo. Saludos!
Excelente explicación y recomendaciones
Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
muito bom o video, estou começando com angular e esse video me ajudou a tirar algumas duvidas, obrigado.
Graças! Ficamos muito felizes que isso tenha ajudado você :)
Muchas gracias por compartir!!!
Gracias a ti por comentar 😁
Excelente aporte 🎉🎉🎉
muy bueno, un tutorial creando tu arquitectura, para conocer como crear el archivo routes
Excelente! Muchas gracias
Gracias a tí
Gracias! muy buena la forma de estructurar las rutas del proyecto. ¿Se puede aplicar a versiones anteriores a la 17?
Sí, teniendo en cuenta que deberías agrupar las diferentes funcionalidades en módulos concretos
tambien se puede por ejemplo en la carpeta articles crear sub carpetas.
article
components
interfaces/models
services
para que cada modulo tenga sus servicios independientes y modelos. porque tenerlos todos en la carpeta core no es complicado. O como seria mejor maestro?
Es otra opción muy buena. Creo que depende de lo encapsulado que esté tu funcionalidad. Si tienes muchos componentes globales al final vas a tener que ponerlos en un ámbito superior. Pero sí, es otra opción muy a tener en cuenta
Muchas gracias por compartir estos conocimientos!!! tengo una duda, que programa utilizas para hacer los draw en la pantalla? (dibujar en la pantalla) me seria muy util..
Se llama presentify y es para MacOS
Por qué ven tan necesario usar Angular o React, si esas funcionalidades se pueden hacer con javascript puro, en la estructura index.html, style.css y la carpeta con los javascript. Quiero entenderlos, para que Angular o React?
excelente video 🔥, quizás mas adelante podrias hacer este mismo ejemplo pero creando micro-frontends seria interesante ver en angular 17 como hacer eso, saludos desde Colombia
Gracias por el feedback! Anotamos tu propuesta y a ver si es posible encajarlo en un vídeo. SaludoS!
Iluminenme porfa, como podria navegar en una misma página entre secciones, digamos abc#home, abc#about, etc. Se agradece de antemano😢
Espectaculares tus videos!
Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)
Gracias por el vídeo. Tienes algún tutorial donde expliques algo más sobre los guard?. He estado buscando información en mdn y aparece que están deprecados pero no estoy seguro al 100% sin se trata de lo mismo
Gracias a ti por tu aportación :). Nos anotamos los guard por si podemos encajar algún vídeo sobre ello o pasaros alguna info más detallada en el apartado de comunidad de nuestro canal.
Hola, tal vez un tutorial para implementar clean architecture?
Hola! Anotamos tu propuesta para ver si nos puede encajar para algún vídeo. Thanks!
Excelente, muchas gracias
Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
Hola, que tipo de arquitectura es esta? como se llama?
Excelente, es un muy buena estructura
Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
muy bueno, gracias.
veo que en rutas usaste LoadChildren, que diferencia tiene con usar loadComponent?
Uso loadchildren porque estoy cargando otro fichero de rutas a partir de la principal. Si en vez de un fichero de rutas cargase un único componente, utilizaría loadComponent
Genio, muchas gracias!
Gracias a ti por tu comentario y nos alegramos mucho de que nuestro contenido te sirva de ayuda! :)
las funcionalidades como auth, etc, se podrían ver como los dominios de la aplicación?
No sé si te refieres a configurar subdominios. Desconozco con las herramientas de Angular si se puede hacer. Quizá es una configuración propia del seevidor donde colocas la app
1tengo una pregunta master, ¿si uso los signals sin desactivar el zone js, igual obtengo mejoras de rendimiento?
Sí claro, la tendencia debería ser empezar a usar signals en múltiples ámbitos
Muchas gracias genio!
Excelente video, tienes un don para la explicación, todo claro y preciso, gracias!
¡Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
gracias. yyyyy ese theme de vscode cual es :D
El uso de módulos entra dentro de las buenas prácticas del desarrollo de software en general, y eso no cambia con las últimas versiones de Angular a pesar de que ahora sea todo standalone por defecto. Las nuevas versiones de Angular son para atraer gente del mundo de React, Vue y Vanilla JavaScript y que la gente que no sabe de arquitectura de software pueda seguir haciendo sus chapuzas incluso con Angular. Es más mercadotecnia que otra cosa.
Muchísimas gracias
Gracias a ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Gracias!
A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Buenisimo muchas gracias!!
A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Que hermoso, solo faltaria cada servicio en su funcion.
Gracias Master
Impecable !
Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)
Una pregunta como se puede crear un proyecto en angular 17 con ssr y de forma modular?, muy buen vídeo, nuevo suscriptor
Hola, lo puedes hacer a partir del siguiente comando
ng new Prueba --ssr=true --standalone=false
Tengo una pregunta un poco pava. Si dentro de mi home quiero llamar 2 componentes. Banner y products. Como seria la manera correcta? (Es que me aparece en todas las paginas)
Deberías colocar los selectores de dichos componentes dentro del HTML del componente home
consulta, sale un poco del tema pero como se llama la app que usas para resaltar tipo pizarra
Es una app para Mac y se llama Presentify
Amigos recomiendan aprender Angular?
Ya se las bases de Angular pero desde hace meses termine aprendiendo React y despues nextjs, y ahorita estoy en Nextjs, pero veo que Angular podria tener mayor posibilidades para emigrar no?
Creo que lo importante aquí es tener una base fuerte de cómo se desarrollan aplicaciones web independientemente del framework o librería que utilices para ello. A partir de una buena base, dar el salto de una a otra es sencillo.
Buenas noches muchas gracias, excelente, pero quisiera preguntar si fuera posible de compartir el repositorio.
Hola! Ya hemos incluido el repo en la descripción del vídeo y te lo dejamos también por aquí: github.com/GarajedeIdeas/AngularArquitectura
@Garajedeideas mil gracias
como puedo tener un layout para el backend y otro para el frontend?
El framework de Angular genera aplicaciones web para la parte del front, es decir, se ejecutan en el cliente. Para poder hacer una interfaz en el back dependerá de la tecnología que uses en dicho back
Buen video, me gustaria saber como se le llama a esta forma de estructurar los proyectos... saludos c:
Hola. La verdad es que no sé si tiene un nombre concreto pero yo venía utilizándola previo a la aparición de los componentes de tipo standalone
Excelente 👍
Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
No te parece mejor guardar los modelos de article dentro de la carpeta article? es decir, tratar de dejar el core lo más agnóstico, posible, dejando elementos que tengan una sola instancia y sean globales en toda la aplicación
Y los servicios de articles tb?, pero que tontería, los modelos son transversales
Mmm puedes yo lo dejaría en articles mismo, pues pertenece a ese articles. Sacarlo de ahí, no tiene mucho sentido
Me gusta ese theme de vscode. como se llama?
Dark +
@@mariogiron hola gracias, de que extension?
@@YonySalgado viene por defecto instalado
@@mariogiron pero eso no incluye esos iconos. perdon si no supe preguntar. me gustaria tener esos iconos tambienporque transmiten paz
This architecture might not suite for domain driven design application
Me pareces un dev brutal, pero ese slogan de si funciona no lo toques me parece muy meeee.... (con lo que gozo yo de las refactorizaciones jejeje)
Hola buenas, haciendo un proyecto usando la librería de componentes PrimeNG con Angular 17 es necesario el app.module.ts ya que PrimeNG aún funciona con eso.
La estructura de un proyecto con Angular utilizando PrimeNG sería igual o parecida a esta?
No es necesario contar con el módulo para usar PrimeNG. Importas el módulo del componente que vayas a utilizar dentro de tu propio componente, en la propiedad imports del decorador @Component
Para el tema de las animaciones, puedes incluirlas en el array de providers del fichero app.config.
Otra cosa es que no hayan modificado la documentación
@@mariogiron Ah pues mira, seguramente porque llevo ya varios días metiendome cabezazos con Angular y PrimeNG porque todos lo explican con el app.module.ts y no sabía si es que primeNG aún lo necesita, muchas gracias