Old/old-Angularjs2

4. AngularJS 2.0 Directives

양디 2016. 1. 19. 14:42



시작하기 전에..

이번 내용도 저번 시간에 했던 내용들을 그대로 이어서 한다.


그러나 몇몇 변화한 점이 있다.


style 부분을 ts 내부에서 style로 선언해 준것이 아니라 처음 실행 화면인 angular2.ejs 파일 내부에 추가시켰다.


따라서 화면에 bootstrap.css 파일을 불러들이는 코드를 집어넣어주도록 화자.


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

을 ejs 파일에 추가시켜주면 되겠다.

객체 구분하기


사실상 이번 포스트 결과물은 저번 포스트의 결과물과 별다를 것이 없다.


그러나 결과물은 같을지 몰라도 그 파일들을 보면 분명히 다르다는 것을 알 수 있다.


중요한 점은 파일을 기능별로 세분화하여 구분하였다는 것이다.


이는 관리하는 데에 있어서 굉장히 편한 점으로 다가올 것은 분명한 사실이다.


1
2
3
4
5
6
export interface Person {
  id: number;
  name: string;
  webpage: string;
}
 
cs

먼저 위의 코드는 person.ts 파일을 새로 만들어서 집어 넣은 내용이다.


interface 만을 가지고 있는 파일이라는 것을 알 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
import {Component} from 'angular2/core';
import {Http, HTTP_PROVIDERS, BaseRequestOptions, RequestOptions} from 'angular2/http';
import {Person} from './person';
import {PersonDetailComponent} from './person.detail.component';
 
@Component({
  selector: 'my-app',
  //viewProviders: [HTTP_PROVIDERS],
  templateUrl:'/app/view.html',
  directives: [PersonDetailComponent]
})
 
export class AppComponent {
  public title = 'Dalkom IT World';
  public selectedPerson: Person;
  public people = PERSON;
  onSelect(person: Person) { this.selectedPerson = person; }
}
 
var PERSON: Person[] = [{
  id: 1,
  name: 'Dalkom IT',
  webpage:'http://www.dalkomit.com'
},{
  id: 2,
  name: 'Tistory',
  webpage:'http://www.tistory.com'
},{
  id: 3,
  name: 'Google',
  webpage:'http://www.google.com'
},{
  id: 4,
  name: 'Daum',
  webpage:'http://www.daum.net'
},{
  id: 5,
  name: 'Naver',
  webpage:'http://www.naver.com'
}];
 
cs


위 코드는 중요한 app.component.ts 의 코드이다.


저번 코드와는 다르게 @Component 부분에 style이 사라졌다. 이것은 css를 따로 페이지에서 로드해오기 때문이다.


또 11번 라인이 추가되었는데, directives 라는 속성이 추가되었다.


Directives allow you to attach behavior to elements in the DOM.


위 내용은 Angular2.0 메인 페이지에 나온 설명이다.


말 그대로 Action, behavior 등을 추가하는 부분을 directives에 넣어주면 되겠다.


1
2
3
4
5
6
7
8
9
10
11
<h1>{{title}}</h1>
<ul class="people">
     <li style="margin-top:3px;"*ngFor="#person of people"
       [class.selected]="person === selectedPerson"
       (click)="onSelect(person)">
       <button class="btn btn-primary" type="button" style="width: 150px">
         <span class="badge" style="margin-right : 4px">{{person.id}}</span>{{person.name}} </button>
     </li>
   </ul>
   <person-detail [person]="selectedPerson"></person-detail>
 
cs


view.html 파일 내부이다.


아래 보면 이전에 있던 introduce ! 관련하여 인풋 폼 들이 사라진것을 볼 수 있다.


대신에 10번 라인에 person-detail 이라는 새로운 태그가 보인다.


태그 안에 보면 [person] = "seletedPerson" 이라는 속성이 보이는데,


이는 directive에서 person이라는 객체를 지니고 있는데, 이 객체에 위에서 선택된 selectedPerson을 집어넣겠다는 의미이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
<div *ngIf="person">
      <h1>{{person.name}} Introduce!</h1>
      <h2>{{person.webpage}}</h2>
      <div><label>id: </label>{{person.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="person.name" placeholder="name"/>
      </div>
      <div>
        <label>Website: </label>
        <input [(ngModel)]="person.webpage" placeholder="webpage"/>
      </div>
    </div>
cs


detail.view.html 파일의 내부이다.


위의 person-detail 내부에 위의 내용이 들어가게 된다.


person이라는 객체는 view.html에서 selectedPerson이 들어가게 된다.


따라서 받은 객체를 아래에서 출력해주는 것이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import {Component} from 'angular2/core';
import {Http, HTTP_PROVIDERS, BaseRequestOptions, RequestOptions} from 'angular2/http';
import {Person} from './person';
 
@Component({
  selector: 'person-detail',
  inputs: ['person'],
  //viewProviders: [HTTP_PROVIDERS],
  templateUrl:'/app/detail.view.html'
})
 
export class PersonDetailComponent{
  public person : Person;
}
 
cs


person.detail.component.ts 파일 내부이다.


inputs에 person이 있는것이 보이는가 ?


또한 아래 보면 person 객체를 Person interface를 통해서 생성해내는 것을 볼 수 있다.


따라서 객체가 주고받고 넘겨지는 과정은 다음과 같다.


app.component.ts 파일 내부의 people -> 선택된 selectedPerson -> person.detail.component 의 person 객체 -> detail.view.html 의 person


결과물은 같으나, 컴포넌트마다 객체를 가지고 있고 그 객체들을 주고받는 다는 것을 알 수 있다.


최종 결과물

css가 조금 바뀌었을 뿐, 내용은 같다.








댓글