Application Structure and NgModules

  • All of the app's code goes in a folder named src.

  • All content is one asset per file.

LIFT (style 04-01)

  • Try to be DRY (Don't repeat yourself).

  • Struct the app such that you can locate code quickly.

Locate (style 04-02)

Make locating code intuitive, simple and fast.

Identify (Style 04-03)

  • Name the file such that you instantly know what it contains and represents.

  • Avoid files with multiple components, services or mixture.

Flat (Style 04-04)

  • Keep a flat folder structure as long as possible.

  • Create sub folder when there are seven or more files.

T-DRY (Style 04-05)

  • Do be DRY.

  • Avoid being so DRY that you sacrifice readability.

Overall structural guidelines (Style 04-07)

  • Create folders named for the feature area they represent.

  • Create an NgModule for each feature area.

App root module (Style 04-08)

  • Create an NgModule in the app's root folder.

  • Consider naming the root module app.module.ts

Feature modules (Style 04-09)

  • Create a NGModule for all distinct feature in an application.

  • Place the feature module in the same named folder as the feature area; example app/heroes.

  • Name the feature module file reflecting the name of the feature area, and file, for example app/heroes/heroes.module.ts defines HeroesModule.

Shared feature module (Style 04-10)

  • Create a feature module named SharedModule in a shared folder. For example app/shared/shared.module.ts defines SharedModule.

  • Avoid providing services in Shared modules. Services are usually singletons that are provided once for the entire application or in a particular feature module.