Estructura del proyecto

La estructura de un proyecto es uno de los aspectos más importantes a la hora de desarrollar, permitiendo facilitar el desarrollo, el mantenimiento y la colaboración en equipo. Mantener un estándar en la nomenclatura también nos permite lograr este objetivo y facilita la búsqueda de componentes.

Nomenclatura

Las palabras del nombre descriptivo dentro de un archivo deben estar separadas por guiones y puntos para distinguir el nombre descriptivo del tipo de archivo

<descriptive-name>.<type>.ts
 
// Ejemplo
feature-name.component.ts
 
// Evitar
featureName.compnt.ts

Los tipos de archivos que usualmente podemos encontrar dentro de un proyecto Angular son .service, .component, .pipe, .module, .directive, .interface y, desde la v16 .route.

Adicionalmente se pueden crear “tipos” propios, es importantes que estos no sean nombres abreviados (Como .srvc) para evitar confusiones, en su lugar deben ser descriptivos e inequívocos.

La estructura deberá adaptarse fácilmente a los nuevos cambios que surjan durante el desarrollo.

/src

Carpeta raíz del proyecto.

fileTree.directoryLabelapp/
- …
fileTree.directoryLabelassets/
- …
fileTree.directoryLabelenvironments/
- …
fileTree.directoryLabelstyles/
- …
index.html
styles.css
main.ts

/styles: Carpeta para almacenar los estilos generales de la aplicación, suelen encontrase también la definición del theme para Angular Material.
/environments: Contiene variables de configuración para diferentes entornos, actualmente esta carpeta no se genera por defecto pero el CLI nos provee de un comando para crearla junto con su configuración en angular.json

ng g environments

/app

Carpeta principal con todos los componentes, servicios y módulos específicos de la aplicación.

fileTree.directoryLabelcomponents/ Componentes del layout
- fileTree.directoryLabellayout-component/
  - layout.component.ts
fileTree.directoryLabelmodels/
- user.interface.ts
fileTree.directoryLabelmodules/
- fileTree.directoryLabelmodule/
  - …
- …
fileTree.directoryLabelshared/
- fileTree.directoryLabelcomponents/ Componentes compartidos, distintos del layout
  - …
- fileTree.directoryLabelservices/
  - …
- fileTree.directoryLabelpipes/
  - …
- fileTree.directoryLabeldirectives/
  - …
- fileTree.directoryLabelguards/
  - …
- fileTree.directoryLabelinterceptors/
  - …
- fileTree.directoryLabelmaterial/
  - …
- …
app-routing.module.ts
app.component.css
app.component.html
app.component.ts
app.module.ts

/component: Componentes específicos del layout de la aplicación, como barras de navegación, footers, etc.
/models: Generalmente utilizada para interfaces.
/modules: Cada módulo se organiza en carpetas diferentes, estos a su vez agrupan otros componente, servicios, etc.
/shared: Contiene recursos compoartidos por los distintos módulos como componentes, servicios y otros.

/module

Similar a /app, la carpeta de cada módulo tendrá una estructura interna similar.

fileTree.directoryLabelcomponents/
- fileTree.directoryLabelsome-component/
  - some.component.ts
fileTree.directoryLabelshared/ Opcional
- fileTree.directoryLabelservices/
  - …
module-routing.module.ts
module.component.css
module.component.html
module.component.ts
module.module.ts

Cada módulo en /app/modules contendrá una sub-estructura similar a la que contiene el módulo principal (/app)

/component: Carpeta para componentes pertenecientes al módulo.
/shared/services: Puede existir esta carpeta para los recursos compartidos por los diferentes componentes del módulo, como pipes, directives, animations y servicios.