Angular2 - 项目结构 [英] Angular2 - Project Structure

问题描述

我将开始一个新的 Angular2 项目，我试图了解一个 Angular2 应用程序的最佳结构。让我有页面作为首页，自动画廊，最近画廊，品牌，汽车和选择车 。导航顺序是

I will start to a new Angular2 project and I am trying to understand the best structure for an Angular2 application. Let I have pages as home, auto-galleries, nearest-galleries, brands, cars and selected-car. And the navigation order is

home -> auto-galleries -> nearest-galleries

或

home -> brands -> cars -> selected-car

为了最好的方法，我应该为每个页面使用组件或模块吗？如果模块是一个更好的方法，我应该使用分层模块还是全部在根模块下的同一级别？

For the best approach, should I use components or modules for each page? If modules are a better approach, should I use hierarchical modules or all at same level under the root module?

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

For example, how good is the structure below:

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

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

Note: This is just a simple example, my application better fits a modular structure :)

推荐答案

首先，我认为绝对会使用模块是一个更好的方法，因为你会避免很多样板代码（这是模块的原因之一）。

First of all, definitely going with modules is a better approach in my opinion, because you will avoid a lot of boilerplate code(which is one of the reasons why modules were made anyway).

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

I would suggest going with the second structure since it's less confusing and I believe it would be much easier to maintain in the near future.

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

The thing I would suggest adding to the second structure is more global folders like "Car" folder where all the car related sub-folders would go. This way you can create just a car module and anything car related would be stored in that module. I don't really feel like you need a separate module for each car related feature. (Like selected-car.module.ts)

这里，您可以更多地了解目录结构和共享模块，这也将使您的应用程序更加清洁。

Here you can learn a bit more about directory structures and things like shared module, which would also keep your app a lot cleaner.

这篇关于Angular2 - 项目结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！