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

Tôi là một nhà phát triển Angular 1 đang bắt đầu tìm hiểu về Angular 2. Có rất nhiều loại phương pháp cấu trúc thư mục khác nhau tùy thuộc vào tài liệu đào tạo. Tôi sẽ liệt kê từng người dưới đây và tôi rất muốn biết ý kiến ​​của mọi người về việc tôi nên sử dụng cái gì và tại sao. Ngoài ra, nếu có một phương pháp không được liệt kê nhưng bạn cảm thấy rằng nó hoạt động tốt hơn, xin vui lòng liệt kê nó.

Bằng cách xem xét tất cả những điều này, phương pháp # 3 gần giống như cách tôi đang thực hiện các ứng dụng Angular 1 của mình.

Cách 1: angular2-quickstart

Nguồn: https://angular.io/guide/quickstart

Cấu trúc thư mục:

Cách 2: ng-book2

Nguồn: https://www.ng-book.com/2/ (phải trả tiền để xem các tập tin)

Cấu trúc thư mục:

Phương pháp 3: mgechev / angular2-seed

Nguồn: https://github.com/mgechev/angular2-seed

Cấu trúc thư mục:

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 bên dưới: CẤU TRÚC DỰ ÁN ANGULAR TYPESCRIPT - ANGULAR 2

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

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

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 đó.

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 mà tôi 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

Tôi đề nghị cấu trúc sau, có thể vi phạm một số quy ước hiện có.

Tôi đã cố gắng để giảm sự dư thừa tên trong đường dẫn và cố gắng tiếp tục đặt tên ngắn.

Vì vậy, không có / ứng dụng / thành phần / home / home.component.ts | html | css.

Thay vào đó, nó trông như thế này:

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