Angular Project 구조

# 개요

Angular 프로젝트의 이상적인 directory 구조에 대해 알아보자.

# 이름 규칙

- Service 이름 : 해당 Feature에 해당하는 키워드를 항상 사용할 것

Here is a compliant folder and file structure:

<project root>

src

app

core

exception.service.ts|spec.ts

logger.service.ts|spec.ts

user-profile.service.ts|spec.ts

heroes

hero-detail

hero-detail.component.ts|html|css|spec.ts       //Detail.page 느낌

hero-list

hero-list.component.ts|html|css|spec.ts          //Home.page 느낌

shared(생략 가능)

hero-button.component.ts|html|css|spec.ts      //util성 컴포넌트

hero.model.ts[필수]                                         //dto 모델

hero.service.ts|spec.ts[필수]                            //db 서비스

heroes.component.ts|html|css|spec.ts(list가 전부일 경우, 생략 가능)

//해당 모듈 내에서 메인 컴포넌트

//heroes(Hero[]) 선언, constructor 내 HeroService 참조

heroes.module.ts[필수]  

heroes-routing.module.ts(생략 가능)

shared

shared.module.ts[필수]   //init-caps.pipe, filter-text.component, filter-text.service를 import / 

// FilterTextComponent, InitCapsPipe를 declarations / FilterTextService를 providers 지정(grouping)

init-caps.pipe.ts|spec.ts

filter-text.component.ts|spec.ts

filter-text.service.ts|spec.ts

villains

villain-detail

villain-detail.component.ts|html|css|spec.ts  //vallain-detail 구현

villain-list

villain-list.component.ts|html|css|spec.ts      //vallain-list 구현(ngFor 사용)

shared

hero-button.component.ts|html|css|spec.ts //util성 컴포넌트

hero.model.ts                                            //dto 모델

villain.service.ts|spec.ts                             //db 서비스

villains.component.ts|html|css|spec.ts             //<app-vallain-detail> <app-vallain-list> 사용

//해당 모듈 내에서 메인 컴포넌트

villains.module.ts  //VallainDetailComponent,VallainListComponent, VallainsComponent Import, declaration

villains-routing.module.ts //VallainRouting...

app.component.ts|html|css|spec.ts

app.module.ts

app-routing.module.ts

main.ts

index.html

...

node_modules/...

...

대충 느낌은 위와 같다.

# 출처

- https://github.com/johnpapa/heroes-angular

- https://github.com/bampakoa/angular-heroes