angular - ionic2的页面可以支持嵌套目录结构吗？

Question

我看到许多 Ionic 2 项目的 pages 目录是一个扁平结构，如下所示(如果我们使用它的生成命令，生成的目录结构是扁平的)。

例如

    pages/
      |- login/
      |    |-login.html
      |    |-login.scss
      |    |_login.ts
      |- logout/
      |    |-logout.html
      |    |-logout.scss
      |    |_logout.ts
      |- order-list/
      |    |-order-list.html
      |    |-order-list.scss
      |    |_order-list.ts
      |- order-detail/
      |    |-order-detail.html
      |    |-order-detail.scss
      |    |_order-detail.ts 

但是如果一个项目包含很多页面，我希望pages目录支持如下子目录:

例如

    pages/
      |- auth/
      |     |- login/
      |     |    |-login.html
      |     |    |-login.scss
      |     |    |_login.ts
      |     |- logout/
      |     |    |-logout.html
      |     |    |-logout.scss
      |     |    |_logout.ts
      |- order/
      |     |- list/
      |     |    |-list.html
      |     |    |-list.scss
      |     |    |_list.ts
      |     |- detail/
      |     |    |-detail.html
      |     |    |-detail.scss
      |     |    |_detail.ts

Ionic 2 的 pages 支持吗？对其他目录如 providers 和 pipes 同样的问题。

Answer 1

当然可以。事实上，与其根据它们是什么(页面、提供程序、管道、指令等)对事物进行分组，我更愿意根据它们的作用对它们进行分组em> 就像Angular 2 style guides推荐。

Folders-by-Feature Structure STYLE 04-07

Do create folders named for the feature area they represent.

Why? A developer can locate the code, identify what each file represents at a glance, the structure is as flat as it can be, and there is no repetitive nor redundant names.

Why? The LIFT guidelines are all covered.

Why? Helps reduce the app from becoming cluttered through organizing the content and keeping them aligned with the LIFT guidelines.

Why? When there are a lot of files (e.g. 10+), locating them is easier with a consistent folder structure and more difficult in a flat structure.

请记住，您必须更新所有文件和组件 templateUrl 属性中的引用(如果您不使用RC版)。所以

@Component({
  templateUrl: 'build/pages/login/login.html',
  pipes: [ ... ],
  directives: [ ... ]
})
...

会变成:

@Component({
  templateUrl: 'build/pages/auth/login/login.html',
  pipes: [ ... ],
  directives: [ ... ]
})
...