Estructura de proyecto angular

Oluwafisayo Oluwatayo 20 marzo 2023
  1. Mejores prácticas para una estructura de proyecto angular
  2. Cómo definir una carpeta de proyecto altamente escalable
  3. Conclusión
Estructura de proyecto angular

No es una subestimación cuando se dice que ser organizado es uno de los valores fundamentales de un programador. Además de escribir códigos limpios y concisos, es una excelente práctica cultivar el hábito de crear proyectos con carpetas de componentes bien estructuradas.

Mejores prácticas para una estructura de proyecto angular

¿Por qué es bueno mantener una excelente estructura de carpetas para proyectos Angular?

  1. Mantener una estructura de carpetas organizada lo presenta como un codificador experimentado que conoce el valor de mantener las cosas organizadas.
  2. Una buena estructura es fácil de leer y mantener, especialmente cuando se comparten códigos o se construyen proyectos; facilita que cada persona localice los archivos en los que queremos trabajar.
  3. Facilita la detección y corrección de errores en nuestras aplicaciones.
  4. Una carpeta de proyectos organizada es ideal cuando se crean aplicaciones a gran escala; En este escenario, es muy importante que mantengamos una estructura de proyecto bien organizada porque crearemos archivos, componentes y servicios de host. Y tratar de encontrar un archivo en particular en un montón de carpetas desorganizadas podría ser infernal y frustrante.

Por lo general, el árbol de carpetas predeterminado proporcionado por Angular CLI debería ser suficiente para aplicaciones simples, pero ¿cómo creamos una estructura de archivos escalable cuando creamos una aplicación a gran escala?

Cómo definir una carpeta de proyecto altamente escalable

  1. Organice carpetas y subcarpetas por características

    Las aplicaciones que creamos tienen diferentes componentes que realizan diferentes funciones; debemos intentar crear carpetas de acuerdo con la característica de cada componente.

    Por ejemplo, si inyectamos un servicio en una aplicación, debemos crear una carpeta de servicios; si tenemos una aplicación que hace que los usuarios inicien sesión, debemos crear una carpeta de inicio de sesión que se ocupe de los inicios de sesión de los usuarios.

    Si necesitamos crear otros componentes que se relacionen directamente con la carpeta de inicio de sesión, es aconsejable crear una subcarpeta dentro de las carpetas de inicio de sesión.

  2. Nombrar archivos y carpetas

    Cuando buscamos archivos en cualquier situación, primero miramos los nombres de las carpetas que se relacionan estrechamente con ese nombre de archivo.

    Si está buscando archivos de música, primero querremos mirar la carpeta de música. Este mismo escenario se aplica a cómo nombramos nuestros archivos y componentes.

    Al crear componentes dentro de una carpeta, podemos nombrar los archivos usando el estilo de guión. Por ejemplo, al crear archivos dentro de una carpeta de lista de tareas, podemos nombrar el archivo edit-todo.component.ts.

    De esta manera, es fácil para nosotros reubicar los archivos si queremos corregir un error; también facilita que nuestros colaboradores revisen nuestros códigos.

  1. Diseña una estructura de carpetas plana

    Si bien es una práctica excelente crear subcarpetas para componentes estrechamente relacionados, debemos intentar mantener las subcarpetas en el menor número posible.

    Deberíamos hacer todo lo posible para asegurarnos de que las subcarpetas no excedan las nueve subcarpetas, los números más altos que esto harán que nos cansemos rápidamente al combinar los componentes.

  2. Arranque automático

    Otra cosa a considerar para lograr una carpeta de proyecto altamente escalable es colocar la lógica de arranque dentro del archivo main.ts de la aplicación del proyecto.

    Evite colocar la lógica de la aplicación dentro del archivo. El manejo de errores también se puede colocar en la lógica de arranque.

Conclusión

Idealmente, no existe un enfoque universal para configurar una estructura de carpetas efectiva para un proyecto de Angular, pero se pueden adoptar los pasos anteriores.

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn