메타데이터, 데이터 바인딩, 서비스
메타데이터 클래스를 처리하는 방법을 Angular에게 알려줍니다. app.component.ts파일에서 클래스를 만들었습니다.
데코레이터(Decorator)는 함수(function)이며, 데코레이터는 무엇을 할지 클래스에 알려줍니다.
@Component({
selector: 'my-component',
templateUrl: 'app/app.component.html',
directives: [HighlightDirective]
})
export class MyComponent {
public name: String;
public today: Date;
constructor() {
this.name = 'Angular 2 Rocks !';
this.today = new Date();
}
sayMyName() {
alert (this.name);
}
}
여기서 @Component는 데코레이터 입니다. 이 함수에서는 클래스를 구성하는 매개변수를 전달합니다. 데코레이터에 전달하는 파라미터들은 다음과 같습니다.
selector : Angular 에서 바인딩할수 있는 CSS 선택
templateUrl : 템플릿 파일의 위치
directives : 템플릿에 바인딩 할 수 있는 디렉티브 배열
providers : 서비스를 의해 의존관계 주입자들(dependency injection providers)의 배열
데이터 바인딩 방법
데이터바인딩을 사용하면 템플릿의 데이터 구성요소에 바인딩 할 수 있습니다. 데이터 바인딩 형식에는 다음 네가지가 있습니다.
- DOM에 다가
- DOM에서 직접
- 1,2 번 둘다
- 속성 및 이벤트 바인딩을 사용하여 속성과 이벤트 바인딩을 결합한 양방향 데이터 바인딩
ngModel
단방향 바인딩
다음 코드를 한번 봅시다
<h1>{{today | date:"fullDate"}}</h1>
<div>
<button (click)="sayMyName()" myHighlight>Do Something Special</button>
</div>
app.component.html파일 안에서 {{today}}는 app.component.ts 파일의 today 프로퍼티를 단방향 바인딩을 통해 바인딩하고 있습니다. sayMyName() 함수는 click 이벤트 핸들러에 바인딩 됩니다.
양방향 바인딩
양방향 바인딩을 시연하려면 app.component.html 파일에 <div> 태그를 포함하도록 변경하세요.
<div>
<input [(ngModel)]="task">
</div>
<div>
{{task}}
</div>
app.component.ts 파일에서는 아래와 같이 비슷하게 변경해 줍니다.
export class MyComponent {
public name: String;
public today: Date;
public task: string;
constructor() {
this.name = 'Angular 2 Rocks !';
this.today = new Date();
this.task = '';
}
sayMyName() {
alert (this.name);
}
}
여기서는 task 프로퍼티에 바인딩했습니다. 사용자가 입력 할 때 입력 내용이 페이지에 나타납니다.
서비스 만들기
Angular2의 서비스는 정의 된 함수가 있는 클래스를 말합니다.무엇이든 서비스가 될 수 있습니다.
JS 파일에 저장된 작업 목록을 읽는 서비스를 작성해 보겠습니다.
/app폴더에 task.service.ts라는 파일을 만들고 다음 파일 추가해 보겠습니다.
import {Injectable} from 'angular2/core';
@Injectable()
export class TaskService {
}
Angular Injectable함수를 포함하고 이 함수를 @Injectable() 데코레이터에 적용했습니다.
TypeScript는 @Injectable 데코레이터를 보고 Angular가 이 서비스에 다른 종속성 주입을 하는데 필요한 메타 데이터를 방출합니다.
작업을 위한 모델을 만들어 보겠습니다.
/app폴더에 tasks.ts라는 새 파일을 만듭니다. 이 파일에서 우리는 다음과 같이 작업을 위한 모델을 생성할 것입니다.
export class Task {
id: number;
name: string;
}
JavaScript 배열을 사용하여 새 파일을 만듭니다. 이 파일은 sample.tasks.ts로 다음 내용을 추가 합니다.
import {Task} from './tasks';
export var TASKS: Task[] = [
{"id": 11, "name": "Buy Bread"},
{"id": 12, "name": "Buy Milk"},
{"id": 13, "name": "Buy Soap"}
];
모델을 이 파일에 포함시켰고 이 모델을 가진 배열을 ㅁ나들었습니다. 이 배열은 다음과 같이 TASKS로 내보내집니다.
task.service.ts파일에서 우리는 이 클래스를 포함하고 GET 메소드를 생성할 것입니다. 서비스 파일의 내용을 다음 코드로 바꿉니다.
import {TASKS} from './sample.tasks';
import {Injectable} from 'angular2/core';
@Injectable()
export class TaskService {
getTasks() {
return TASKS;
}
}
모델로 서비스와 데이터를 생성했습니다. 이제 템플릿과 구성 요소를 수정해야 합니다. app.component.ts 파일을 다음과 일치하도록 수정하세요.
import {Component} from 'angular2/core';
import {HighlightDirective} from './highlight.directive';
import {TaskService} from './task.service';
import {Task} from './tasks';
@Component({
selector: 'my-component',
templateUrl: 'app/app.component.html',
directives: [HighlightDirective],
providers: [TaskService]
})
export class MyComponent {
public name: String;
public today: Date;
public task: String;
public taskList: Task[];
constructor(private _taskService: TaskService) {
this.name = 'Angular 2 Rocks !';
this.today = new Date();
this.task = '';
this.taskList = this._taskService.getTasks();
}
sayMyName() {
alert (this.name);
}
}
service 와 tasks 를 포함 시켰습니다.
import {TaskService} from './task.service';
import {Task} from './tasks';
service 를 가능하게 하려면 공급자가 가능해야 합니다. 그래서 @Component 데코레이터에 다음 코드를 넣었습니다.
providers: [TaskService]
service 가 컴포넌트에 노출이 됩니다. taskList를 포함할 배열을 생성하고 Task 유형으로 만듭니다.
export class MyComponent {
public name: String;
public today: Date;
public task: String;
public taskList: Task[];
constructor(private _taskService: TaskService) {
this.name = 'Angular 2 Rocks !';
this.today = new Date();
this.task = '';
this.taskList = this._taskService.getTasks();
}
sayMyName() {
alert (this.name);
}
}
생성자에 service에 연결하여 개인 변수에 할당하는 정의가 포함되어 있습니다. 밑줄은 데이터가 외부로 전달되고 있음을 빠르게 확인 할 수 있도록 하기위해 사용됩니다.
this._taskSerivce.getTasks()메소드를 사용하면 서비스 파일에 작업을 가져올 수 있습니다.
app.component.html파일에 다음을추가합니다.
<div>
<ul>
<li *ngFor="#item of taskList">{{item.name}}</li>
</ul>
</div>
*ngFor 다이렉티브를 사용하면 taskList배열을 신속하게 반복할 수 있습니다.
