¿Cuál es la forma correcta de organizar archivos en el proyecto Angular 2?

La mejor manera es tener un directorio creado para cada ruta o cada página. Si está utilizando angular-cli, puede emitir el comando “ng generate component ”. Crea un directorio para cada componente que incluye los archivos html, typecript / javascript, css. En el caso de una aplicación de una o dos páginas Puede mantener todos los archivos en un solo directorio y tener un solo archivo de hoja de estilo.

En su caso, puede crear tres directorios: paneles, héroes y servicios. hero.ts y hero.service.ts van al directorio de servicios. Los restantes en sus respectivos directorios. Consulte la imagen a continuación para ver una muestra de cómo los mantengo.

Y cuando necesite implementar esto en un servidor de producción, puede ejecutar el siguiente comando para minimizar el código en un paquete.

ng build —prod

El marco angular tiene una guía de estilo oficial, que se puede encontrar en los documentos en angular.io. Describe diferentes convenciones de nomenclatura, mejores prácticas para la estructura del proyecto y mucho más.

Los puntos más importantes de las pautas:

  • Por lo general, cada componente tiene su propia carpeta, que incluye los 4 archivos (.ts, .html, .css amd .spec.ts).
  • Los archivos de componentes deben tener el sufijo “.component”, los servicios con “.service”, etc. Ejemplo: my.component.ts, my.component.html, my.service.ts
  • Los componentes, directivas, etc. que se usan en toda la aplicación, deben declararse y exportarse desde el módulo compartido (shared.module.ts)
  • Los servicios suelen ser únicos en toda la aplicación. Por lo tanto, generalmente se proporcionan en el módulo central (core.module.ts) que se importa a app.module.

La mejor y más fácil forma de seguir estas pautas es la CLI angular. Si crea aplicaciones, componentes, servicios, etc. con él, seguirá automáticamente estas pautas.

¡Eso no me parece muchos archivos!

Aquí está la estructura idealizada para un proyecto de su tamaño.

johnpapa / angular2-tour-of-heroes

Y aquí está el estilo John Papa Angular2.

Angular

Por lo general, me gusta colocar cada componente, es HTML y CSS en una sola carpeta. En efecto, tengo diferentes carpetas, cada una de las cuales tiene un único componente .ts y todas sus plantillas asociadas dentro