Así deberías Estructurar tus Proyectos en Angular 17

[@Garajedeideas]

👉 ¡En Garaje, seguimos creciendo! Conoce nuestras vacantes actuales de tecnología: bit.ly/talento-tech-GDI

[@gdelahoz04]

Solo argentina y españa?

[@santiagolorduy1379]

Muchas gracias!, precisamente estaba buscando como manejar las rutas en Angular 17 y aparecio tu video :)

[@mariogiron]

Me alegro que te haya servido 😁

[@SoniaFloresMayoral]

El mejor vídeo que he visto en mi vida, gracias desde Turquía, profe.

[@Garajedeideas]

¡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 :)

[@leonardoflores2974]

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!

[@CLauSKLoSE]

Excelente muy práctico, mantenible y escalable 10/10

[@mariogiron]

Muchas gracias :)

[@veldevelop]

¡¡¡¡¡¡ 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]

¡Graciñas por tu comentario! Nos apuntamos lo de Login con refresh token a ver si se nos ocurre algo 😉

[@JavierAlejandroParra]

@@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!

[@veldevelop]

@@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. 😂😂😂😂😂

[@jessimasi]

Justamente estaba luchando para crear una estructura que pudiera ser organizada y escalable, tu video es una joya!!!

[@luisalbertoivetta1731]

Excelente. Muy útil para los que estamos empezando

[@mariogiron]

Muchas gracias, me alegro que te guste

[@sebastianfonseca6632]

Muchas gracias estaba buscando un arquitectura simple y escalable

[@JuanManuelHerreraCarrera]

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.

[@mariogiron]

Al final es une nueva fórmula y debemos adaptarnos :)

[@RicardoRodriguezVaca]

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í 😊

[@mariogiron]

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 :)

[@sebastian99750]

Muy buena la manera en la describes la estructura, fácil de entender y al punto, muchas gracias.

[@Garajedeideas]

Gracias a ti por tu comentario y nos alegramos de que nuestro contenido te sirve de ayuda :)

[@daniemv]

Fantástica explicación y muy útil, los ejemplos propuestos me han servido mucho! 😄

[@mariogiron]

Me alegro que te haya servido

[@SrEquixs]

Muy bien explicado, esa duda tenía con el nuevo angular 17👍

[@JeudryPeñaPeña]

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

[@Garajedeideas]

Toma ya! Eso si que es sacarle partidazo! :)

[@edgardomolinagonzalez3121]

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.

[@Garajedeideas]

Gracias por tu comentario! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@serranopink]

Excelente video, justo lo que estaba buscando.

[@mariogiron]

Me alegro que te sirva

[@JulioSanchez-hd3on]

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.

[@Garajedeideas]

¡Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@Garajedeideas]

¡Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@giacomosantana3305]

Excelente explicación, muy clara y facil de entender.

[@Garajedeideas]

Hola, muchas gracias! :D

[@davidmartinvergues7327]

buenisimoooo! gran video felicidades

[@mariafernandamunozleppez1700]

Excelente video, muy orientado a la escalabilidad y a sacarle el mayor provecho a angular 17. Muchas gracias

[@Garajedeideas]

Gracias a ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@EmersonCabrera]

Me ha gustado mucho esta estructura de carpetas. Gracias por compartirla.

[@Garajedeideas]

Gracias a ti por tu comentario Emerson y nos alegramos de que nuestro contenido te sirva de ayuda! :)

[@emilianor81]

Excelente Mario! siempre claro! muy bueno el video!!

[@mariogiron]

Muchísimas gracias :)

[@CarlosWashingtonMercado]

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?

[@HamilPars]

Un gran video, saludos desde Bolivia!

[@Garajedeideas]

Gracias. Saludos! :)

[@yoanestradablanco1608]

Buenisimo si pudieran hacer un viedo introductorio de como testear en angular seria genial slaudos y exitos buenismo canal

[@Garajedeideas]

Estamos en ello ;)

[@wilsonmori949]

Excelente video, muy claro y justo en el tema. Muchas gracias.

[@Garajedeideas]

Gracias por tu comentario! Nos alegramos de que nuestro contenido te sirva de ayuda :)

[@AlexSearchYT]

llegue, me dijiste exactamente lo que tenia que saber, y me fui. VIDEAZO AMIGX ♥

[@EveritJhon]

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..

[@mariogiron]

Se llama presentify y es para MacOS

[@frochaol]

Muy buena explicación, gracias por mostrar ejemplos, saludos !!

[@Garajedeideas]

Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda y te guste :)

[@matiasmorales2734]

Gracias! muy buena la forma de estructurar las rutas del proyecto. ¿Se puede aplicar a versiones anteriores a la 17?

[@mariogiron]

Sí, teniendo en cuenta que deberías agrupar las diferentes funcionalidades en módulos concretos

[@jeanluiguiplasencia1771]

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

[@saulpineda9761]

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.

[@anrras]

Gracias por el video, excelente como lo explicas cada parte

[@Garajedeideas]

Gracias a ti por tu comentario y nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@briancastroTI]

muy bueno, gracias.

[@luisalfredoricopabardales6345]

muy bueno, un tutorial creando tu arquitectura, para conocer como crear el archivo routes

[@luciano5026]

Muchas gracias por compartir!!!

[@mariogiron]

Gracias a ti por comentar 😁

[@maximo_vj]

Excelente, es un muy buena estructura

[@Garajedeideas]

Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@elipocho]

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

[@Garajedeideas]

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.

[@EsvinGonzalez]

Excelente aporte 🎉🎉🎉

[@pqctecnologia]

