Quel type de structure de dossier faut-il utiliser avec Angular 2?
Je suis un développeur de Angular 1 qui commence à en apprendre davantage sur Angular 2. Il existe de nombreux types de méthodes de structure de dossiers en fonction du matériel de formation. Je vais énumérer chacun d'eux ci-dessous et j'aimerais connaître l'opinion des gens sur laquelle je devrais utiliser et pourquoi. De plus, s’il existe une méthode qui n’est pas répertoriée mais que vous pensez que cela fonctionne mieux, n’hésitez pas à l’énumérer.
En regardant tout cela, la méthode n ° 3 est à peu près la même chose que je faisais avec mes applications Angular 1.
Méthode 1: angular2-quickstart
Source: https://angular.io/guide/quickstart
Structure du dossier:
Méthode 2: ng-book2
Source: https://www.ng-book.com/2/ (devoir payer pour voir les fichiers)
Structure du dossier:
Méthode 3: mgechev/angular2-seed
Source: https://github.com/mgechev/angular2-seed
Structure du dossier:
La ligne directrice officielle est là maintenant. mgechev/angular2-seed avait l'alignement aussi. voir # 857 .
https://angular.io/guide/styleguide#overall-structural-guidelines
Je pense que structurer le projet par fonctionnalités est une méthode pratique. Cela rend le projet évolutif et facile à gérer. Et cela donne à chaque partie du projet une autonomie totale ..__ Faites-moi savoir ce que vous pensez de cette structure ci-dessous: ANGULAR TypeScript STRUCTURE DU PROJET - ANGULAIRE 2
source: http://www.angulartypescript.com/angular-TypeScript-project-structure/
Ainsi, après avoir approfondi mes recherches, je me suis retrouvé avec une version légèrement révisée de la méthode 3 (mgechev/angular2-seed).
En gros, j'ai déplacé les composants pour qu'ils soient un répertoire de niveau principal et ensuite chaque fonctionnalité sera à l'intérieur de celui-ci.
Je vais utiliser celui-ci. Très semblable au troisième montré par @Marin.
app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
| |
| |___ shared
| |
| |___ home
| |
| |___ about
| |
| |___ product
|
|___ services
|
|___ structures
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 essayais de garder les noms courts en général.
Il n'y a donc pas de/app/components/home/home.component.ts | html | css.
Au lieu de cela, il 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
Si le projet est petit et restera petit, 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
J’ai utilisé ng cli récemment, et c’était vraiment difficile de trouver un bon moyen de structurer mon code.
Le plus efficace que j'ai vu jusqu'à présent vient du dépôt mrholek ( https://github.com/mrholek/CoreUI-Angular ).
Cette structure de dossiers vous permet de garder votre projet racine propre et de structurer vos composants, en évitant les conventions de nommage redondantes (parfois inutiles) du Guide de style officiel.
En outre, 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*
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