Helpex - Trao đổi & giúp đỡ Đăng nhập
128

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:

128 hữu ích 5 bình luận 101k xem chia sẻ
114

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 .

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

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

114 hữu ích 5 bình luận chia sẻ
11

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/

11 hữu ích 0 bình luận chia sẻ
10

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

10 hữu ích 0 bình luận chia sẻ
9

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
9 hữu ích 2 bình luận chia sẻ
1

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
1 hữu ích 0 bình luận chia sẻ
0

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*
0 hữu ích 0 bình luận chia sẻ
0

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

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ angular , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading