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

Angular 文档在他们的 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 :

Do keep a flat folder structure as long as possible.