Jenis struktur folder mana yang harus digunakan dengan Angular 2?

Saya adalah pengembang Angular 1 yang mulai belajar tentang Angular 2. Ada banyak jenis metode struktur folder tergantung pada materi pelatihan. Saya akan daftar masing-masing di bawah ini dan saya ingin mendapatkan pendapat orang tentang yang harus saya gunakan dan mengapa. Juga, jika ada metode yang tidak terdaftar tetapi Anda merasa itu berfungsi lebih baik, jangan ragu untuk mendaftar juga.

Dengan melihat semua ini, metode # 3 cukup banyak bagaimana saya melakukan aplikasi Angular 1 saya.

Metode 1: angular2-quickstart

Sumber: https://angular.io/guide/quickstart

Struktur Folder:

Metode 2: ng-book2

Sumber: https://www.ng-book.com/2/ (harus membayar untuk melihat file)

Struktur Folder:

Metode 3: mgechev / angular2-seed

Sumber: https://github.com/mgechev/angular2-seed

Struktur Folder:

Pedoman resmi ada di sana sekarang. mgechev/angular2-seedmemiliki keselarasan dengannya juga. lihat # 857 .

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

Saya pikir penataan proyek dengan fungsi adalah metode praktis. Itu membuat proyek scalable dan dipelihara dengan mudah. Dan itu membuat setiap bagian dari proyek bekerja dalam otonomi total. Biarkan saya tahu apa yang Anda pikirkan tentang struktur di bawah ini: ANGULAR TYPESCRIPT PROYEK STRUKTUR - ANGULAR 2

sumber: http://www.angulartypescript.com/angular-typescript-project-structure/

Saya akan menggunakan yang ini. Sangat mirip dengan yang ketiga ditunjukkan oleh @Marin.

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

Jadi setelah melakukan lebih banyak penyelidikan saya akhirnya pergi dengan versi yang sedikit direvisi dari Metode 3 (mgechev / angular2-seed).

Saya pada dasarnya memindahkan komponen menjadi direktori level utama dan kemudian setiap fitur akan berada di dalamnya.

Mungkin struktur seperti ini:

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

Saya telah menggunakan ng cli belakangan ini, dan itu benar-benar sulit untuk menemukan cara yang baik untuk menyusun kode saya.

Yang paling efisien yang pernah saya lihat sejauh ini berasal dari repositori mrholek ( https://github.com/mrholek/CoreUI-Angular ).

Struktur folder ini memungkinkan Anda untuk menjaga proyek root Anda tetap bersih dan menyusun komponen Anda, itu menghindari konvensi penamaan yang berlebihan (kadang-kadang tidak berguna) dari Panduan Gaya resmi.

Selain itu, struktur ini berguna untuk mengelompokkan impor saat diperlukan dan menghindari 30 baris impor untuk satu file.

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*

Jika proyek kecil dan akan tetap kecil, saya akan merekomendasikan untuk struktur berdasarkan tipe (Metode 2: ng-book2)

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

Jika proyek akan bertambah, Anda harus menyusun folder berdasarkan domain (Metode 3: mgechev / angular2-seed)

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

Lebih baik untuk mengikuti dokumen resmi.
https://angular.io/guide/styleguide#application-structure-and-ngmodules

Saya menyarankan struktur berikut, yang mungkin melanggar beberapa konvensi yang ada.

Saya berusaha untuk mengurangi redundansi nama di jalan, dan mencoba untuk tetap menyebutkan nama secara umum.

Jadi tidak ada / app / komponen / home / home.component.ts | html | css.

Sebaliknya terlihat seperti ini:

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