如何为Angular 6项目定义高度可扩展的文件夹结构？

Question

我正在学习更多关于角度6及其核心功能的内容,我对于应该使用角度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

我应该使用哪种类型的角色或我自己设计的真实应用样本？如果你认为它比我的好得多,请分享你的结构.谢谢

Answer 1

我在下面的文件夹结构中使用角度高度可伸缩的应用程序.以下文件夹结构是基于社区的最佳实践,其他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高级角度演示项目" 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