Angular 2 ควรใช้โครงสร้างโฟลเดอร์ประเภทใด

ฉันเป็นนักพัฒนา 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

โครงสร้างโฟลเดอร์:

ขณะนี้มีแนวทางอย่างเป็นทางการแล้ว mgechev/angular2-seedมีแนวเดียวกันด้วย ดู# 857

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

ฉันคิดว่าการจัดโครงสร้างโครงการตามฟังก์ชันการทำงานเป็นวิธีการที่ใช้ได้จริง ทำให้โครงการปรับขนาดและบำรุงรักษาได้ง่าย และทำให้แต่ละส่วนของโปรเจ็กต์ทำงานเป็นอิสระทั้งหมด แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับโครงสร้างนี้ด้านล่าง: โครงสร้างโครงการประเภทเชิงมุม - ANGULAR 2

แหล่งที่มา: http://www.angulartypescript.com/angular-typescript-project-structure/

ฉันจะใช้อันนี้ คล้ายกับอันที่สามที่แสดงโดย @Marin

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

ดังนั้นหลังจากทำการตรวจสอบเพิ่มเติมแล้วฉันก็ลงเอยด้วยวิธีที่ 3 ที่แก้ไขเล็กน้อย (mgechev / angular2-seed)

โดยพื้นฐานแล้วฉันได้ย้ายส่วนประกอบต่างๆไปเป็นไดเร็กทอรีระดับหลักจากนั้นแต่ละฟีเจอร์จะอยู่ในนั้น

อาจจะเป็นโครงสร้างนี้:

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

ฉันใช้ ng cli เมื่อเร็ว ๆ นี้และมันยากมากที่จะหาวิธีที่ดีในการจัดโครงสร้างโค้ดของฉัน

สิ่งที่มีประสิทธิภาพที่สุดที่ฉันเคยเห็นมาจากที่เก็บ mrholek ( https://github.com/mrholek/CoreUI-Angular )

โครงสร้างโฟลเดอร์นี้ช่วยให้คุณสามารถรักษาโปรเจ็กต์รูทของคุณให้สะอาดและจัดโครงสร้างส่วนประกอบของคุณได้โดยหลีกเลี่ยงรูปแบบการตั้งชื่อที่ซ้ำซ้อน (บางครั้งก็ไร้ประโยชน์) ของ Style Guide อย่างเป็นทางการ

นอกจากนี้โครงสร้างนี้ยังมีประโยชน์ในการนำเข้ากลุ่มเมื่อจำเป็นและหลีกเลี่ยงการนำเข้า 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*

หากโครงการมีขนาดเล็กและยังคงมีขนาดเล็กฉันขอแนะนำให้จัดโครงสร้างตามประเภท (วิธีที่ 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

ฉันขอแนะนำโครงสร้างต่อไปนี้ซึ่งอาจละเมิดอนุสัญญาบางประการที่มีอยู่

ฉันพยายามลดความซ้ำซ้อนของชื่อในเส้นทางและพยายามตั้งชื่อให้สั้นโดยทั่วไป

ดังนั้นจึงไม่มี / 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