Angular2 - 項目結構

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

我會使用第二個文件根目錄中的文件夾中的所有文件。 這種結構使得更容易不被大量子文件夾所淹沒。

這種結構也更易於維護和閱讀。

Answer 2

兩種方法都很好。 但是你不需要在每個文件夾中使用module.ts。 請閱讀此文檔http://blog.angular-university.io/angular2-ngmodule/ 。 所以我相信你需要1個根模塊和2個子模塊可能是品牌，自動畫廊。

如果您使用第一種方法。 使你的index.ts 所有index.ts用於什么？ 簡化根級別的路由。 有孩子的路線。

Answer 3

首先，在我看來，明確使用模塊是一種更好的方法，因為你將避免大量樣板代碼（這也是模塊制作的原因之一）。

我建議使用第二種結構，因為它不那么混亂，我相信在不久的將來維護會更容易。

我建議添加到第二個結構的東西是更多的全局文件夾，如“Car”文件夾，其中所有與汽車相關的子文件夾都會出現。 這樣您就可以創建一個汽車模塊，並且任何與汽車相關的東西都將存儲在該模塊中。 對於每個與汽車相關的功能，我真的不覺得你需要一個單獨的模塊。 （比如selected-car.module.ts）

在這里，您可以了解更多關於目錄結構和共享模塊等內容，這也可以使您的應用程序更加清晰。

Answer 4

Angular Docs在其風格指南中對此提出了一些建議：

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

不要保持一個平面文件夾結構盡可能長的時間。