首页 文章

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

提问于
浏览 次
123

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

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

Method 1: angular2-quickstart

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

文件夹结构：

enter image description here

Method 2: ng-book2

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

文件夹结构：

enter image description here

Method 3: mgechev/angular2-seed

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

文件夹结构：

enter image description here

angular

7 回答

  • 113

    官方指南现在就在那里 . mgechev/angular2-seed 也与它对齐 . 见#857 .

    Angular 2 application structure

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

    回复于
  • 10

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

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

    回复于
  • 0

    所以在做了更多的调查后，我最终得到了方法3（mgechev / angular2-seed）的略微修改版本 .

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

    回复于
  • -2

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

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

    我最近一直在使用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*
    回复于
  • 11

    也许像这样的结构：

    |-- 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
    回复于
  • 9

    如果项目很小并且仍然很小，我建议按类型进行结构（方法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

    回复于

相关问题