Welche Art von Ordnerstruktur sollte mit Angular 2 verwendet werden?

Ich bin ein Angular 1-Entwickler, der anfängt, sich mit Angular 2 vertraut zu machen. Abhängig vom Schulungsmaterial gibt es viele verschiedene Arten von Ordnerstrukturmethoden. Ich werde jeden einzelnen unten auflisten und würde gerne die Meinungen der Leute erfahren, welche ich verwenden sollte und warum. Wenn es eine Methode gibt, die nicht aufgeführt ist, aber Sie der Meinung sind, dass sie besser funktioniert, können Sie sie auch auflisten.

Wenn ich mir all das anschaue, ist Methode 3 ziemlich genau so, wie ich meine Angular 1-Apps gemacht habe.

Methode 1: Angular2-Schnellstart

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

Ordnerstruktur:

Methode 2: ng-book2

Quelle: https://www.ng-book.com/2/ (muss bezahlen, um die Dateien zu sehen)

Ordnerstruktur:

Methode 3: mgechev / angle2-seed

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

Ordnerstruktur:

Die offizielle Richtlinie ist jetzt da. mgechev/angular2-seedhatte auch Ausrichtung darauf. siehe # 857 .

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

Ich denke, die Strukturierung des Projekts nach Funktionalitäten ist eine praktische Methode. Es macht das Projekt leicht skalierbar und wartbar. Und es macht jeden Teil des Projekts in einer völligen Autonomie. Lassen Sie mich wissen, was Sie über diese Struktur unten denken: ANGULAR TYPESCRIPT PROJECT STRUCTURE - ANGULAR 2

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

Ich werde diesen benutzen. Sehr ähnlich dem dritten von @Marin.

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

Nachdem ich mehr Nachforschungen angestellt hatte, entschied ich mich für eine leicht überarbeitete Version von Methode 3 (mgechev / angle2-seed).

Ich habe Komponenten im Grunde genommen in ein Hauptverzeichnis verschoben, und dann wird jedes Feature darin enthalten sein.

Vielleicht so etwas wie diese Struktur:

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

Ich habe in letzter Zeit ng cli verwendet, und es war wirklich schwierig, einen guten Weg zu finden, um meinen Code zu strukturieren.

Das effizienteste, das ich bisher gesehen habe, stammt aus dem mrholek-Repository ( https://github.com/mrholek/CoreUI-Angular ).

Diese Ordnerstruktur ermöglicht es Ihnen, Ihr Stammprojekt sauber zu halten und Ihre Komponenten zu strukturieren. Sie vermeidet redundante (manchmal nutzlose) Namenskonventionen des offiziellen Style Guides.

Diese Struktur ist auch nützlich, um den Import bei Bedarf zu gruppieren und 30 Importzeilen für eine einzelne Datei zu vermeiden.

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*

Wenn das Projekt klein ist und klein bleibt, würde ich empfehlen, nach Typ zu strukturieren (Methode 2: ng-book2)

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

Wenn das Projekt wächst, sollten Sie Ihre Ordner nach Domänen strukturieren (Methode 3: mgechev / angle2-seed).

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

Befolgen Sie besser die offiziellen Dokumente.
https://angular.io/guide/styleguide#application-structure-and-ngmodules

Ich schlage die folgende Struktur vor, die möglicherweise gegen einige bestehende Konventionen verstößt.

Ich war bestrebt, die Namensredundanz im Pfad zu reduzieren, und habe versucht, die Namen im Allgemeinen kurz zu halten.

Es gibt also keine / app / components / home / home.component.ts | html | css.

Stattdessen sieht es so aus:

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