Angular2-项目结构_Angular_Design Patterns_Project Structure

Angular2-项目结构

angular design-patterns

Angular2-项目结构,angular,design-patterns,project-structure,Angular,Design Patterns,Project Structure,我将开始一个新的Angular2项目，并试图了解Angular2应用程序的最佳结构。让我有主页，自动图库，最近的图库，品牌，汽车和选定汽车。导航顺序是 home -> auto-galleries -> nearest-galleries 或对于最佳方法，我应该为每个页面使用组件或模块吗？如果模块是一种更好的方法，我应该使用分层模块还是在根模块下使用所有相同级别的模块例如，下面的结构有多好： app ├--- app.module.ts ├--- app.component.t

我将开始一个新的

Angular2

项目，并试图了解

Angular2

应用程序的最佳结构。让我有

主页

，

自动图库

，

最近的图库

，

品牌

，

汽车

和

选定汽车

。导航顺序是

home -> auto-galleries -> nearest-galleries

或

对于最佳方法，我应该为每个页面使用组件或模块吗？如果模块是一种更好的方法，我应该使用分层模块还是在根模块下使用所有相同级别的模块

例如，下面的结构有多好：

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

注意：这只是一个简单的示例，我的应用程序更适合模块化结构：）

我将使用第二个应用程序处理文档根目录上文件夹中的所有文件。这种结构使它更容易不被太多的子文件夹控制住

这种结构也更易于维护和阅读。

两种方法都很好。但您不需要每个文件夹中都有module.ts。请看这份文件。所以我相信你需要1个根模块和2个子模块可能是品牌，汽车画廊

如果您使用第一种方法。使用index.ts创建您的索引

在根级别简化路由。有子路由。

首先，在我看来，使用模块绝对是一种更好的方法，因为您将避免使用大量样板代码（这也是创建模块的原因之一）

我建议使用第二种结构，因为它不太容易混淆，而且我相信在不久的将来它会更容易维护

我建议将更多的全局文件夹添加到第二个结构中，如“Car”文件夹，所有与汽车相关的子文件夹都将放在其中。通过这种方式，您可以只创建一个汽车模块，任何与汽车相关的内容都将存储在该模块中。我真的不觉得你需要一个单独的模块为每个汽车相关的功能。（与所选的car.module.ts类似）

您可以了解更多关于目录结构和共享模块之类的内容，这也会使您的应用程序更干净。

Angular Docs在其文档中对此有一些建议：


src
应用程序
核心
core.module.ts
例外情况。服务。ts |规范ts
用户配置文件.service.ts | spec.ts
英雄
英雄
hero.component.ts | html | css | spec.ts
英雄榜
hero list.component.ts | html | css | spec.ts
共享
英雄按钮.component.ts | html | css | spec.ts
hero.model.ts
英雄.服务.ts |规格ts
heromes.component.ts | html | css | spec.ts
HEROLES.module.ts
HEROLES-routing.module.ts
共享
shared.module.ts
初始管帽，管道，规格
文本过滤器.component.ts | spec.ts
text filter.service.ts | spec.ts
恶棍
恶棍
...
恶棍名单
...
共享
...
恶棍.组件.ts | html | css | spec.ts
恶棍
恶棍-routing.module.ts
app.component.ts | html | css | spec.ts
app.module.ts
app-routing.module.ts
梅因酒店
index.html
...
节点_模块/。。。
...