Angular 2 应该使用哪种类型的文件夹结构？答案

【问题标题】：Which type of folder structure should be used with Angular 2?Angular 2 应该使用哪种类型的文件夹结构？
【发布时间】：2016-05-22 15:25:52
【问题描述】：

我是一名 Angular 1 开发人员，开始学习 Angular 2。根据培训材料的不同，文件夹结构方法有很多不同类型。我将在下面列出每一个，我很想得到人们对我应该使用哪些以及为什么使用的意见。另外，如果有没有列出的方法，但您觉得效果更好，也请一并列出。

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

方法一：angular2-quickstart

来源：https://angular.io/guide/quickstart

文件夹结构：

方法二：ng-book2

来源：https://www.ng-book.com/2/（需要付费才能查看文件）

文件夹结构：

方法3：mgechev/angular2-seed

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

文件夹结构：

【问题讨论】：

我觉得方法2效率最高，因为所有组件、服务等都应该放在单独的文件夹中，方便以后查找文件。这是非常复杂的应用程序中最有效的方法。
感谢@Bryan 的回答，您认为typings 文件夹的原因是什么？其他两种方法都没有使用它。另外，您对主文件的 app.ts 与 main.ts 有何看法？
所以我最近使用的种子转到了样式指南，这里是method3。我很困惑这是如何扩展的，为什么会有共享文件夹？是不是这个框架的全部意义在于任何组件/指令/管道/服务都可以被任何人共享？我很难理解如何轻松找到指令/管道 .. 使用样式指南格式，您只需要知道它的位置，或者在每个文件夹中查找您认为只用于客户的服务，现在您需要它来做其他事情。
@Gary - 所以我对播种机的共享文件夹的看法是，shared 中的任何内容都可以在位于同一文件夹级别或任何子文件夹的类中使用。你可以在任何地方使用任何类吗？当然可以，但是当有人新查看您的代码时，他们将不知道发生了什么。通过将在不同组件/文件夹之间使用的类放置在 shared 中，它清楚地让程序员知道它在多个地方使用。
我们的团队最近经历了这个决策过程，发现这个资源非常有用：npmjs.com/package/awesome-angular2

标签： angular

【解决方案1】：

现在有官方指南。 mgechev/angular2-seed 也与之对齐。见#857。

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

【讨论】：

我找不到文档建议在文件夹名称前放置“+”号的位置。不记得是什么意思了，有什么解释吗？
每个index.ts 文件的用途是什么？是用来路由的吗？
@FacundoGFlores 这意味着组件是延迟加载的。
@Nicky index.ts 文件的目的是简化导入，您不必从每个文件中导入，而是从文件夹中导入：例如 import { Hero, Sword, Shield } from 'app/英雄/英雄'
上面的图片现在已经过时了。例如，它不显示“src”文件夹，该文件夹成为“app”文件夹的父文件夹。

【解决方案2】：

我认为按功能构建项目是一种实用的方法。它使项目易于扩展和维护。它使项目的每个部分都完全自主地工作。让我知道您对以下结构的看法： ANGULAR TYPESCRIPT PROJECT STRUCTURE – ANGULAR 2

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

这个答案很旧。我现在使用来自 github 的 mgechev/angular2-seed 用于我的 3 个项目。太棒了！！！
Savaratkar 的答案在这里是最好的，但是我将通过创建一个资产 forlder 来更进一步，其中 js、css、图像、字体...等驻留。

【解决方案4】：

所以在进行更多调查后，我最终选择了方法 3 的略微修改版本（mgechev/angular2-seed）。

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

【讨论】：

【解决方案5】：

可能是这样的结构：

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

【讨论】：

好。但我很困惑应该将什么移至components 和pages 文件夹？在您的示例中，我们应该在 module > home > components 文件夹中保留什么？
@Jack 使用此链接作为参考 - github.com/mathisGarberg/angular-folder-structure
谢谢，但该示例仅使用 page 作为组件。但是我需要一个存在机器人组件和页面的示例才能看到分离。 github页面有什么建议吗？
有什么帮助吗？
我不明白你的问题，请打开上面的参考链接并按照路径angular-folder-structure/src/app/modules/，打开其中一个模块并调查单个模块文件夹结构。

【解决方案6】：

我最近一直在使用 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*

【讨论】：

【解决方案7】：

如果项目很小并且会保持很小，我建议按类型构建（方法2：ng-book2）

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

如果项目将增长，您应该按域构建文件夹（方法 3：mgechev/angular2-seed）

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

最好关注官方文档。
https://angular.io/guide/styleguide#application-structure-and-ngmodules

【讨论】：

【解决方案8】：

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

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

所以没有/app/components/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

【讨论】：

【解决方案9】：

这是我的

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

【讨论】：