3. AngularJS 2.0 기초 사용법 따라하기 2

그림 클릭시 정식 홈페이지로 이동합니다.

저번 시간에 했던 내용을 이어서 할 예정입니다.

파일을 준비해주세요 !

View.html

app.component.ts 파일에서 View에 해당하는 template을 templateUrl로 바꿀 수 있습니다.

따라서 View에 해당하는 부분을 따로 파일로 저장하고 Url 지정을 해주면 됩니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<h1>{{title}}</h1> <ul class="people">      <li *ngFor="#person of people"        [class.selected]="person === selectedPerson"        (click)="onSelect(person)">        <span class="badge">{{person.id}}</span> {{person.name}}      </li>    </ul>      <div *ngIf="selectedPerson">          <h1>{{selectedPerson.name}} Introduce!</h1>          <h2>{{selectedPerson.webpage}}</h2>          <div><label>id: </label>{{selectedPerson.id}}</div>          <div>            <label>name: </label>            <input [(ngModel)]="selectedPerson.name" placeholder="name"/>          </div>          <div>            <label>Website: </label>            <input [(ngModel)]="selectedPerson.webpage" placeholder="webpage"/>          </div>        </div>     Colored by Color Scripter

cs

view.html 파일의 내용을 위와 같이 만듭니다.

여기서 중요한 것은 3번의 *ngFor와 10번의 *ngIf인데, 

*ngFor는 ts 파일 내부의 Array와 Binding 을 시켜줍니다.

위의 #person of people 은, people이라는 Array를 바인딩 시키고, 각각의 변수들을 person이라는 객체로 받아오겠다는 뜻입니다.

for(int i=0;i < people.length;i++){

person = people[i];

................

}

for문으로 풀어 쓰면 이정도가 되려나요 ? 

ngfor의 문법은 3가지로 사용할 수 있다고 합니다.

• <li *ngFor="#item of items; #i = index">...</li>
• <li template="ngFor #item of items; #i = index">...</li>
• <template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>

따라서 위의 내용은, 

3번 줄 : people 배열의 객체를 하나씩 받아와서 person에 넣는다.

5번 줄 : li를 클릭하면 onclick(person)을 집어넣는다.

4번 줄 : person과 selectedPerson이 동일한 li 태그에 selected 클래스를 추가한다.

정도가 되겠습니다.

그 다음으로 Angular 2 의 속성으로, 10번 라인의 *ngIf 가 있습니다.

문법은 다음과 같습니다.

• <div *ngIf="condition">...</div>
• <div template="ngIf condition">...</div>
• <template [ngIf]="condition"><div>...</div></template>

뭔가 감이 오지 않나요? ngFor는 앵귤러(ng) 에서 사용하는 반복문 For이고,

ngIf는 조건문 if입니다.

따라서 10번 라인의 경우에는,

if(selectedPerson) 일 경우에 태그를 활성화한다 라는 내용이 되겠죠.

위에 버튼을 클릭하기 전에는 selectedPerson이 없다가, 클릭하면 있게 되므로 아래 추가 내용이 뜨게 됩니다.

app.component.ts

 
@Component({
  selector: 'my-app',
  
  templateUrl:'/app/view.html',
 
  styles:[`
  .selected {
    background-color: #CFD8DC !important;
    color: white;
  }
  .people {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: 10em;
  }
  .people li {
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0em;
    height: 1.6em;
    border-radius: 4px;
  }
  .people li.selected:hover {
    color: white;
  }
  .people li:hover {
    color: #607D8B;
    background-color: #EEE;
    left: .1em;
  }
  .people .text {
    position: relative;
    top: -3px;
  }
  .people .badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 0.8em 0.7em 0em 0.7em;
    background-color: #607D8B;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -4px;
    height: 1.8em;
    margin-right: .8em;
    border-radius: 4px 0px 0px 4px;
  }
`]
})
 

app.component.ts 의 @component 부분입니다. 아래 style 부분은 정식 홈페이지에서 가져왔습니다.

위에 보면 templateUrl 이 추가된 것을 볼 수 있습니다.

아래 Styles는 css 내용이 들어갑니다.

이것 또한 styles를 styleUrls 로 바꿔서 넣을 수 있습니다.

export class AppComponent {
  public title = 'Dalkom IT World';
  public selectedPerson: Person;
  public people = PERSON;
 
  onSelect(person: Person) { this.selectedPerson = person; }
}

export하는 부분입니다.

4번의 people = PERSON 이다 이부분은

파일 내부의 아래 쪽에 선언된 PERSON 이라는 array를 가져오기 위해 사용되었습니다.

또한 선택된 Person을 보여주기 위한 selectedPerson 도 Person 클래스로 만들어졌네요.

onSelect에 person을 넘기면 selectedPerson이 person으로 바뀝니다.

html 파일에서 사용되는 함수가 여기에 선언이 되어 있습니다.

마지막으로 아래 부분에는 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'
}];

실제 실행 화면

모두 다 했다면 위의 그림처럼 되는 것을 볼 수 있습니다.