web-dev-qa-db-fra.com

Angular angulaire

Quelqu'un peut-il me donner des suggestions sur la structure de mon projet, s'il vous plaît?

-app
  -layout
     -home-layout
         -header
         -menu
         -content
            -detail-page
               -left-side
                  -left-side.component.html
                  -left-side.component.ts
               -right-side
             -detail-page.component.html
             -detail-page.component.ts
         -footer
     -pipes
     -widget-features
  -material-module
  -services
  -models

Avec la structure actuelle, l'organisation de la carte du site est très claire, je peux facilement trouver le contenu des différentes pages. Mais pour obtenir une architecture modulaire, je souhaite réorganiser la structure. Pouvez-vous me donner des conseils, s'il vous plaît?

Merci.

angulartypescriptmodular-design
8
pierre

Rappelez-vous qu’il n’ya pas de solution miracle pour cela ni de recette générale qui convienne à tous les projets.

Cela dit, vous pouvez utiliser le document officiel Guide des styles angulaires , qui tente de suivre la structure Structure des dossiers par fonctions .

En ce qui concerne Structure de l'application, vous devez garder à l'esprit le fait d'être [~ # ~] lift [~ # ~] :

Ne structurez l’application de sorte que vous puissiez [~ # ~] l [~ # ~] code rapidement, [~ # ~] i [~ # ~] identifiez le code en un coup d'œil, conservez le [~ # ~] f [~ # ~] la dernière structure que vous pouvez et [~ # ~] t [~ # ~] peut être SEC.

  • [~ # ~] l [~ # ~] ocate

Rendez le code de localisation intuitif, simple et rapide.

  • [~ # ~] i [~ # ~] dentify

Nommez le fichier de sorte que vous sachiez instantanément ce qu’il contient et représente.

Soyez descriptif avec les noms de fichier et conservez le contenu du fichier sur un seul composant.

Évitez les fichiers comportant plusieurs composants, plusieurs services ou un mélange.

  • [~ # ~] f [~ # ~] lat

Gardez une structure de dossier à plat le plus longtemps possible.

Pensez à créer des sous-dossiers lorsqu'un dossier atteint sept fichiers ou plus.

Pensez à configurer le IDE) pour masquer les fichiers distrayants et non pertinents, tels que les fichiers .js et .js.map générés.

  • [~ # ~] t [~ # ~] pour être sec

Faites DRY (ne vous répétez pas)).

Évitez d’être si DRY que vous sacrifiez la lisibilité.

Selon la structure que vous avez montrée, il est intéressant de revoir le niveau d'imbrication des dossiers selon le principe Do keep a flat folder structure as long as possible.

Cela signifie que vous devez garder la structure aussi plate que possible, ce qui permet de localiser les fichiers plus rapidement. Mais ce n’est pas une règle must, mais une devrait une. Par conséquent, si la mise à plat de la structure n’affecte pas l’organisation logique que vous avez actuellement, vous devriez probablement la rendre plus plate (sinon, vous ne devriez pas).

Rappelez-vous cela vise à améliorer le processus de développement : si quelque chose n'améliore pas l'organisation/la productivité de votre équipe, etc., ne l'utilisez pas, si cela vous aide , utilisez-le alors.

8
lealceldeiro

L’architecture vers laquelle le Guide des styles angulaires est appelée architecture de "module de fonctions", dans laquelle les fonctionnalités sont encapsulées dans des modules Angular angulaires (classes TypScript avec un décorateur @ngModule) ).

Pour vous en rendre compte, essayez d’exécuter certaines commandes de génération à l’aide de la CLI Angular.

Par exemple, pour créer un module de fonctionnalité contenant des composants/services encapsulés, exécutez les commandes suivantes:

ng g m my-awesome-feature
ng g c my-awesome-feature/cool-component
ng g s my-awesome-feature/fancy-service

La CLI créera pour vous une architecture de module Nice, et déclarera même automatiquement vos composants dans les fichiers du module!

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoolComponentComponent } from './cool-component/cool-component.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [CoolComponentComponent]
})
export class MyAwesomeFeatureModule { }
6
hevans900

Je suis toujours une structure similaire, qui combine le meilleur de la structure à base d'URL et de l'architecture modulaire, à mon avis. C'est quelque chose comme ça:

  • app
    • _des modèles
    • _prestations de service
    • _partagé
      • composants partagés
      • modules partagés
    • domicile
    • quelle que soit la page
      • quels que soient les composants spécifiques

En gros, dans "_shared", vous placerez tous les composants et modules partagés sur différentes pages, tels qu'un pied de page ou les modules Matériau. Vous devez les déclarer ou les importer dans le module _shared, ainsi que les exporter.

Je suppose que tous les services sont partagés et fournis dans le module d'application, mais vous pouvez bien sûr les insérer dans le module _shared ou dans le module de tout autre enfant.

En passant, je les nomme avec un trait de soulignement réel, de sorte qu'ils apparaissent dans l'explorateur. C'est pratique de savoir qu'ils seront toujours là-haut.

1
RTYX