角度2应该使用哪种类型的文件夹结构？

我是一个角度1开发，是开始学习角度2。有很多不同类型的文件夹结构的方法取决于培训材料。我将在下面列出每一个，我想得到人们的意见，我应该使用和为什么。此外，如果有一个方法没有列出，但你觉得它的工作更好，请随时列出它以及。

通过查看所有这些，方法 # 3几乎就是我如何做我的 Angular 1应用程序。

方法1: 角度2-快速启动

资料来源: https://angular.io/guide/quickstart

文件夹结构:

enter image description here

方法2: ng-book2

来源: https://www.ng-book.com/2/(必须付费才能看到文件)

文件夹结构:

enter image description here

方法3: mgechev/angular2-籽

资料来源: https://github.com/mgechev/angular2-seed

文件夹结构:

enter image description here

107397 次浏览
小开

我认为用功能来构建项目是一种实用的方法。它使得项目具有可伸缩性和易于维护性。它使得项目的每个部分都完全自主地工作。 让我知道你对下面这个结构的看法: 工程项目结构-角度2

来源: http://www.angulartypescript.com/angular-typescript-project-structure/

小开

因此，在做了更多的调查之后，我最终使用了方法3(mgechev/angular2-種)的一个稍微修改过的版本。

我基本上把组件移动到一个主目录，然后每个功能都会在其中。

小开
最佳答案

官方指南现在已经有了。 mgechev/angular2-seed也和它对齐了。参见 # 857。

Angular 2 application structure

Https://angular.io/guide/styleguide#overall-structural-guidelines

小开

我打算用这个，和@Marin 展示的第三个非常相似。

app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
|   |
|   |___ shared
|   |
|   |___ home
|   |
|   |___ about
|   |
|   |___ product
|
|___ services
|
|___ structures
小开

我最近一直在使用 ng cli，很难找到一种好的方法来构造我的代码。

到目前为止，我看到的最有效的方法来自 mrholek 存储库(https://github.com/mrholek/CoreUI-Angular)。

这种文件夹结构可以让你的根项目保持整洁，组件结构化，避免了官方样式指南中多余的(有时是无用的)变数命名原则。

此外，这种结构对于在需要时进行分组导入非常有用，可以避免为一个文件导入30行内容。

src
|
|___ app
|
|   |___ components/shared
|   |   |___ header
|   |
|   |___ containers/layout
|   |   |___ layout1
|   |
|   |___ directives
|   |   |___ sidebar
|   |
|   |___ services
|   |   |___ *user.service.ts*
|   |
|   |___ guards
|   |   |___ *auth.guard.ts*
|   |
|   |___ views
|   |   |___ about
|   |
|   |___ *app.component.ts*
|   |
|   |___ *app.module.ts*
|   |
|   |___ *app.routing.ts*
|
|___ assets
|
|___ environments
|
|___ img
|
|___ scss
|
|___ *index.html*
|
|___ *main.ts*
小开

也许像这样的结构:

|-- app
|-- modules
|-- home
|-- [+] components
|-- pages
|-- home
|-- home.component.ts|html|scss|spec
|-- home-routing.module.ts
|-- home.module.ts
|-- core
|-- authentication
|-- authentication.service.ts|spec.ts
|-- footer
|-- footer.component.ts|html|scss|spec.ts
|-- guards
|-- auth.guard.ts
|-- no-auth-guard.ts
|-- admin-guard.ts
|-- http
|-- user
|-- user.service.ts|spec.ts
|-- api.service.ts|spec.ts
|-- interceptors
|-- api-prefix.interceptor.ts
|-- error-handler.interceptor.ts
|-- http.token.interceptor.ts
|-- mocks
|-- user.mock.ts
|-- services
|-- srv1.service.ts|spec.ts
|-- srv2.service.ts|spec.ts
|-- header
|-- header.component.ts|html|scss|spec.ts
|-- core.module.ts
|-- ensureModuleLoadedOnceGuard.ts
|-- logger.service.ts
|-- shared
|-- components
|-- loader
|-- loader.component.ts|html|scss|spec.ts
|-- buttons
|-- favorite-button
|-- favorite-button.component.ts|html|scss|spec.ts
|-- collapse-button
|-- collapse-button.component.ts|html|scss|spec.ts
|-- directives
|-- auth.directive.ts|spec.ts
|-- pipes
|-- capitalize.pipe.ts
|-- safe.pipe.ts
|-- configs
|-- app-settings.config.ts
|-- dt-norwegian.config.ts
|-- scss
|-- [+] partials
|-- _base.scss
|-- styles.scss
|-- assets
小开

如果 project 很小并且将保持很小，我建议按类型进行结构化(方法2: ng-book2)

app
|- components
|  |- hero
|  |- hero-list
|  |- villain
|  |- ...
|- services
|  |- hero.service.ts
|  |- ...
|- utils
|- shared

如果项目将增长，你应该结构的域文件夹(方法3: mgechev/angular2种子)

app
|- heroes
|  |- hero
|  |- hero-list
|  |- hero.service.ts
|- villains
|  |- villain
|  |- ...
|- utils
|- shared

最好跟着官方文件走。
Https://angular.io/guide/styleguide#application-structure-and-ngmodules

小开

我建议采用以下结构，这可能会违反一些现有的约定。

我一直在努力减少路径中的名称冗余，并尽量保持命名的简短。

所以没有/app/Component/home/home.Component. ts | html | css。

相反，它看起来像这样:

|-- app
|-- users
|-- list.ts|html|css
|-- form.ts|html|css
|-- cars
|-- list.ts|html|css
|-- form.ts|html|css
|-- configurator.ts|html|css
|-- app.component.ts|html|css
|-- app.module.ts
|-- user.service.ts
|-- car.service.ts
|-- index.html
|-- main.ts
|-- style.css
小开

这是我的

app
|
|-- shared (for html shared between modules)
|   |
|   |-- layouts
|   |   |
|   |   |-- default
|   |   |   |-- default.component.ts|html|scss|spec.ts
|   |   |   |-- default.module.ts
|   |   |
|   |   |-- fullwidth
|   |       |-- fullwidth.component.ts|html|scss|spec.ts
|   |       |-- fullwidth.module.ts
|   |
|   |-- components
|   |   |-- footer
|   |   |   |-- footer.component.ts|html|scss|spec.ts
|   |   |-- header
|   |   |   |-- header.component.ts|html|scss|spec.ts
|   |   |-- sidebar
|   |   |   |-- sidebar.component.ts|html|scss|spec.ts
|   |
|   |-- widgets
|   |   |-- card
|   |   |-- chart
|   |   |-- table
|   |
|   |-- shared.module.ts
|
|-- core (for code shared between modules)
|   |
|   |-- services
|   |-- guards
|   |-- helpers
|   |-- models
|   |-- pipes
|   |-- core.module.ts
|
|-- modules (each module contains its own set)
|   |
|   |-- dashboard
|   |-- users
|   |-- books
|       |-- components -> folders
|       |-- models
|       |-- guards
|       |-- books.service.ts
|       |-- books.module.ts
|
|-- material
|   |-- material.module.ts

提交答案