Angular2 - 项目结构

Question

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

or

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

Or is this structure better:

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 :)

Answer 1

I would use the second one with all files in folders on the document root. This structure makes it much easier not to get overhelmed by the lot of subfolders.

This structure is also more maintainable and easier to read.

Answer 2

Both approaches are good. But you don't need module.ts in each folder. Please read this doc http://blog.angular-university.io/angular2-ngmodule/ . So I believe you need 1 root module and 2 child module may be for brand,auto-gallery.

If you are using 1st approach. Make your of index.ts What are all the index.ts used for? To simplify routes at root level. Have child routes.

Answer 3

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.

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.

Answer 4

Angular Docs have some recommendations to this in their 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 :

Do keep a flat folder structure as long as possible.