Question

我是一名Angular 1开发人员，开始了解Angular 2.根据培训材料，有许多不同类型的文件夹结构方法。我将在下面列出每一个，我希望得到人们对我应该使用的意见和原因。此外，如果有一个未列出的方法，但您认为它的效果更好，请随时列出。

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

方法1：angular2-quickstart

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

文件夹结构：

方法2：ng-book2

来源：https://www.ng-book.com/2/（必须付费查看文件）

文件夹结构：

方法3：mgechev / angular2-seed

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

文件夹结构：

Answer 1

现在有官方指南。 mgechev/angular2-seed也与之保持一致。见#857。

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

Answer 2

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

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

Answer 3

因此，在做了更多的调查后，我最终选择了方法3（mgechev / angular2-seed）的略微修订版本。

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

Answer 4

我打算用这个。非常类似于@Marin所示的第三个。

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

Answer 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

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

Answer 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

Answer 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

Answer 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

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

9 个答案: