问题
I am just learning more about angular 6 and its core features , I am confused a little bit about which folder structure I should USE for angular 6 , I have used different structures from different tutorials eg traversymedia, udemy and list goes on, everyone uses different folder structure depending on the project.
here is basic folder structure from angular docs
here is what I have tried after searching and searchning
└───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
Which type I should use for real world application sample from angular or the one I designed myself? please share your structure if you think its much better than what I have. thanks
回答1:
I am using below folder structure for the angular highly scalable applications. The below folder structure is created based on best practices from the community, other GitHub Angular projects and my own experiences from working on a couple of Angular projects.
|-- 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
I have created the GitHub high-level angular demo project "angular6-realworld-highly-scalable-application" for future reference.
Github Link: https://github.com/rajaramtt/angular6-realworld-highly-scalable-application
One of the useful Medium Reference link: https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7
来源：https://stackoverflow.com/questions/51776177/how-to-define-a-highly-scalable-folder-structure-for-your-angular-6-project