Loại cấu trúc thư mục nào nên được sử dụng với Angular 2?

Các hướng dẫn chính thức là có ngay bây giờ. mgechev/angular2-seedđã liên kết với nó quá. xem # 857 .

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

Tôi nghĩ rằng cấu trúc dự án theo chức năng là một phương pháp thực tế. Nó làm cho dự án có thể mở rộng và duy trì dễ dàng. Và nó làm cho mỗi phần của dự án hoạt động trong sự tự chủ hoàn toàn. Hãy cho tôi biết suy nghĩ của bạn về cấu trúc này dưới đây: CẤU TRÚC DỰ ÁN ANGULAR TYPESCRIPT - ANGULAR 2

nguồn: http://www.angulartypescript.com/angular-typescript-project-structure/

Vì vậy, sau khi điều tra thêm, cuối cùng tôi đã đi đến một phiên bản sửa đổi một chút của Phương pháp 3 (mgechev / angular2-seed).

Về cơ bản tôi đã chuyển các thành phần thành một thư mục cấp chính và sau đó mỗi tính năng sẽ nằm trong đó.

Tôi sẽ sử dụng cái này Rất giống với cái thứ ba được hiển thị bởi @Marin.

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

Có lẽ một cái gì đó giống như cấu trúc này:

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

Gần đây tôi đã sử dụng ng cli và thật khó để tìm ra cách tốt để cấu trúc mã của tôi.

Công cụ hiệu quả nhất tôi từng thấy cho đến nay đến từ kho lưu trữ mrholek ( https://github.com/mrholek/CoreUI-Angular ).

Cấu trúc thư mục này cho phép bạn giữ cho dự án gốc của bạn sạch sẽ và cấu trúc các thành phần của bạn, nó tránh được quy ước đặt tên dự phòng (đôi khi vô dụng) của Hướng dẫn Phong cách chính thức.

Ngoài ra, cấu trúc này rất hữu ích để nhóm nhập khi cần và tránh có 30 dòng nhập cho một tệp.

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*

Nếu dự án nhỏ và sẽ vẫn nhỏ, tôi khuyên bạn nên cấu trúc theo loại (Phương pháp 2: ng-book2)

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

Nếu dự án sẽ phát triển, bạn nên cấu trúc các thư mục của mình theo tên miền (Cách 3: mgechev / angular2-seed)

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

Tốt hơn để làm theo các tài liệu chính thức.
https://angular.io/guide/styleguide#application-structure-and-ngmodules