如何为Angular 6项目定义一个高度可伸缩的文件夹结构？

Question

我只是在学习更多关于angular 6及其核心功能的知识，我对angular 6应该使用哪种文件夹结构感到有点困惑，我使用了不同教程中的不同结构，例如traversymedia，udemy和list等等，每个人都使用不同的文件夹结构，具体取决于项目。

下面是来自angular docs的基本文件夹结构

​

以下是我在搜索和搜索后尝试的内容

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

我应该为angular的真实应用程序样本使用哪种类型，还是我自己设计的类型？如果你认为你的结构比我的好很多，请分享你的结构。谢谢

Answer 1

我使用下面的文件夹结构来实现angular高度可伸缩的应用程序。下面的文件夹结构是基于社区的最佳实践、其他GitHub Angular项目以及我自己在几个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

我已经创建了GitHub高级angular演示项目"angular6-realworld-highly-scalable-application“，以备将来参考。

Github链接：https://github.com/rajaramtt/angular6-realworld-highly-scalable-application

一个有用的媒体参考链接：https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7