Así deberías Estructurar tus Proyectos en Angular 17
Вставка
- Опубліковано 21 жов 2024
- 👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento...
En este vídeo veremos como crear deberías Estructurar tus Proyectos en Angular 17
Aquí tienes el código por si quieres usarlo: github.com/Gar...
Si quieres aprender más de programación, te dejamos por aquí otros Garaje Code Pills que seguro que te gustarán:
CRUD con Angular y Firebase (Firestore): • CRUD con Angular y Fir...
Sube y descarga archivos con Firebase Storage en Angular: • Sube y descarga archiv...
Taller de Composition API en Vue 3: • Taller de Composition ...
Esta introducción a Firebase con Angular fue impartida por Mario Girón, Senior Full Stack Developer:
/ mariogironm
Si quieres estar al tanto de todo lo que hacemos, puedes inscribirte aquí 👇
garajedeideas....
----------
Garaje de Ideas es un estudio de Diseño, Tecnología y Data. En este canal encontrarás tutoriales, cursos y ejemplos prácticos paso a paso de desarrollo web y programación.
Podrás encontrar desde cursos de JavaScript, Node.js, D3.js, Vue3, Typescript, HTML, CSS, React... hasta cómo optimizar tu proceso de trabajo.
👉 ¡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 😁
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 muy práctico, mantenible y escalable 10/10
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. 😂😂😂😂😂
Muchas gracias estaba buscando un arquitectura simple y escalable
Excelente. Muy útil para los que estamos empezando
Muchas gracias, me alegro que te guste
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 :)
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 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 :)
Fantástica explicación y muy útil, los ejemplos propuestos me han servido mucho! 😄
Me alegro que te haya servido
Excelente explicación, muy clara y facil de entender.
Hola, muchas gracias! :D
Un gran video, saludos desde Bolivia!
Gracias. Saludos! :)
llegue, me dijiste exactamente lo que tenia que saber, y me fui.
VIDEAZO AMIGX ♥
Excelente video, justo lo que estaba buscando.
Me alegro que te sirva
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?
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!
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! :)
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
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 :)
Buenisimo si pudieran hacer un viedo introductorio de como testear en angular seria genial slaudos y exitos buenismo canal
Estamos en ello ;)
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!
Excelente Mario! siempre claro! muy bueno el video!!
Muchísimas gracias :)
muy buenos videos, suscrito!
Gracias! 😊
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 :)
muy bueno, un tutorial creando tu arquitectura, para conocer como crear el archivo routes
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 :)
Excelente explicación y recomendaciones
Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
Yo uso module core y shared.
Cómo dijiste, que no hubo un cambio tan grande con dejar de usar modulos.
Excelente, es un muy buena estructura
Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
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!
Excelente, muchas gracias
Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
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
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.
muy bueno, gracias.
Muchas gracias por compartir!!!
Gracias a ti por comentar 😁
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ê :)
Excelente! Muchas gracias
Gracias a tí
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!
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
Excelente aporte 🎉🎉🎉
Espectaculares tus videos!
Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)
Hola, que tipo de arquitectura es esta? como se llama?
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! :)
Genio, muchas gracias!
Gracias a ti por tu comentario y nos alegramos mucho de que nuestro contenido te sirva de ayuda! :)
Que hermoso, solo faltaria cada servicio en su funcion.
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!
Iluminenme porfa, como podria navegar en una misma página entre secciones, digamos abc#home, abc#about, etc. Se agradece de antemano😢
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 :)
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
Gracias Master
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
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
Gracias!
A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Muchísimas gracias
Gracias a ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan 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
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
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.
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
gracias. yyyyy ese theme de vscode cual es :D
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
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
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
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
Impecable !
Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)
Excelente 👍
Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
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
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
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)
This architecture might not suite for domain driven design application
Buenisimo muchas gracias!!
A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
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