devNote

앵귤라의 기본 구성 요소라합니다.

내용은 뷰와 클래스로 구성됬다네요.

뷰에서 호출된 화면 경로를 제어한다.

각각의 Hook을 implements  하여 Hook 별 처리 내용을 정의 할수 있다.

export class SpyDirective implements OnInit, OnDestroy {

ngOnInit() { this.logIt(`onInit`); } ngOnDestroy() { this.logIt(`onDestroy`); }

}

lifecycle hooks 확인

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

import { Hero } from '../hero';

import { HeroService } from '../hero.service';

@Component({

  selector: 'app-heroes',

  templateUrl: './heroes.component.html',

  styleUrls: ['./heroes.component.css']

})

export class HeroesComponent implements OnInit {

  heroes: Hero[];

  constructor(private heroService: HeroService) { }

  ngOnInit() {

    this.getHeroes();

  }

  getHeroes(): void {

    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);

  }

}

Component metadata 

@Component 데코레이터 어노테이션을 붙혀서 선언한다.

selector : CSS 셀렉터 처럼 사용 하면 되고 HTML 에 포함된 요소를 해당 컴포넌트로 랜더링 한다.

templateUrl : 컴포넌트의 주요 뷰를 HTML 템플릿된 파일의 상대경로를 정의한다. 

template : 컴포넌트의 주요 HTML  뷰 코드를 작성한다. 역따옴표를 사용하여 안의 따옵표 코드를 같이 사용 할수 있다.

providers : 사용할 컴포넌트의 의존성 주입하는 프로바이저이다. 배열형태로 정의한다.  컴포넌트의 생성자에서 받아서 인스턴스를 생성한다.

styleUrls : 여기에 정의한 CSS 파일은 해당 컴포넌트에서에 스타일이 적용된다.

style : 해당 컴포넌트에 적용될 스타일 코드를 작성한다.