Component & Module

저번 시간에 배운 기본 개념에 이어 이번 시간에는 module, component 에 대해 자세히 살펴보겠습니다.

 

Module

 

app.module.ts

app.module.ts 파일을 살펴보면, imports 를 통해 component 에서 사용할 module 을 설정해줍니다.

또한 생성한 moduel 파일은 위 그림과 같이 AppModule 이름으로 export 해주었습니다.

bootstrap은 가장 먼저 동작할 컴포넌트를 의미합니다.

 

 

Main.ts

모듈은 main.ts 에서 사용되고 있습니다.

main.ts

main.ts 는 앵귤러 프로젝트가 실행될 때 가장 먼저 동작하는 곳입니다.

bootstarpModule() 함수는 앵귤러 프로젝트 동작시 가장 먼저 사용할 모듈을 나타내줍니다.

따라서 AppModule이 가장 먼저 동작하게 됩니다.

 

 

Component

Component와 html 파일을 연결해주는 것은 ngModel 입니다.

app.component.ts

app.component.html

compoent에서 생성한 변수를 ngModel 디렉티브를 사용하여 컴포넌트 변수에 데이터를 넣어 줄 수 있습니다.