introduction to sayan unankard angular 2 (cont) 2… angular2.pdf · introduction to angular 2...
TRANSCRIPT
www . i t s c i .m ju . ac . t h / sayan
INTRODUCTION TO ANGULAR 2 (CONT)
SAYAN UNANKARD2/2559
7
ANGULAR PROJECT EXAMPLE
ตัวอย่างต่อไปนี้เป็นการท างานท่ีมีการโต้ตอบกับ Angular 2 จากผู้ใช้ โดยในตัวอย่างที่แล้ว ได้โหลดข้อมูลนักศึกษามาแสดงผลโดยอัตโนมัติ ถัดไปจะเป็นนการจากสร้าง Master-Details
2
ANGULAR PROJECT EXAMPLE
• สิ่งแรกที่ต้องท าคือการสร้าง Component ส าหรับแสดงผลส่วนที่เป็น Detail โดยที่โฟล์เดอร์ app คลิกขวา new component ตั้งชื่อว่า StudentDetailComponent
3
ANGULAR PROJECT EXAMPLE
• เปิดไฟล์ที่ชื่อว่า studentdetail.component.ts ซึ่งจะปรากฎโปรแกรมท่ีเป็น typescript ดังนี้
4
import { Student } from '../model/student';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-studentdetail',
templateUrl: './studentdetail.component.html',
styleUrls: ['./studentdetail.component.css']
})
export class StudentdetailComponent implements OnInit {
@Input()
student: Student;
constructor() { }
ngOnInit() {
}
}
ANGULAR PROJECT EXAMPLE
• เปิดไฟล์ที่ชื่อว่า studentdetail.component.html ส าหรับจัดรูปแบบการแสดงผลหน้าเว็บ
• *ngIf เป็นค าสั่งที่ตรวจสอบว่าค่า value ของตัวแปรนั้น ๆ โดยจะท างานก็ต่อเมื่อไม่เป็นค่าว่าง5
<div *ngIf="student">
<h2>{{student.stuname}} details</h2>
<table>
<tr>
<td><label>ID: </label></td>
<td>{{student.stuid}}</td>
</tr>
<tr>
<td><label>Name: </label></td>
<td><input [(ngModel)]="student.stuname" placeholder="stuname" /></td>
</tr>
<tr>
<td><label>Email: </label></td>
<td><input [(ngModel)]="student.email" placeholder="email" /></td>
</tr>
</table>
</div>
ngModel เป็นการพัฒนารูปแบบการ binding 2 ทิศทาง ท้ังในการ
รับค่าและแสดงผล
ANGULAR PROJECT EXAMPLE
• จากนั้นก าหนดค าสั่งในกรณีที่เลือกแถวใด ๆ จากตารางนักศึกษา ให้แสดงผลข้อมูลของนักศึกษาที่เลือกในส่วนของ details
• เปิดไฟล์ที่ชื่อว่า liststudent.component.ts อีกครั้ง เพื่อสร้างเมธอด onSelect()
6
import { Student } from '../model/student';
import { StudentService } from '../model/student.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-liststudent',
templateUrl: './liststudent.component.html',
styleUrls: ['./liststudent.component.css'],
providers: [StudentService]
})
export class ListstudentComponent implements OnInit {
private students;
selectedStudent: Student;
onSelect(student: Student) { this.selectedStudent = student; }
}
ANGULAR PROJECT EXAMPLE
• เปิดไฟล์ที่ชื่อว่า liststudent.component.html เพิ่มส่วนของ detail แสดงผลหน้าเว็บ และเพิ่มส่วนของ onSelect() ในกรณีที่คลิกเลือกแถวในตารางที่ต้องการ
• [class.selected] ใช้ส าหรับให้พื้นหลังของแถวที่เลือกเปลี่ยนสี
7
<table class="tftable">
<tr><th>ID</th><th>Name</th><th>Email</th>
<tr *ngFor="let student of students" (click)="onSelect(student)"
[class.selected]="student === selectedStudent">
<td>{{student.stuid}}</td>
<td>{{student.stuname}}</td>
<td>{{student.email}}</td>
</tr>
</table>
<app-studentdetail [student]="selectedStudent">
</app-studentdetail>
EXERCISE
8
จงสร้างหน้าจอ ดังต่อไปนี้ด้วย Angular 2
ADD BOOTSTRAP TO PROJECT
ในกรณีที่ต้องการตกแต่งหน้าจอด้วย Bootstrap สามารถท าได้โดยการติดตั้ง Bootstrap ลงใน Angular Project ดังนี้• ที่ Terminal+ พิมพ์ค าสั่ง npm install --save bootstrap
• จากนั้นจะปรากฎโฟล์เดอร์ bootstrap ในโฟล์เดอร์ node_modules
9
ADD BOOTSTRAP TO PROJECT
ที่ index.html ให้เพิ่ม link ส าหรับอ้างอิงไปยังไฟล์ bootstrap ดังนี้
10
<html>
<head>
<meta charset="utf-8">
<title>Angular2Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
Example of Angular 2 in Eclipse
<app-root>Loading...</app-root>
</body>
</html>
<table class="tftable">
<tr><th>ID</th><th>Name</th><th>Email</th>
<tr *ngFor="let student of students" (click)="onSelect(student)"
[class.selected]="student === selectedStudent">
<td>{{student.stuid}}</td>
<td>{{student.stuname}}</td>
<td>{{student.email}}</td>
</tr>
</table>
<button class="btn btn-primary">Add Student</button>
<app-studentdetail [student]="selectedStudent">
</app-studentdetail>
การเรียกใช้งานสามารถเรียกใช้ในไฟล์ html ของแต่ละ component ย่อย ภายใน root component ในหน้า index ได้ทันที เช่น ในหน้า liststudent.component.html
ADD BOOTSTRAP TO PROJECT
11
PROPERTY BINDING
การก าหนด property ของ html สามารถก าหนดค่าผ่านคลาส .ts ได้เช่นกัน โดยใช้สัญลักษณ์ [property] = "value" เช่น ที่ไฟล์ liststudent.component.ts เพิ่มตัวแปรที่ชื่อว่า disable_addstudent โดยก าหนดค่าเป็น true/false
12
import { Student } from '../model/student';
import { StudentService } from '../model/student.service';
import { Component, OnInit } from '@angular/core';
...
export class ListstudentComponent implements OnInit {
private students;
selectedStudent: Student;
disable_addstudent = false;
onSelect(student: Student) { this.selectedStudent = student; }
}
จากนั้นท าการ binding การก าหนด property ของ html ให้มีค่าเปลี่ยนแปลงตามตัวแปร disable_addstudent
<table class="tftable">
<tr><th>ID</th><th>Name</th><th>Email</th>
<tr *ngFor="let student of students" (click)="onSelect(student)"
[class.selected]="student === selectedStudent">
<td>{{student.stuid}}</td>
<td>{{student.stuname}}</td>
<td>{{student.email}}</td>
</tr>
</table>
<button class="btn btn-primary" [disabled]="disable_addstudent">
Add Student</button>
<app-studentdetail [student]="selectedStudent">
</app-studentdetail>
PROPERTY BINDING
13
EVENT BINDING
ในกรณีที่ต้องการเรียกใช้ Event ต่าง ๆ สามารถก าหนดรูปแบบ (event) = "method()" โดยระบุใน property ของเครื่องมือต่าง ๆ บนหน้า html เช่น ต้องการเรียกใช้ onCreateStudent() กรณีที่มีการกดปุ่ม Add Student
จากนั้นเพิ่ม method onCreateStudent() ที่ไฟล์ liststudent.component.ts
14
<button class="btn btn-primary" [disabled]="disable_addstudent">
(click)="onCreateStudent()"> Add Student</button>
onCreateStudent(){
this.students.push(new Student(this.students.length+50001,"",""));
}
export class Student {
...
constructor(sid,sname,email){
this.stuid = sid;
this.stuname = sname;
this.email = email;
}
}
เพิ่ม Constructor ในคลาส Student
GETTING THE INDEX WHEN USING ngFor
หากต้องการแสดงล าดับที่ (index) ของข้อมูลในตาราง สามารถใช้ค าสั่ง let i = index เพิ่มเข้าไปในค าสั่ง *ngFor ได้ดังนี้
15
<table class="tftable">
<tr><th>No</th><th>ID</th><th>Name</th><th>Email</th>
<tr *ngFor="let student of students; let i = index"
(click)="onSelect(student)"
[class.selected]="student === selectedStudent">
<td>{{i+1}}</td>
<td>{{student.stuid}}</td>
<td>{{student.stuname}}</td>
<td>{{student.email}}</td>
</tr>
</table>
...