Angular에서는 TypeScript의 Decorator을 이용하여 Annotation을 제공하고 있다.( TypeScript문서에서는 실험적기능이라고 소개하고 있어서 어떻게 최종적으로 정의 될지는 아직 모르겠다.) 아직 Angular에서는 class에 대한 decorator만을 사용하고 있는 것으로 보인다. Method에 대한 decorator는 계속적으로 변하고 있는 것으로 파악된다.(인터넷에 있는 예제 샘플이 계속 변하고 있는 것으로 파악된다.)

app.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'Carpenter';
}

Component 데코레이터는 Angular의 컴포넌트를 기술하여 준다.

1. selector: 선택자를 정의한다. template에서 UI를 표현하는데 사용하는 tag명등이다. 3가지의 유형이 있다.
   1. customer tag app-root

      <app-root></app-root>

   2. class .app-root

      <div class="app-root"></div>

   3. property [app-root]

      <div app-root"></div>

2. templateUrl: UI를 정의하는 별도의 html파일를 기술, 인라인으로 사용하려면 template를 이용하여 html작성한다.
3. styleUrls: styleSheet를 정의하는 파일을 기술, 인라인으로 사용하려면 styles를 이용하여 css를 작성한다.

employee.service.ts

import { Injectable } from '@angular/core';
 
@Injectable({
   providedIn: 'root'
})
export class EmployeeService {
 
  constructor() { }
 
  getEmployees(){
    return [
      { id: 3, name: "둘리", age: 100030 },
      { id: 4, name: "고길동", age: 30 },
      { id: 5, name: "희동이", age: 30 },
      { id: 5, name: "고철수", age: 30 },
    ];
  }
}