nuevo - crear proyecto angular

¿Qué tipo de estructura de carpetas se debe usar con Angular 2?

Question

Soy un desarrollador de Angular 1 que está empezando a aprender sobre Angular 2. Hay muchos tipos diferentes de métodos de estructura de carpetas según el material de capacitación. Voy a enumerar cada uno a continuación y me encantaría conocer las opiniones de las personas sobre cuál debo usar y por qué. Además, si hay un método que no está en la lista pero cree que funciona mejor, no dude en enumerarlo también.

Al observar todo esto, el método # 3 es más o menos como estaba haciendo mis aplicaciones Angular 1.

Método 1: angular2-inicio rápido

Fuente: https://angular.io/guide/quickstart

Estructura de carpeta:

Método 2: ng-book2

Fuente: https://www.ng-book.com/2/ (tiene que pagar para ver los archivos)

Estructura de carpeta:

Método 3: mgechev / angular2-seed

Fuente: https://github.com/mgechev/angular2-seed

Estructura de carpeta:

Answer 1

Creo que estructurar el proyecto por funcionalidades es un método práctico. Hace que el proyecto sea escalable y fácil de mantener. Y hace que cada parte del proyecto funcione con total autonomía. Déjame saber lo que piensas acerca de esta estructura a continuación: ESTRUCTURA DE PROYECTO DE TIPOLOGÍA ANGULAR - ANGULAR 2

fuente: http://www.angulartypescript.com/angular-typescript-project-structure/

Answer 2

Entonces, después de investigar más, terminé con una versión ligeramente revisada del Método 3 (mgechev / angular2-seed).

Básicamente moví los componentes para ser un directorio de nivel principal y luego cada característica estará dentro de él.

Answer 3

He estado usando ng cli últimamente, y fue realmente difícil encontrar una buena manera de estructurar mi código.

El más eficiente que he visto hasta ahora proviene del repositorio mrholek ( https://github.com/mrholek/CoreUI-Angular ).

Esta estructura de carpetas le permite mantener limpio su proyecto raíz y estructurar sus componentes, evita la convención de nomenclatura redundante (a veces inútil) de la Guía de estilo oficial.

Además, esta estructura es útil para agrupar la importación cuando sea necesario y evitar tener 30 líneas de importación para un solo archivo.

src
|
|___ app
|
| |___ components/shared
| | |___ header
| |
| |___ containers/layout
| | |___ layout1
| |
| |___ directives
| | |___ sidebar
| |
| |___ services
| | |___ *user.service.ts*
| |
| |___ guards
| | |___ *auth.guard.ts*
| |
| |___ views
| | |___ about
| |
| |___ *app.component.ts*
| |
| |___ *app.module.ts*
| |
| |___ *app.routing.ts*
|
|___ assets
|
|___ environments
|
|___ img
|
|___ scss
|
|___ *index.html*
|
|___ *main.ts*

Answer 4

La directriz oficial está ahí ahora. mgechev/angular2-seed tenía alineación con él. ver #857 .

https://angular.io/guide/styleguide#overall-structural-guidelines

Answer 5

Quizás algo como esta estructura:

|-- app
|-- modules
|-- home
|-- [+] components
|-- pages
|-- home
|-- home.component.ts|html|scss|spec
|-- home-routing.module.ts
|-- home.module.ts
|-- core
|-- authentication
|-- authentication.service.ts|spec.ts
|-- footer
|-- footer.component.ts|html|scss|spec.ts
|-- guards
|-- auth.guard.ts
|-- no-auth-guard.ts
|-- admin-guard.ts
|-- http
|-- user
|-- user.service.ts|spec.ts
|-- api.service.ts|spec.ts
|-- interceptors
|-- api-prefix.interceptor.ts
|-- error-handler.interceptor.ts
|-- http.token.interceptor.ts
|-- mocks
|-- user.mock.ts
|-- services
|-- srv1.service.ts|spec.ts
|-- srv2.service.ts|spec.ts
|-- header
|-- header.component.ts|html|scss|spec.ts
|-- core.module.ts
|-- ensureModuleLoadedOnceGuard.ts
|-- logger.service.ts
|-- shared
|-- 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
|-- directives
|-- auth.directive.ts|spec.ts
|-- pipes
|-- capitalize.pipe.ts
|-- safe.pipe.ts
|-- configs
|-- app-settings.config.ts
|-- dt-norwegian.config.ts
|-- scss
|-- [+] partials
|-- _base.scss
|-- styles.scss
|-- assets

Answer 6

Si el proyecto es pequeño y seguirá siendo pequeño, recomendaría estructurar por tipo (Método 2: ng-book2)

app
|- components
| |- hero
| |- hero-list
| |- villain
| |- ...
|- services
| |- hero.service.ts
| |- ...
|- utils
|- shared

Si el proyecto crecerá, debe estructurar sus carpetas por dominio (Método 3: mgechev / angular2-seed)

app
|- heroes
| |- hero
| |- hero-list
| |- hero.service.ts
|- villains
| |- villain
| |- ...
|- utils
|- shared

Es mejor seguir los documentos oficiales.
https://angular.io/guide/styleguide#application-structure-and-ngmodules

Answer 7

Sugiero la siguiente estructura, que podría violar algunas convenciones existentes.

Me estaba esforzando por reducir la redundancia de nombres en el camino, y tratando de mantener los nombres cortos en general.

Entonces no hay / app / components / home / home.component.ts | html | css.

En cambio, se ve así:

|-- app
|-- users
|-- list.ts|html|css
|-- form.ts|html|css
|-- cars
|-- list.ts|html|css
|-- form.ts|html|css
|-- configurator.ts|html|css
|-- app.component.ts|html|css
|-- app.module.ts
|-- user.service.ts
|-- car.service.ts
|-- index.html
|-- main.ts
|-- style.css

Answer 8

Voy a usar este. Muy similar al tercero mostrado por @Marin.

app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
| |
| |___ shared
| |
| |___ home
| |
| |___ about
| |
| |___ product
|
|___ services
|
|___ structures