Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
www . i t s c i .m ju . ac . t h / sayan
INTRODUCTION TO ANGULAR 4
SAYAN UNANKARD1/2560
1
WEB APPLICATION
ความท้าทายในการพัฒนาเว็บแอปพลิเคชันกับเทคโนโลยีแบบดั้งเดิม
2
requests
responses
(DOM)
การรอ้งขอหลายครั้ง
จากผูใ้ชแ้ต่ละคน
servers
DOCUMENT OBJECT MODEL (DOM)
3
WEB APPLICATION
ความท้าทายในการพัฒนาเว็บแอปพลิเคชันกับเทคโนโลยีแบบดั้งเดิม
4
requests
responses
(DOM)
การรอ้งขอหลายครั้ง
จากผูใ้ชแ้ต่ละคน
servers
ปัญหาคอขวด server ประมวลผลทุกๆ การร้องขอ
มาจาก client
การพัฒนาเว็บในปัจจุบันพยายามจะลดการท างานฝั่ง Server ลงเพื่อไม่ให้เกิดปัญหาคอขวดขึ้น
EVOLUTION OF WEB DEVELOPMENT
5
requests
responses
servers
ประมวลผลบนเบราเซอร์Client side scripting
Client side processing
server ประมวลผลน้อยลง
เพิ่มการประมวลผลฝั่ง client
ปัญหาของ JQUERY
• Jquery เป็นการพัฒนาโปรแกรมที่ไม่มีโครงสร้างที่แท้จริง ที่เป็น Framework
• Jquery อนุญาตให้นักพัฒนาโปรแกรมเขียนอย่างไรก็ได้ ท าให้คนที่มาพัฒนาต่อท างานได้ยาก และ เกิดปัญหาในโปรเจ็คใหญ่ ๆ
6
WHAT IS ANGULARJS
• AngularJS เป็น Single Page Application Framework
• ที่ประกอบด้วยฟังก์ชัน ไลบราร่ี และ สถาปัตยกรรม ในการพัฒนาแอปพลิเคชัน
• พัฒนาขึ้นเมื่อปี 2009 ที่ Brat Tech LLC.
• สนับสนุนโดย Google
7
Misko Hevery and Adam Abrons
SINGLE PAGE APPLICATIONS (SPAs)
Single-Page Applications (SPAs) คือเว็บแอปพลิเคชันที่โหลดข้อมูลเพียงหน้าเดียว (single HTML page) และ อัพเดทโดยอัติโนมัติเมื่อมีผู้ใช้ติดต่อกับเว็บแอปพลิเคชัน• หน้าเว็บทั้งหมดจะไม่มีการโหลดทุก ๆ ครั้ง
• เบราเซอร์จะมีการจัดการ DOM ทั้งหน้าเว็บเพียงครั้งเดียว
• เมื่อมีผู้ใช้ท างานกับเว็บ จะท าการติดต่อกับเซิร์ฟเวอร์เป็นส่วน ๆ ไป
8
Navigation bar { }
Details { }Side bar { }
WHAT IS ANGULAR4
• เป็น open source JavaScript framework ในการสร้าง web applications ในรูปแบบHTML และ JavaScript โดยถูกสร้างขึ้นมาสนับสนุนการท างานบนมือถือเป็นรายแรก
• Angular4 เป็น updated version ของ Angular2
• Angular2 เป็น updated version ของ AngularJS
• Angular 4 และ TypeScript พัฒนาให้มีความสามารถโดยการน าหลักการ object oriented web development มาใช้ได้อย่างแท้จริง โดยรูปแบบการเขียนจะคล้ายคลึงกับ Java 8
9
ARCHITECTURE OF ANGULAR 2 APP
Components Directives
Routers Services
10
COMPONENTS
ใช้ส าหรับจัดการ Template, ข้อมูล และ พฤติกรรมของ view
11
{ }
Sidebar
Details
Navigation bar
{ }
{ }
{ }
COMPONENTS
ในแต่ละ component สามารถประกอบด้วย components ย่อย ๆ ได้
12
{ }
Sidebar
Navigation bar
{ }
{ }
detail 1{ }
detail 2{ }
detail 3{ }
{ } rating
COMPONENTS
export class RatingComponent {
avgRating: number;
numRating: number;
setRating(value) {
}
…
}
13
App
DetailsNavbar Sidebar
detail
rating
ตัวอย่าง TypeScript ในการสร้าง Component
COMPONENTS
ในการจัดการ component ใน Angular 2 จะใช้เทคนิคการ binding ระหว่าง DOM กับ Component attributes และ methods เช่น
14
{ } DOMbinding
<h1>Hello</h1>
onClick() {
}
title = "Hello"
SERVICES
ในกรณีที่ต้องการติดต่อกับ Backend API จะใช้ Services เป็นตัวกลางในการติดต่อ
15
{ }
Service
Data access
Logging
Business Logic
Configuration
ROUTERS
16
ใช้ส าหรับจัดการ Navigations เพื่อตรวจสอบว่า component ใดก าลัง active ท างานกับผู้ใช้อยู่
Sidebar
Details
Navigation bar
DIRECTIVES
เช่น การขยาย Textbox อัตโนมัติ เมื่อมีการใช้งาน Textbox นั้น ๆ อยู่<input type=“text” name=“search” autoGrow />
17
ใช้ส าหรับจัดการ DOM Elements และ จัดการพฤติกรรมต่าง ๆ ของ DOMD
TOOLS AND PREREQUISITES
• ติดต้ัง Angular IDE ซึ่งจะดาวน์โหลดจากเว็บไซต์นี้https://www.genuitec.com/products/angular-ide/
• ติดต้ัง Node.js (https://nodejs.org/en/download/)
เมื่อติดตั้ง node js แล้วให้เปิด node.js command prompt เพื่อ install npm ดังนี้
c:\>npm install npm -g
18
CREATE ANGULAR PROJECT
19
ANGULAR PROJECT
Project ของ Angular จะประกอบไปด้วยหลาย ๆ ส่วนดังนี้• Folder node_modules ซึ่งจะเก็บ dependencies
ที่ใช้งานต่าง ๆ ใน node js
• package.json ใช้ส าหรับประกาศ dependencies ที่ต้องการใช้งานใน project นั้น ๆ
• tsconfig.json ส าหรับก าหนด typescript compiler เพื่อแปลง Typescript เป็น JavaScript
• src->app เป็นโฟล์เดอร์ที่ใช้ส าหรับพัฒนาแอฟพลิเคชันหลัก
20
ANGULAR PROJECT EXAMPLE
• เริ่มต้นสร้าง package model ในโฟล์เดอร์ app จากนั้น new file ตั้งชื่อว่า student.ts
• ที่โฟล์เดอร์ app คลิกขวา new component ตั้งชื่อว่า
liststudent
21
export class Student {
stuid;
stuname;
email;
}
ANGULAR PROJECT EXAMPLE
• เปิดไฟล์ที่ชื่อว่า liststudent.component.ts ซึ่งจะปรากฎโปรแกรมท่ีเป็น typescript ดังนี้
22
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-liststudent',
templateUrl: './liststudent.component.html',
styleUrls: ['./liststudent.component.css']
})
export class ListstudentComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import Componentdecorator function ซึ่งเป็น function ส าหรับ Angular reusable UI
component
Tag name ส าหรบั
การแสดงผลเม่ือมีการ
เปล่ียนแปลง
ก าหนดรูปแบบ
template และ style
ของ component
ANGULAR PROJECT EXAMPLE
• ที่โฟล์เดอร์ model คลิกขวา สร้าง new service ตั้งชื่อว่า studentService จากนั้นจะปรากฎไฟล์ 2 ไฟล์ ดังนี้ student.service.ts และ student.service.spec.ts
• เปิดไฟล์ student.service.ts ประกาศค่าคงที่ของข้อมูลและ methods
23
import { Injectable } from '@angular/core';
let listStudents = [
{ stuid: '50001',
stuname: 'Sayan Unankard',
email: '[email protected]'
},
{ stuid: '50002',
stuname: 'Somchai Jaidee',
email: '[email protected]'
},
{ stuid: '50003',
stuname: 'Somsri Jaipak',
email: '[email protected]'
}
];
ANGULAR PROJECT EXAMPLE
• เปิดไฟล์ student.service.ts ประกาศค่าคงที่ของข้อมูลและ methods (ต่อ)
24
@Injectable()
export class StudentService {
private students;
constructor() {
this.students = listStudents;
}
getStudents() {
return this.students;
}
}
ANGULAR PROJECT EXAMPLE
• เปิดไฟล์ที่ชื่อว่า liststudent.component.ts อีกครั้ง หลังจากนั้นก าหนดให้เรียกใช้งานแสดงข้อมูลนักศึกษาออกมาแสดงผล
25
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;
constructor(private studentService: StudentService) {
this.students = this.studentService.getStudents();
}
ngOnInit() {
}
}
ANGULAR PROJECT EXAMPLE
• เปิดไฟล์ที่ชื่อว่า liststudent.component.html ส าหรับจัดรูปแบบการแสดงผลหน้าเว็บ
• *ngFor เป็นค าสั่ง loop ในการแสดงผลข้อมูลนักศึกษา โดยหมุน loop แสดงข้อมูลใน students ไปเก็บไว้ในตัวแปร student ทีละคนในแต่ละรอบ
26
<table class="tftable">
<tr><th>ID</th><th>Name</th><th>Email</th>
<tr *ngFor="let student of students">
<td>{{student.stuid}}</td>
<td>{{student.stuname}}</td>
<td>{{student.email}}</td>
</tr>
</table>
ANGULAR PROJECT EXAMPLE
• เปิดไฟล์ที่ชื่อว่า liststudent.component.css ส าหรับจัดรูปแบบ css ของตาราง
27
table.tftable {color:#333333;border-width: 1px;border-color:
#a9a9a9;border-collapse: collapse;}
table.tftable th {background-color:#b8b8b8;border-width:
1px;padding: 8px;border-style: solid;border-color: #a9a9a9;text-
align:left;}
table.tftable tr {background-color:#ffffff;}
table.tftable td {border-width: 1px;padding: 8px;border-style:
solid;border-color: #a9a9a9;}
table.tftable tr:hover {background-color: #DDD; left: .1em;}
.selected { background-color: #CFD8DC !important;}
ANGULAR PROJECT EXAMPLE
• เปิดไฟล์ที่ชื่อว่า app.component.html ส าหรับน าข้อมูลตารางนักศึกษาไปแสดงผลหน้าเว็บ
28
<h1>
{{title}}
</h1>
<app-liststudent></app-liststudent>