Mudule & Component
앵귤러는 모듈 - 컴포넌트만 익히면 끝난다는 말이 있을 정도로 중요하다고 한다.
(구글 & 책 & GPT가 ㅎ)
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
위의 코드에서 AppModule은 애플리케이션의 주요 모듈로 ,
"declarations" 배열에는 이 모듈에서 사용되는 컴포넌트('AppComponent')를 등록한다.
"imports" 배열에는 다른 모듈을 가져오는데 사용된다.
"bootstrap" 배열에는 애플리케이션의 시작 컴포넌트를 지정한다.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My Angular App';
}
위의 코드에서 AppComponent는 애플리케이션의 주요 컴포넌트로 ,
HTML 템플릿과 컴포넌트 클래스가 정의되어 있다.
이 컴포넌트 클래스는 "title" 속성을 가지고 있으며, 이 속성은 템플릿에서 사용된다.
요약하자면,
모듈 은 애플리케이션의 기능을 그룹화하고 구성
컴포넌트 는 사용자 인터페이스를 저의하고 해당 동작을 제어