Encontrar una estructura de carpetas adecuada para mis aplicaciones con angular fue algo con lo que he luchado durante mucho tiempo. Esto se convirtió en un problema real en mi primer proyecto Angular en el mundo real, especialmente cuando la aplicación creció en tamaño.

Terminé agregando continuamente nuevas características sin una estructura real en su lugar.

Esto dificultó la ubicación de los archivos y hacer cambios adicionales en la estructura de la carpeta llevó mucho tiempo.

Pero entendí bien qué hacer y qué no hacer al estructurar una aplicación angular.

El objetivo de este artículo es ayudar a otros desarrolladores en una situación similar.

Quiero aclarar que las prácticas utilizadas en este artículo son muy aplicables para mi caso de uso único, y de ninguna manera deben seguirse estrictamente. La estructura de carpetas de un proyecto cambiará en función de una amplia gama de factores.

Pero si está interesado en una estructura que se centre en una arquitectura de múltiples módulos con un gran enfoque en el escalado de aplicaciones web con angular. ¡Nota! El [+] indica que la carpeta tiene archivos adicionales.

|-- app
     |-- modules
       |-- home
           |-- [+] components
           |-- [+] pages
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- [+] authentication
       |-- [+] footer
       |-- [+] guards
       |-- [+] interceptors
       |-- [+] mocks
       |-- [+] services
       |-- [+] header
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |
     |-- shared
          |-- [+] components
          |-- [+] directives
          |-- [+] pipes
          |-- [+] models
     |
     |-- [+] configs
|-- assets
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss

La guía de estilo angular

El lugar lógico para comenzar a buscar las mejores prácticas en Angular es la Guía de estilo angular. La guía ofrece una visión obstinada sobre la sintaxis, las convenciones y la estructura de la aplicación.

Las pautas clave que realmente se destacaron para mí fueron «Estructurar la aplicación de manera que pueda ubicar el código rápidamente» y «Tener una visión a corto plazo de la implementación y una visión a largo plazo. Comience con poco, pero tenga en cuenta hacia dónde se dirige la aplicación en el futuro”. Esto significa que no debe encerrarse en una estructura, ya que cambiará mucho según el proyecto.

Módulos

|-- modules
       |-- home
           |-- components
           |-- pages
           |    |-- home
           |         |-- home.component.ts|html|scss|spec
           |
           |-- home-routing.module.ts
           |-- home.module.ts

En angular podemos definir cuantos módulos necesitemos, pero debemos tener en cuenta que la forma de organizar los mismos nos ayudara a tener una mejor estructura lo que hará más fácil nuestro trabajo.

Tom Crowley tiene un artículo realmente interesante sobre este tema (que se encuentra aquí), en el que trabaja desde un proyecto angular hasta una estructura de carpetas realmente sólida.

Realmente me gustó la idea de módulos con carpetas designadas para páginas y componentes. Es perfecto para el escalado y la lógica de componentes y páginas están separadas. Entonces, si está interesado en el proceso de reflexión detrás de esta estructura, diríjase allí.

El modulo Core

El CoreModule asume el rol de AppModule raíz, pero no es el módulo que Angular arranca en tiempo de ejecución. El CoreModule debe contener servicios singleton (que suele ser el caso), componentes universales y otras características donde solo hay una instancia por aplicación. Para evitar volver a importar el módulo central en otro lugar, también debe agregar una protección para él en el constructor del módulo central.

|-- core
       |-- [+] authentication
       |-- [+] footer
       |-- [+] guards
       |-- [+] http
       |-- [+] interceptors
       |-- [+] mocks
       |-- [+] services
       |-- [+] header
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts

La carpeta de authentication simplemente maneja el ciclo de autenticación del usuario (desde el inicio de sesión hasta el cierre de sesión).

|-- authentication
     |-- authentication.service.ts|spec.ts

Las carpetas footer y header contienen los archivos de componentes globales, utilizados estáticamente en toda la aplicación. Estos archivos aparecerán en cada página de la aplicación.

|-- header
     |-- header.component.ts|html|scss|spec.ts
|-- footer
     |-- footer.component.ts|html|scss|spec.ts

Angular 4.x introdujo una característica muy esperada para manejar solicitudes http: la interfaz HttpInterceptor. Esto nos permite capturar y modificar las solicitudes y respuestas de nuestras llamadas a la API. La carpeta de interceptors es una colección de interceptores que encuentro especialmente útil.

|-- interceptors
       |-- api-prefix.interceptor.ts
       |-- error-handler.interceptor.ts
       |-- http.token.interceptor.ts

La carpeta guards contiene todos los guards que uso para proteger diferentes rutas en nuestra aplicación.

|-- guards
     |-- auth.guard.ts
     |-- no-auth-guard.ts
     |-- admin-guard.ts

Los mocks son especialmente útiles para las pruebas, pero también puede usarlos para recuperar datos ficticios hasta que se configure el back-end. La carpeta simulacros contiene todos los archivos simulados de nuestra aplicación.

|-- mocks
       |-- user.mock.ts

La carpeta services es una de las principales carpetas dentro del módulo core, ya que en el mismo se tiene los diferentes services de llamadas a los endpoints de una o más APIs Rest.

|-- services
     |-- api.service.ts|spec.ts
     |-- srv1.service.ts|spec.ts
     |-- srv2.service.ts|spec.ts

El módulo Shared

SharedModule es donde deben ir todos los componentes, pipes/filters y servicios compartidos. SharedModule se puede importar en cualquier otro módulo cuando esos elementos se reutilicen. El módulo compartido no debería depender del resto de la aplicación y, por lo tanto, no debería depender de ningún otro módulo.

|-- shared
     |-- [+] components
     |-- [+] directives
     |-- [+] pipes

La carpeta de componentes contiene todos los componentes «shared«. Estos son componentes como loaders y botones, de los cuales se beneficiarían múltiples componentes.

|-- components
     |-- loader
          |-- loader.component.ts|html|scss|spec.ts
     |-- buttons
          |-- favorite-button
               |-- favorite-button.component.ts|html|scss|spec.ts
          |-- collapse-button
               |-- collapse-button.component.ts|html|scss|spec.ts

Las carpetas de directives, pipes y models contienen las directives, pipes y modelos utilizados en la aplicación.

|-- directives
      |-- auth.directive.ts|spec.ts

|-- pipes
     |-- capitalize.pipe.ts
     |-- safe.pipe.ts

|-- models
     |-- user.model.ts
     |-- server-response.ts

Configs

La carpeta de configs contiene la configuración de la aplicación y otros valores predefinidos.

|-- configs
     |-- app-settings.config.ts
     |-- dt-norwegian.config.ts

Styling

Los estilos globales del proyecto deben estar ubicados en la carpeta scss siempre y cuando su proyecto angular este basado en scss, si el proyecto está basado en css debe crearse esta carpeta, pero siempre esta debe estar dentro de la carpeta assets que angular crea al momento de crear el proyecto.

|-- scss
     |-- partials
          |-- _layout.vars.scss
          |-- _responsive.partial.scss
     |-- _base.scss
|-- styles.scss

Conclusión

En conclusión, no existe una única forma de trabajo al momento de organizar un proyecto en angular, sin embargo existen siempre buenas prácticas de desarrollo que nos permiten un alto nivel de escalamiento en nuestros proyectos.

Como siempre les dejamos el link del proyecto base con angular 8 en Github.

https://github.com/EdyHuiza/angular-scalable-template