Angular - Overall structural guidelines

Style 04-06

• 작은 규모로 시작하되 app이 목표하는 지향점을 명심하여야 한다.
• 구현에 대한 단기적인 관점과 장기정인 비전을 가지고 있어야 한다.
• 모든 app 코드는 src라는 폴더에 넣는다.
• 컴포넌트 폴더를 생성할때는 여러개의 동행 파일(.ts, .html, .css, .spec)을 같이 구성하도록 한다.
  • 초기 단계에서 app의 구조를 작게하고 관리하기 쉽게 유지하면서 앱이 성장함에 따라 쉽게 진화 할 수 있다.
  • 컴포넌트는 4개의 구성 파일을 가지고 있으며 이는 폴더를 빠르게 정리 할 수 있다.

아래는 이에 상응하는 폴더 및 파일 구조이다.

  src
├── app
│   ├── app-routing.module.ts
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── devices
│   │   ├── device-list
│   │   │   ├── device-list.component.css
│   │   │   ├── device-list.component.html
│   │   │   ├── device-list.component.spec.ts
│   │   │   └── device-list.component.ts
│   │   ├── devices-routing.module.ts
│   │   ├── devices.component.css
│   │   ├── devices.component.html
│   │   ├── devices.component.spec.ts
│   │   ├── devices.component.ts
│   │   ├── devices.module.ts
│   │   └── shared
│   │       ├── device.model.ts
│   │       ├── device.service.spec.ts
│   │       └── device.service.ts
│   ├── networks
│   │   ├── network
│   │   │   ├── network.component.css
│   │   │   ├── network.component.html
│   │   │   ├── network.component.spec.ts
│   │   │   └── network.component.ts
│   │   ├── network-create
│   │   │   ├── network-create.component.css
│   │   │   ├── network-create.component.html
│   │   │   ├── network-create.component.spec.ts
│   │   │   └── network-create.component.ts
│   │   ├── network-list
│   │   │   ├── network-list.component.css
│   │   │   ├── network-list.component.html
│   │   │   ├── network-list.component.spec.ts
│   │   │   └── network-list.component.ts
│   │   ├── network-selection
│   │   │   ├── network-selection.component.css
│   │   │   ├── network-selection.component.html
│   │   │   ├── network-selection.component.spec.ts
│   │   │   └── network-selection.component.ts
│   │   ├── networks-routing.module.ts
│   │   ├── networks.component.css
│   │   ├── networks.component.html
│   │   ├── networks.component.spec.ts
│   │   ├── networks.component.ts
│   │   ├── networks.module.ts
│   │   └── shared
│   │       ├── network.model.ts
│   │       ├── network.service.spec.ts
│   │       └── network.service.ts
│   └── shared
│       └── shared.module.ts
├── ...

  

Module은 연관된 feature의 component와 directive, service, pipe 과 모여 있도록 한다.