[Angular] Angular 개요와 프로젝트 구조

앵귤러의 구조와 흐름

(공식문서)

 

앵귤러 프로젝트 디폴트 디렉토리 구조

 

실행순서

1. 브라우저는 index.html 파일을 먼저 받아온다.

2. main.ts 스크립트 파일이 제일 처음 실행된다. main.ts의 역할은 "AppModule"을 실행시키기 위함이다.

3. app.module.ts 스크립트가 실행된다. app.module.ts는 프로젝트에서 실행될 모든 컴포넌트, 외부 모듈, 비즈니스 로직, 처음 실행 할 컴포넌트 설정을 하도록 도와준다. 앵귤러를 신체로 비유했을때, 몸 안에 있는 주요 장기들을 보관하는 역할을 하는 것 같다.

 

app-root와 컴포넌트

모든 컴포넌트는 HTML, CSS, JS 그리고 이 것들을 한대 묶어 모듈화 해주는 스크립트(TS)로 구성되어 있다. index.html에 있는 app-root 태그는 모든 컴포넌트를 담고 있는 제일 중요한 컴포넌트로써 다른 컴포넌들과 똑같이 HTML, CSS, JS, TS 파일로 이루어져 있다.

 

컴포넌트의 구조