Quel type de structure de dossier doit être utilisé avec Angular 2?

Je suis un développeur Angular 1 qui commence à en apprendre davantage sur Angular 2. Il existe de nombreux types de méthodes de structure de dossier en fonction du matériel de formation. Je vais énumérer chacun d'entre eux ci-dessous et j'aimerais avoir l'opinion des gens sur lesquels je devrais utiliser et pourquoi. De plus, s'il existe une méthode qui n'est pas répertoriée mais que vous pensez qu'elle fonctionne mieux, n'hésitez pas à la lister également.

En regardant tout cela, la méthode n ° 3 est à peu près la façon dont je faisais mes applications Angular 1.

Méthode 1: angular2-quickstart

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

Structure des dossiers:

Méthode 2: ng-book2

Source: https://www.ng-book.com/2/ (payer pour voir les fichiers)

Structure des dossiers:

Méthode 3: mgechev / angular2-seed

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

Structure des dossiers:

La ligne directrice officielle est là maintenant. mgechev/angular2-seedavait l'alignement avec lui aussi. voir # 857 .

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

Je pense que structurer le projet par des fonctionnalités est une méthode pratique. Cela rend le projet évolutif et maintenable facilement. Et cela permet à chaque partie du projet de fonctionner en totale autonomie. Dites-moi ce que vous pensez de cette structure ci-dessous: STRUCTURE DE PROJET DE TYPESCRIPT ANGULAIRE - ANGULAIRE 2

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

Je vais utiliser celui-ci. Très similaire au troisième montré par @Marin.

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

Donc, après avoir approfondi mes recherches, j'ai opté pour une version légèrement révisée de la méthode 3 (mgechev / angular2-seed).

J'ai essentiellement déplacé les composants pour en faire un répertoire de niveau principal, puis chaque fonctionnalité sera à l'intérieur.

Peut-être quelque chose comme cette structure:

|-- 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

J'utilise ng cli ces derniers temps, et il était vraiment difficile de trouver un bon moyen de structurer mon code.

Le plus efficace que j'ai vu jusqu'à présent provient du référentiel mrholek ( https://github.com/mrholek/CoreUI-Angular ).

Cette structure de dossiers vous permet de garder votre projet racine propre et de structurer vos composants, elle évite la convention de dénomination redondante (parfois inutile) du Guide de style officiel.

De plus, cette structure est utile pour regrouper l'importation lorsque cela est nécessaire et éviter d'avoir 30 lignes d'importation pour un seul fichier.

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*

Si le projet est petit et le restera, je recommanderais de structurer par type (Méthode 2: ng-book2)

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

Si le projet se développe, vous devez structurer vos dossiers par domaine (Méthode 3: mgechev / angular2-seed)

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

Mieux vaut suivre les documents officiels.
https://angular.io/guide/styleguide#application-structure-and-ngmodules

Je suggère la structure suivante, qui pourrait violer certaines conventions existantes.

Je m'efforçais de réduire la redondance des noms dans le chemin et j'essayais de garder un nom court en général.

Il n'y a donc pas de / app / components / home / home.component.ts | html | css.

Au lieu de cela, cela ressemble à ceci:

|-- 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