Angular js 컴포넌트 구조 파악

app.component.ts를 예시로 Component 구조를 파악하고 나만의 논리로 정리 해놓겠음

 

//app.component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';
}

 

@(데코레이터)안 오브젝트 구조를 잘 보아야 함.

• selector: HTML 템플릿의 이름이며, 다른 템플릿에서 <app-root></app-root> 와 같이 html 이름으로 import 가능
• templateUrl: 해당 컴포넌트의 HTML 템플릿과 매핑
• styleUrl: 해당 컴포넌트 스타일 파일과 매핑

 

이 후, export 부분은 해당 Component를 다른 Component나 html에서 적용시 사용할 수 있는 값임

 

ex) AppComponent.title === 'my-app'