Angular 파일 구조 및 흐름

src: Angualr의 구성요소, 공통 CSS, 정적파일(이미지, 폰트), 설정파일, 필수파일

• /app: 구성요소

  • /app.component.(ts, html, css, spec.ts): 루트 컴포넌트(모든 컴포넌트의 부모 컴포넌트)를 구성하는 컴포넌트, /src/index.html의 에 로드되어 보여짐
  • /app.module.ts: Angular의 모든 구성요소 등록하는 루트 모듈, @NgModule 데코레이터의 파라미터로 전달되는 메타데이터에 애플리케이션 전체 설정 정보를 저장한 root module

• /assets/: 이미지, 폰트와 같은 정적 파일을 위한 폴더

• /environments/: 프로젝트 빌드 시에 사용될 프로덕션/ 개발용 환경설정 파일

• index.html: 웹 실행 시 처음으로 로딩되는 디폴트 페이지(루트 컴포넌트(app.component.*)의 셀렉터(<.app-root>)에 의해 로드되어 표시됨)

• main.ts: 프로젝트 메인 진입점(main entry point), 루트모듈(src/app/app.module.ts)로 애플리케이션을 실행함

• style.css: 전역에 적용되는 글로벌 CSS

• tsconfig(.app, .spec).json: TypeScript 컴파일 옵션 설정파일

• typings.d.ts: TypeScript 타입 선언 파일

처리 흐름

index.html -> main.ts -> app.modules.ts -> app.component.ts