En base a mi experiencia esto depende de dos factores:
- la estructura del proyecto.
- el editor de texto que uses.
Para este post se usa el siguiente entorno:
- editor de texto: VSCode
- sistema operativo: Linux
- proyecto: inventario-app
Estructura del proyecto
Partiendo de esta estructura
e2e/
src/
|- app/
| |- core/
| |- shared/
| |- app.component.*
| |- app.module.ts
| |- app-routing.module.ts
| +- ...
|- assets/
|- environments/
|- theme/
|- translations/
|- index.html
|- main.scss
|- main.ts
|- polyfills.ts
+- test.ts
Estructura de carpeta /src
src/
|- app/
| |- bodega/ crud bodega
| |- core/ funcionalidad principal
| |- inicio/ pantalla principal
| |- login/ login
| |- main-nav/ barra de navegación
| |- producto/ crud producto
| |- registro/ sign in
| |- shared/ funcionalidad compartida
| |- usuario/ crud usuario
| |- app.component.*
| |- app.module.ts
| |- app-routing.module.ts
Estructura módulos
Lo ideal es dividir en módulos cada uno de los funcionalidades de tu aplicación dentro de cada módulo tener:
- components
- servicios locales
- module file
- routing module file
src/
|- app/
| |- bodega/ crud bodega
| | |- components/ componentes de bodega
| | | |- bodega-dialog componente dialogo
| | |- bodega.component.ts componente principal de bodega
| | |- bodega.module.ts módulo bodega
| | |- bodega-routing.module.ts módulo routing bodega
Nombre de los archivos/carpetas
Realmente el nombre de los archivos recomiendo sea según la funcionalidad que este realice.
Editor de texto
El editor de texto te puede ayudar principalmente con sus atajos de teclado y los extensiones disponibles en el.
Atajos de teclado
Nota Los atajos aquí presentados pueden variar de sistema operativo y en posteriores versiones de VSCode
Para ver los atajos del teclado de VSCode
-
Buscar archivo: Simplemente pones en nombre del feature que buscas. Ctrl + p
-
Abrir o cerrar panel lateral: Permite más espacio para ver el archivo Ctrl + b
- Abierto
- Cerrado
Extensiones
-
vscode-angular2-files Desde la interfaz te permite crear modulos, componentes, entre otros.
-
vscode-ng-language-service Plugin que permite utilizar autocompletado y checkeo de errores en el template. Nota: Ten encuenta que debes tener en tu proyecto
@angular/language-service >=v9.0.0
-
angular2-switcher Cambia entre archivos .ts .scss/.css .spec