如何为Angular 6项目定义高度可扩展的文件夹结构? [英] How to define a highly scalable folder structure for your Angular 6 project?
问题描述
我只是在学习有关angular 6及其核心功能的更多信息，我对应使用哪种文件夹结构处理angular 6感到有些困惑，我使用了来自不同教程的不同结构，例如traversymedia，udemy和list等等，每个人都根据项目使用不同的文件夹结构.
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
推荐答案
我正在将以下文件夹结构用于角度高度可扩展的应用程序.下面的文件夹结构是根据社区，其他GitHub Angular项目的最佳实践以及我在多个Angular项目中工作的经验创建的.
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
我创建了GitHub高级角度演示项目" angular6-realworld-高度可扩展的应用程序"以供将来参考.
I have created the GitHub high-level angular demo project "angular6-realworld-highly-scalable-application" for future reference.
Github链接: https://github.com/rajaramtt/angular6-realworld -高度可扩展的应用程序
Github Link: https://github.com/rajaramtt/angular6-realworld-highly-scalable-application
其中一个有用的媒体参考"链接: https://itnext.io/在d987de65ec7中选择一个高度可扩展的文件夹结构
One of the useful Medium Reference link: https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7
这篇关于如何为Angular 6项目定义高度可扩展的文件夹结构?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
