GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

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

===== Component =====
<code javascript 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';
}
</code>

Component 데코레이터는 Angular의 컴포넌트를 기술하여 준다.
  - selector: 선택자를 정의한다. template에서 UI를 표현하는데 사용하는 tag명등이다. 3가지의 유형이 있다.
    - customer tag **app-root** <code html><app-root></app-root></code>
    - class **.app-root** <code html><div class="app-root"></div></code>
    - property **[app-root]** <code html><div app-root"></div></code>
  - templateUrl: UI를 정의하는 별도의 html파일를 기술, 인라인으로 사용하려면 ''template''를 이용하여 html작성한다.
  - styleUrls: styleSheet를 정의하는 파일을 기술, 인라인으로 사용하려면 ''styles''를 이용하여 css를 작성한다.

===== Injectable =====

<code javascript 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 },
    ];
  }
}
</code>

GaramX

사용자 도구

사이트 도구

문서 도구