ionic2的页面可以支持嵌套目录结构吗？ [英] Can ionic2's pages support nested directory structure?

问题描述

我看到很多Ionic 2项目的页面目录是一个像下面这样的平面结构（如果我们使用它的生成命令，生成的目录结构被平铺）。

I see the pages directory of many Ionic 2 projects is a flatted structure like below (if we use its generation command, the generated directory structure is flatted).

例如

    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 目录支持如下子目录：

But if a project includes many pages, i hope the pages directory supports sub directories like below:

例如

    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的页支持这个？与其他目录相同的问题，如 providers 和 pipes 。

Does Ionic 2's pages support this? The same question to others directory like providers and pipes.

推荐答案

当然可以。事实上，我不想根据它们是什么（页面，提供者，管道，指令等）对事物进行分组，而是根据他们所做的事情将它们分组就像 Angular 2风格指南推荐的那样。

Of course it does. In fact, instead of grouping things in terms of what they are (pages, providers, pipes, directives, and so on) I do prefer to group them in terms of what they do just like Angular 2 style guides recommends.

按功能分类的结构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.

为什么？ LIFT指南都包含在内。

Why? The LIFT guidelines are all covered.

为什么？通过组织
内容并使其与LIFT指南保持一致，帮助减少应用程序的混乱。

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

为什么？当有很多文件（例如10+）时，找到它们更容易
具有一致的文件夹结构，而在
结构中则更难。

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版本）。所以

Just keep in mind that you'll have to update the references both in all the files and also in the components templateUrl property (if you're not using the RC version). So

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

将变为：

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

这篇关于ionic2的页面可以支持嵌套目录结构吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！