web-dev-qa-db-fra.com

Comment définir une structure de dossiers hautement évolutive pour votre projet Angular 6?

J'apprends juste plus sur angular 6 et ses fonctionnalités principales, je suis un peu confus quant à la structure de dossiers que je devrais UTILISER pour angular 6, j'ai utilisé différentes structures de différents tutoriels, par exemple traversymedia, udemy et la liste continue, tout le monde utilise une structure de dossiers différente selon le projet.

voici la structure de base des dossiers de angular docs enter image description here

voici ce que j'ai essayé après avoir cherché et recherché

└───src
    ├───app
    │   ├───layout
    │   │   ├───admin
    │   │   │   ├───breadcrumbs
    │   │   │   └───title
    │   │   └───auth
    │   ├───pages
    │   │   ├───animations
    │   │   ├───authentication
    │   │   │   ├───forgot
    │   │   │   ├───lock-screen
    │   │   │   ├───login
    │   │   │   │   ├───with-bg-image
    │   │   │   │   ├───with-header-footer
    │   │   │   │   ├───with-social
    │   │   │   │   └───with-social-header-footer
    │   │   │   └───registration
    │   │   │       ├───multi-step
    │   │   │       ├───with-bg-image
    │   │   │       ├───with-header-footer
    │   │   │       ├───with-social
    │   │   │       └───with-social-header-footer
    │   │   ├───change-log
    │   │   ├───charts
    │   │   │   ├───c3-js
    │   │   │   ├───chart-js
    │   │   │   ├───echart
    │   │   │   ├───google
    │   │   │   ├───knob
    │   │   │   ├───peity
    │   │   │   ├───radial
    │   │   │   └───sparklines
    │   │   ├───dashboard
    │   │   │   ├───dashboard-analytics
    │   │   │   ├───dashboard-crm
    │   │   │   ├───dashboard-default
    │   │   │   ├───dashboard-ecommerce
    │   │   │   └───dashboard-project
    │   │   ├───invoice
    │   │   │   ├───basic-invoice
    │   │   │   ├───list-invoice
    │   │   │   └───summary-invoice
    │   │   ├───maintenance
    │   │   │   ├───coming-soon
    │   │   │   ├───error
    │   │   │   └───offline-ui
    │   │   ├───map
    │   │   │   ├───google-map
    │   │   │   └───vector
    │   │   ├───simple-page
    │   │   ├───task
    │   │   │   ├───board-task
    │   │   │   ├───details-task
    │   │   │   ├───issue-task
    │   │   │   └───list-task
    │   │   ├───ui-elements
    │   │   │   ├───advance
    │   │   │   │   ├───modal
    │   │   │   │   ├───notifications
    │   │   │   │   └───notify
    │   │   │   ├───basic
    │   │   │   │   ├───accordion
    │   │   │   │   ├───alert
    │   │   │   │   ├───breadcrumb
    │   │   │   │   ├───button
    │   │   │   │   ├───generic-class
    │   │   │   │   ├───label-badge
    │   │   │   │   ├───tabs
    │   │   │   │   ├───typography
    │   │   │   │   └───ui-other
    │   │   │   ├───crm-contact
    │   │   │   ├───editor
    │   │   │   │   ├───froala-edit
    │   │   │   │   └───quill-edit
    │   │   │   ├───file-upload
    │   │   │   ├───forms
    │   │   │   │   ├───add-on
    │   │   │   │   ├───advance-elements
    │   │   │   │   ├───basic-elements
    │   │   │   │   ├───form-validation
    │   │   │   │   ├───masking
    │   │   │   │   ├───picker
    │   │   │   │   └───select
    │   │   │   └───tables
    │   │   │       ├───bootstrap-table
    │   │   │       │   ├───basic-bootstrap
    │   │   │       │   ├───border
    │   │   │       │   ├───sizing
    │   │   │       │   └───styling
    │   │   │       └───data-table
    │   │   │           ├───basic-datatable
    │   │   │           ├───child-row
    │   │   │           ├───inline-edit
    │   │   │           ├───other-datatable
    │   │   │           ├───paging
    │   │   │           └───selection
    │   │   │               ├───cell
    │   │   │               ├───checkbox
    │   │   │               ├───multi-rows
    │   │   │               └───single-row
    │   │   ├───user
    │   │   │   ├───card
    │   │   │   └───profile
    │   │   └───widget
    │   │       ├───widget-advance
    │   │       ├───widget-chart
    │   │       ├───widget-data
    │   │       └───widget-static
    │   └───shared
    │       ├───accordion
    │       ├───card
    │       ├───element
    │       ├───fullscreen
    │       ├───menu-items
    │       ├───modal-animation
    │       ├───modal-basic
    │       ├───scroll
    │       └───spinner
    │           └───spinkit-css
    ├───assets
    │   ├───charts
    │   │   ├───amchart
    │   │   ├───echart
    │   │   ├───flot
    │   │   ├───knob
    │   │   ├───radial
    │   │   └───waterball
    │   ├───css
    │   ├───data
    │   ├───icon
    │   │   ├───icofont
    │   │   │   ├───css
    │   │   │   └───fonts
    │   │   └───svg-animated
    │   ├───images
    │   │   ├───auth
    │   │   ├───commingsoon
    │   │   ├───error
    │   │   ├───flags
    │   │   ├───mega-menu
    │   │   ├───modal
    │   │   ├───slider
    │   │   ├───task
    │   │   ├───tooltip
    │   │   ├───user-card
    │   │   │   └───card
    │   │   ├───user-profile
    │   │   │   └───follower
    │   │   └───widget
    │   ├───jq-vmap
    │   │   └───maps
    │   │       └───continents
    │   └───pages
    │       └───treeview
    └───environments

Quel type dois-je utiliser pour un exemple d'application du monde réel de angular ou celui que j'ai conçu moi-même? Veuillez partager votre structure si vous pensez que c'est beaucoup mieux que ce que j'ai. Merci

6
user9964622

J'utilise la structure de dossiers ci-dessous pour les applications angular hautement évolutives. La structure de dossiers ci-dessous est créée sur la base des meilleures pratiques de la communauté, d'autres GitHub Angular projets et mes propres expériences en travaillant sur quelques projets Angular.

|-- app

     |-- [+] configs
     |
     |
     |-- core
       |-- [+] authentication
       |-- [+] guards
       |-- [+] http
       |-- [+] interceptors
       |-- [+] layout
       |-- [+] mocks
       |-- [+] services
       |-- [+] strategies
       |-- core.module.ts
       |-- router.animations.ts
       |-- template-core.module.ts
       |-- theme.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts    
     |
     |     
     |-- modules
       |-- client
           |-- [+] components
           |-- client-routing.module.ts
           |-- client.module.ts
       |--- [+] other modules

     |
     |-- shared
          |-- [+] components
          |-- [+] directives
          |-- [+] pipes
          |-- [+] models
          |-- [+] module
      |
      |-- app-routing.module.ts
      |-- app.module.ts
      |-- etc ...
      |
|-- assets
     |-- images
     |-- icons
     |-- css
          |-- styles.scss

J'ai créé le haut niveau GitHub angular " angular6-realworld-hautement-évolutif-application " pour référence future).

Lien Github: https://github.com/rajaramtt/angular6-realworld-highly-scalable-application

Un des liens utiles de référence moyenne: https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7