Excelente explicación y recomendaciones

[@Garajedeideas]

Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@jhonvaron1721]

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 ?

[@jhonatan52441]

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?

[@mariogiron]

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

[@willianpondian5812]

muito bom o video, estou começando com angular e esse video me ajudou a tirar algumas duvidas, obrigado.

[@Garajedeideas]

Graças! Ficamos muito felizes que isso tenha ajudado você :)

[@kevin2flanker]

muy buenos videos, suscrito!

[@Garajedeideas]

Gracias! 😊

[@panchotdog]

Excelente! Muchas gracias

[@mariogiron]

Gracias a tí

[@darwintnt2]

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

[@Garajedeideas]

Gracias por el feedback! Anotamos tu propuesta y a ver si es posible encajarlo en un vídeo. SaludoS!

[@arivincenti]

Espectaculares tus videos!

[@Garajedeideas]

Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)

[@juanherdoizaholguin8015]

Excelente, muchas gracias

[@Garajedeideas]

Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@BrunoSturniolo]

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.

[@Garajedeideas]

Gracias por tu feedback, Bruno! Lo tenemos en cuenta por si puede encajar en un vídeo. Saludos!

[@Pedro-qg5zq]

veo que en rutas usaste LoadChildren, que diferencia tiene con usar loadComponent?

[@mariogiron]

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

[@cristian_albornoz]

Yo uso module core y shared. Cómo dijiste, que no hubo un cambio tan grande con dejar de usar modulos.

[@JavierMontalvoGioJavi04]

Hola, tal vez un tutorial para implementar clean architecture?

[@Garajedeideas]

Hola! Anotamos tu propuesta para ver si nos puede encajar para algún vídeo. Thanks!

[@jordanalbano5191]

Genio, muchas gracias!

[@Garajedeideas]

Gracias a ti por tu comentario y nos alegramos mucho de que nuestro contenido te sirva de ayuda! :)

[@omarescobarcantor5546]

¿Cómo puedo enrutar el CSS y el JS??

[@juancarlosdelacruz481]

Muchas gracias genio!

[@juancarlosdelacruz481]

Excelente video, tienes un don para la explicación, todo claro y preciso, gracias!

[@Garajedeideas]

¡Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@edgardomolinagonzalez3121]

1tengo una pregunta master, ¿si uso los signals sin desactivar el zone js, igual obtengo mejoras de rendimiento?

[@mariogiron]

Sí claro, la tendencia debería ser empezar a usar signals en múltiples ámbitos

[@victormunar1562]

Gracias Master

[@samirvera8135]

Una pregunta como se puede crear un proyecto en angular 17 con ssr y de forma modular?, muy buen vídeo, nuevo suscriptor

[@mariogiron]

Hola, lo puedes hacer a partir del siguiente comando ng new Prueba --ssr=true --standalone=false

[@colombiacrypto]

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?

[@chuny_dev]

las funcionalidades como auth, etc, se podrían ver como los dominios de la aplicación?

[@mariogiron]

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

[@darioquispe915]

Iluminenme porfa, como podria navegar en una misma página entre secciones, digamos abc#home, abc#about, etc. Se agradece de antemano😢

[@YonySalgado]

gracias. yyyyy ese theme de vscode cual es :D

[@prezdev]

Gracias!

[@Garajedeideas]

A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@Caminodefelicidad]

Muchísimas gracias

[@Garajedeideas]

Gracias a ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@m.x.]

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.

[@nicolasorbe1198]

Hola, que tipo de arquitectura es esta? como se llama?

[@douglasjoel3629]

Buen video, me gustaria saber como se le llama a esta forma de estructurar los proyectos... saludos c:

[@mariogiron]

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

[@rominanavarrete5666]

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)

[@mariogiron]

Deberías colocar los selectores de dichos componentes dentro del HTML del componente home

[@LuisM.ValleMazariegos]

Buenas noches muchas gracias, excelente, pero quisiera preguntar si fuera posible de compartir el repositorio.

[@Garajedeideas]

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

[@LuisM.ValleMazariegos]

@Garajedeideas mil gracias

[@mathias_dev]

consulta, sale un poco del tema pero como se llama la app que usas para resaltar tipo pizarra

[@mariogiron]

Es una app para Mac y se llama Presentify

[@lucasruiz6176]

Impecable !

[@Garajedeideas]

Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)

[@henrymiranda8276]

Buenisimo muchas gracias!!

[@Garajedeideas]

A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@carlosmollapaza9267]

Que hermoso, solo faltaria cada servicio en su funcion.

[@pol_late]

como puedo tener un layout para el backend y otro para el frontend?

[@mariogiron]

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

[@YonySalgado]

Me gusta ese theme de vscode. como se llama?

[@mariogiron]

Dark +

[@YonySalgado]

@@mariogiron hola gracias, de que extension?

[@mariogiron]

@@YonySalgado viene por defecto instalado

[@YonySalgado]

@@mariogiron pero eso no incluye esos iconos. perdon si no supe preguntar. me gustaria tener esos iconos tambienporque transmiten paz

[@cristianarevalosolis9741]

Excelente 👍

[@Garajedeideas]

Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@rutx122]

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?

[@mariogiron]

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.

[@leinerbarrios]

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

[@fernandomurillo9750]

Mmm puedes yo lo dejaría en articles mismo, pues pertenece a ese articles. Sacarlo de ahí, no tiene mucho sentido

[@daniel-peiro]

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)

[@tranquillityEnthusiast]

This architecture might not suite for domain driven design application

[@Danny3vans]

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?

[@mariogiron]

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

[@Danny3vans]

@@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