Angular 2 ile hangi tür klasör yapısı kullanılmalıdır?

Angular 2 hakkında bilgi edinmeye başlayan bir Angular 1 geliştiricisiyim. Eğitim materyaline bağlı olarak birçok farklı klasör yapısı yöntemi vardır. Her birini aşağıda listeleyeceğim ve kullanmam gereken ve neden kullanmam gerektiği konusunda insanların fikirlerini almayı çok isterim. Ayrıca, listelenmemiş bir yöntem varsa ancak daha iyi çalıştığını düşünüyorsanız, lütfen bunu listelemekten çekinmeyin.

Tüm bunlara bakarak, yöntem # 3, hemen hemen Angular 1 uygulamalarımı nasıl yaptığımı gösteriyor.

Yöntem 1: açısal2 hızlı başlangıç

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

Klasör Yapısı:

Yöntem 2: ng-book2

Kaynak: https://www.ng-book.com/2/ (dosyaları görmek için ödeme yapmanız gerekir)

Klasör Yapısı:

Yöntem 3: mgechev / angular2-seed

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

Klasör Yapısı:

Resmi kılavuz artık orada. mgechev/angular2-seedonunla da uyum sağladı. bkz. # 857 .

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

Projeyi işlevlere göre yapılandırmanın pratik bir yöntem olduğunu düşünüyorum. Projeyi kolayca ölçeklenebilir ve sürdürülebilir hale getirir. Ve projenin her parçasının tam bir özerklik içinde çalışmasını sağlar. Bu yapı hakkında ne düşündüğünüzü aşağıda bana bildirin: AÇISAL TİPİ HAZIR PROJE YAPISI - ANGULAR 2

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

Ben bunu kullanacağım. @Marin tarafından gösterilen üçüncüye çok benzer.

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

Bu yüzden, daha fazla araştırma yaptıktan sonra, Yöntem 3'ün biraz revize edilmiş bir versiyonunu (mgechev / angular2-seed) kullanmaya başladım.

Temel olarak bileşenleri bir ana seviye dizini olarak taşıdım ve sonra her özellik onun içinde olacak.

Belki bu yapı gibi bir şey:

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

Son zamanlarda ng cli kullanıyorum ve kodumu yapılandırmanın iyi bir yolunu bulmak gerçekten zordu.

Şimdiye kadar gördüğüm en verimli olanı, mrholek deposundan geliyor ( https://github.com/mrholek/CoreUI-Angular ).

Bu klasör yapısı, kök projenizi temiz tutmanıza ve bileşenlerinizi yapılandırmanıza olanak tanır, resmi Stil Kılavuzunun gereksiz (bazen işe yaramaz) adlandırma kuralını önler.

Ayrıca, bu yapı, gerektiğinde içe aktarmayı gruplamak ve tek bir dosya için 30 satır içe aktarmayı önlemek için kullanışlıdır.

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*

Proje küçükse ve küçük kalacaksa, türe göre yapılandırmanızı tavsiye ederim (Yöntem 2: ng-kitap2)

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

Proje büyüyecekse, klasörlerinizi etki alanına göre yapılandırmalısınız (Yöntem 3: mgechev / angular2-seed)

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

Resmi belgeleri takip etmek daha iyidir.
https://angular.io/guide/styleguide#application-structure-and-ngmodules

Mevcut bazı sözleşmeleri ihlal edebilecek aşağıdaki yapıyı öneriyorum.

Yoldaki isim fazlalığını azaltmaya ve genel olarak isimlendirmeyi kısa tutmaya çalışıyordum.

Yani / app / components / home / home.component.ts | html | css yok.

Bunun yerine şuna benzer:

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