Angular2 - Project Structure

Question

新しいAngular2プロジェクトを開始する予定で、Angular2アプリケーションの最適な構造を理解しようとしています。私はhome,auto-galleries,nearest-galleries,brands,carsおよびselected-carのようなページを持っています。そして、ナビゲーション順序は、最善のアプローチについては

home -> auto-galleries -> nearest-galleries 

または

home -> brands -> cars -> selected-car 

で、私はページごとにコンポーネントまたはモジュールを使用する必要がありますか？モジュールがより良いアプローチの場合は、階層モジュールを使用するか、すべてルートモジュールの同じレベルで使用する必要がありますか？

例えば、以下の構造どのように良いです：

app 
├--- app.module.ts 
├--- app.component.ts 
├--- home.html 
├--- brands 
| ├--- brands.module.ts 
| ├--- brands.component.ts 
| ├--- brands.html 
| ├--- cars 
|   ├--- cars.module.ts 
|   ├--- cars.component.ts 
|   ├--- cars.html 
|   ├--- selected-car 
|    ├--- selected-car.module.ts 
|    ├--- selected-car.component.ts 
|    ├--- selected-car.html 
| 
├--- auto-galleries 
    ├--- auto-galleries.module.ts 
    ├--- auto-galleries.component.ts 
    ├--- auto-galleries.html 
    ├--- nearest-galleries 
      ├--- nearest-galleries.module.ts 
      ├--- nearest-galleries.component.ts 
      ├--- nearest-galleries.html 

それとも、この構造が優れている：

app 
├--- app.module.ts 
├--- app.component.ts 
├--- home.html 
├--- brands 
| ├--- brands.module.ts 
| ├--- brands.component.ts 
| ├--- brands.html 
| 
├--- cars 
| ├--- cars.module.ts 
| ├--- cars.component.ts 
| ├--- cars.html 
| 
├--- selected-car 
| ├--- selected-car.module.ts 
| ├--- selected-car.component.ts 
| ├--- selected-car.html 
| 
├--- auto-galleries 
| ├--- auto-galleries.module.ts 
| ├--- auto-galleries.component.ts 
| ├--- auto-galleries.html 
| 
├--- nearest-galleries 
    ├--- nearest-galleries.module.ts 
    ├--- nearest-galleries.component.ts 
    ├--- nearest-galleries.html 

注：これは単なる一例であり、私のアプリケーションは、より優れたモジュール構造に適合:)

Answer 1

角度ドキュメントは、彼らのStyle Guideでこれにいくつかの提言を持っている：

<project root> 
    src 
    app 
     core 
     core.module.ts 
     exception.service.ts|spec.ts 
     user-profile.service.ts|spec.ts 
     heroes 
     hero 
      hero.component.ts|html|css|spec.ts 
     hero-list 
      hero-list.component.ts|html|css|spec.ts 
     shared 
      hero-button.component.ts|html|css|spec.ts 
      hero.model.ts 
      hero.service.ts|spec.ts 
     heroes.component.ts|html|css|spec.ts 
     heroes.module.ts 
     heroes-routing.module.ts 
     shared 
     shared.module.ts 
     init-caps.pipe.ts|spec.ts 
     text-filter.component.ts|spec.ts 
     text-filter.service.ts|spec.ts 
     villains 
     villain 
      ... 
     villain-list 
      ... 
     shared 
      ... 
     villains.component.ts|html|css|spec.ts 
     villains.module.ts 
     villains-routing.module.ts 
     app.component.ts|html|css|spec.ts 
     app.module.ts 
     app-routing.module.ts 
    main.ts 
    index.html 
    ... 
    node_modules/... 
    ... 

+ Style-04-04：

は、できるだけ長いフラットなフォルダ構造を維持してください。

Answer 2

ドキュメントルートのフォルダにあるすべてのファイルに2番目のファイルを使用します。 この構造は、多くのサブフォルダに惑わされないようにします。

この構造体は、より管理しやすく、読みやすくなっています。

Answer 3

どちらの方法も良好です。しかし、各フォルダにmodule.tsは必要ありません。この文書http://blog.angular-university.io/angular2-ngmodule/をお読みください。 私はあなたが1つのルートモジュールが必要と信じて、2つの子モジュールは、ブランド、オートギャラリーのためかもしれません。

第1アプローチを使用している場合。 index.tsの作成 What are all the index.ts used for? ルートレベルでルートを簡素化する。子供のルートがあります。

Answer 4

最初にモジュールを使っているのは、モジュールがとにかく作られた理由のひとつである多くの定型コードを避けるためです。

私はそれほど混乱しないので、2番目の構造にすることをお勧めします。近い将来に維持する方がはるかに簡単だと思います。

2番目の構造に追加することをお勧めしたいのは、すべての車関連のサブフォルダが移動する「Car」フォルダのようなグローバルフォルダです。この方法で、あなたは車のモジュールだけを作成することができ、関連するものはそのモジュールに格納されます。私は実際にあなたがそれぞれの自動車関連の特徴のための別個のモジュールを必要とするように感じません。 （selected-car.module.tsのように）

Hereあなたはディレクトリ構造や共有モジュールのようなものについてもう少し学ぶことができます。