03. Angular 컴포넌트

Angular 컴포넌트는 W3C 표준인 웹 컴포넌트 기술을 기반으로 함. 이 웹 컴포넌트는 HTML, CS, JS를 하나의 단위로 묶어주는 기술.

웹 컴포넌트의 요소

• HTML 템플릿

  컴포넌트의 UI를 표현하는 영역. 재사용 가능하다는 특징.

• 템플릿 호출

  링크 엘리먼트를 이용해 호출

  <link rel="import" href="template.html">

• 쉐도우 DOM

  쉐도우 DOM은 문서 DOM 외부에 존재하기 때문에 문서 DOM에서 정의한 스타일이나 이벤트가 적용되지 않고 캡슐화됌.

  1 2 3 4 5 6 7 8 9 10

  // 쉐도우 DOM으로 <some-component> 와 같이 상세내용은 캡슐화되어 보이지않음. @Component({ selector: 'some-component', template: ` <h1>I am Shadow DOM!</h1> <h2>Nice to meet you :)</h2> <ng-content></ng-content> `; }) class SomeComponent { /* ... */ }

  1 2 3 4 5 6 7 8 9 10 11 12

  // DOM으로 캡슐화되지 않아, 사용자가 볼 수 있음. @Component({ selector: 'another-component', directives: [SomeComponent], template: ` <some-component> <h1>Hi! I am Light DOM!</h1> <h2>So happy to see you!</h2> </some-component> ` }) class AnotherComponent { /* ... */ }

• 커스텀 엘리먼트

  이름을 임의로 정의해서 만든 엘리먼트 <hello-button></hello-button>

앵귤러2에서는 웹 컴포넌트를 활용하여 html의

컴포넌트(Component) 생성

1
2
3
4
5
6
7
8
9
10

import { Component } from '@angular/core';
@Component({
  selector: 'hello-world', 
  template: `
	<div>{{msg}}</div>
	<textarea [(ngModel)]="title"></textarea>`,
  styles: ['div { background: blue; }'] })
export class HelloWorld {
  msg: string = "hello";
}

• 정의

@Component 장식자를 이용해 정의.

• 지시자

selector 속성에 컴포넌트를 등록하면 html파일이나, 다른 컴포넌트에

형식으로 사용할 수 있다.

• 템플릿속성, 스타일 속성

template, templateUrl : 내부, 외부 파일에 HTML과 템플릿 문법을 이용해 템플릿 정의.

style, styleUrls : 내부, 외부 CSS 파일에 템플릿 스타일 적용.

Reference

쉽고 빠르게 배우는 Angular2 프로그래밍 - 정진욱

Comment and share