¿Cómo organizar proyectos Angular? El siguiente artículo recopila y comparte 5 consejos prácticos para gestionar proyectos Angular. ¡Espero que sea de ayuda para todos! 
Curso de entrada al dominio de front-end (vue): ingrese al aprendizaje
A medida que se lanzan nuevas funciones, Web apps se vuelven cada vez más grandes. En el recorrido DevOps de una empresa, este tipo de cambio de versión ocurre todos los días. [Tutoriales relacionados recomendados: "tutorial angular"]
En un ciclo de lanzamiento tan rápido, el código puede volverse rápidamente difícil de manejar. Especialmente proyectos desarrollados basados en JavaScript , como NextJS o Angular.
Aquí están nuestras 5 mejores prácticas para administrar proyectos Angular para lograr máxima legibilidad, mantenibilidad y escalabilidad.
Muchos núcleos de aplicaciones individuales son bases de código con clases infladas. Por su naturaleza, estos inflados programas son difíciles de mantener. Son frágiles en el sentido de que cambiar una línea de código puede tener efectos catastróficos en todo el programa. El principio de responsabilidad única puede prevenir estos problemas.
El principio de responsabilidad única significa que un componente tiene una y sólo una función.
La creación de aplicaciones utilizando este enfoque da como resultado un marco modular en el que la aplicación se une a través de estos bloques de código.
El uso de este enfoque puede hacer que los programas sean más legibles y fáciles de mantener. También puede localizar fácilmente funciones específicas en la aplicación.
Para asegurarse de que su código cumpla con este requisito, hágase esta pregunta:这代码是干什么的？ Si su respuesta contiene la palabra clave and , entonces necesita refactorizar su código en un código de responsabilidad única.
Crear y ampliar aplicaciones Angular es un ejercicio continuo. Con el tiempo, organizar sus proyectos utilizando el principio de responsabilidad única hará que sus aplicaciones sean limpias, legibles y fáciles de mantener.
Los módulos en Angular son la implementación del principio único. En Angular , cada módulo representa una funcionalidad separada e independiente.
Angular proporciona varios módulos de tipo para especificar cómo agruparlos u organizarlos lógicamente.
Centro
El módulo Core es un NgModule que se utiliza para crear instancias de la aplicación y cargar funciones principales para uso global.
Por lo tanto, cualquier servicio singleton debe implementarse en el módulo principal. El encabezado, pie de página o barra de navegación son módulos de este tipo.
Todos los servicios (servicios singleton) que tienen una y solo una instancia por aplicación deben implementarse en el módulo principal. Por ejemplo, servicio de autenticación o servicio de usuario.
Característica
Los módulos de funciones representan el código que crea la funcionalidad de la aplicación. Por ejemplo, en una aplicación de compras online, tendríamos la función de añadir artículos al carrito de la compra y un módulo independiente para el pago.
Compartido
Los módulos compartidos constan de módulos que se pueden combinar para crear nuevas funciones. Por ejemplo, la función de búsqueda se puede utilizar para múltiples funciones en la plataforma.
Estructurar su código de esta manera hace que las cosas sean más fáciles de localizar y aumenta las posibilidades de reutilización del código.
Los archivos de estilo pueden desorganizarse rápidamente si no siguen una estructura común. Patrón de prácticas recomendadas generales 7-1 , que utiliza 7 carpetas y 1 archivo, como se muestra a continuación:
Aplicación : la carpeta principal del proyecto.
Resumen : la sección de resumen, que contiene todas las variables, mixins y componentes similares.
Núcleo : contiene diseño, restablecimiento y código repetitivo para todo el sitio.
Componentes : contiene estilos para todos los componentes que se crearán para un sitio web, como botones, pestañas y modales.
Diseño : contiene los archivos necesarios para definir el diseño del sitio, como encabezados y pies de página.
Páginas : contiene estilos para cada página específica.
Proveedores : esta carpeta opcional es adecuada para el marco de arranque utilizado por el proyecto, como bootstrap
Cree un nuevo archivo all.scss en cada carpeta que contenga todas las asignaciones para esa carpeta en particular.
Muchos servicios están diseñados para ejecutarse globalmente. Luego, en algunos casos, un componente requiere un servicio. Las prácticas tradicionales de los componentes de codificación recomiendan el principio de responsabilidad única.
Según este enfoque, los servicios y componentes se escriben como proyectos separados.
Pero, ¿qué sucede cuando consideras eliminar los componentes de estos servicios? Lo que terminas es un código inactivo, lo que sólo hace que el almacén esté más desordenado. En este caso, la mejor práctica es colocar el servicio dentro del componente.
De esta forma, el mantenimiento de componentes y servicios es más sencillo.
Una estructura de archivos anidada es inherentemente más fácil de navegar que un sistema de archivos plano que coloca todos los archivos de código en un directorio.
Sin embargo, a medida que se acerca el proyecto, la estructura de archivos del proyecto puede volverse bastante compleja. Si bien esto facilita la localización del código, presenta desafíos al escribir declaraciones de importación.
Cuando una estructura de directorio comienza a crecer más allá de tres o cuatro niveles, las declaraciones import pueden volverse muy largas y difíciles de leer.
Para solucionar este problema, podemos configurar el alias de la ruta en el archivo tsconfig.json. En este archivo, hay una matriz llamada compilerOptions . Este es el alias de ruta que configura en su aplicación.
Cuando se compila el código, los alias de ruta definidos en esta matriz se reemplazan por rutas reales. El valor de cada ruta es un objeto clave-valor que contiene la ruta real y el alias.
Crear y ampliar aplicaciones Angular es un ejercicio continuo.