introduction to sayan unankard angular 2 (cont) 2… angular2.pdf · introduction to angular 2...
TRANSCRIPT
![Page 1: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/1.jpg)
www . i t s c i .m ju . ac . t h / sayan
INTRODUCTION TO ANGULAR 2 (CONT)
SAYAN UNANKARD2/2559
7
![Page 2: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/2.jpg)
ANGULAR PROJECT EXAMPLE
ตัวอย่างต่อไปนี้เป็นการท างานท่ีมีการโต้ตอบกับ Angular 2 จากผู้ใช้ โดยในตัวอย่างที่แล้ว ได้โหลดข้อมูลนักศึกษามาแสดงผลโดยอัตโนมัติ ถัดไปจะเป็นนการจากสร้าง Master-Details
2
![Page 3: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/3.jpg)
ANGULAR PROJECT EXAMPLE
• สิ่งแรกที่ต้องท าคือการสร้าง Component ส าหรับแสดงผลส่วนที่เป็น Detail โดยที่โฟล์เดอร์ app คลิกขวา new component ตั้งชื่อว่า StudentDetailComponent
3
![Page 4: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/4.jpg)
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() {
}
}
![Page 5: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/5.jpg)
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 ทิศทาง ท้ังในการ
รับค่าและแสดงผล
![Page 6: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/6.jpg)
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; }
}
![Page 7: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/7.jpg)
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>
![Page 8: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/8.jpg)
EXERCISE
8
จงสร้างหน้าจอ ดังต่อไปนี้ด้วย Angular 2
![Page 9: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/9.jpg)
ADD BOOTSTRAP TO PROJECT
ในกรณีที่ต้องการตกแต่งหน้าจอด้วย Bootstrap สามารถท าได้โดยการติดตั้ง Bootstrap ลงใน Angular Project ดังนี้• ที่ Terminal+ พิมพ์ค าสั่ง npm install --save bootstrap
• จากนั้นจะปรากฎโฟล์เดอร์ bootstrap ในโฟล์เดอร์ node_modules
9
![Page 10: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/10.jpg)
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>
![Page 11: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/11.jpg)
<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
![Page 12: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/12.jpg)
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; }
}
![Page 13: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/13.jpg)
จากนั้นท าการ 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
![Page 14: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/14.jpg)
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
![Page 15: INTRODUCTION TO SAYAN UNANKARD ANGULAR 2 (CONT) 2… Angular2.pdf · introduction to angular 2 (cont) sayan unankard 2/2559 7. angular project example ตัวอย่างต่อไปนี้เป็นการท](https://reader034.vdocuments.site/reader034/viewer/2022042308/5ed55524816c257b8b785d62/html5/thumbnails/15.jpg)
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>
...