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 What are all the index.ts used for? 简化根级别的路由。有孩子路线。

Answer 3

首先，在我看来，明确使用模块是一种更好的方法，因为你会避免大量样板代码（这也是模块制作的原因之一）。

我建议使用第二种结构，因为它不那么混乱，我相信在不久的将来维护会更容易。

我建议添加到第二个结构的东西是更多的全局文件夹，如＆＃34; Car＆＃34;所有与汽车相关的子文件夹的文件夹。这样您就可以创建一个汽车模块，并且任何与汽车相关的东西都将存储在该模块中。我并不觉得你需要为每个汽车相关功能提供单独的模块。（比如selected-car.module.ts）

Here您可以了解更多有关目录结构和共享模块等内容的信息，这样可以让您的应用更加清晰。

Answer 4

Angular Docs在其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：

尽可能长时间保持平面文件夹结构。

Angular2 - 项目结构

4 个答案: