그림 클릭시 정식 홈페이지로 이동합니다.
저번 시간에 했던 내용을 이어서 할 예정입니다.
파일을 준비해주세요 !
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> | 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
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | @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; } `] }) | cs |
app.component.ts 의 @component 부분입니다. 아래 style 부분은 정식 홈페이지에서 가져왔습니다.
위에 보면 templateUrl 이 추가된 것을 볼 수 있습니다.
아래 Styles는 css 내용이 들어갑니다.
이것 또한 styles를 styleUrls 로 바꿔서 넣을 수 있습니다.
1 2 3 4 5 6 7 | export class AppComponent { public title = 'Dalkom IT World'; public selectedPerson: Person; public people = PERSON; onSelect(person: Person) { this.selectedPerson = person; } } | cs |
export하는 부분입니다.
4번의 people = PERSON 이다 이부분은
파일 내부의 아래 쪽에 선언된 PERSON 이라는 array를 가져오기 위해 사용되었습니다.
또한 선택된 Person을 보여주기 위한 selectedPerson 도 Person 클래스로 만들어졌네요.
onSelect에 person을 넘기면 selectedPerson이 person으로 바뀝니다.
html 파일에서 사용되는 함수가 여기에 선언이 되어 있습니다.
마지막으로 아래 부분에는 PERSON 이 선언되어 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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 |
실제 실행 화면
모두 다 했다면 위의 그림처럼 되는 것을 볼 수 있습니다.