28
www.itsci.mju.ac.th/sayan INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD 1/2560 1

INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

Page 1: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

www . i t s c i .m ju . ac . t h / sayan

INTRODUCTION TO ANGULAR 4

SAYAN UNANKARD1/2560

1

Page 2: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

WEB APPLICATION

ความท้าทายในการพัฒนาเว็บแอปพลิเคชันกับเทคโนโลยีแบบดั้งเดิม

2

requests

responses

(DOM)

การรอ้งขอหลายครั้ง

จากผูใ้ชแ้ต่ละคน

servers

Page 3: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

DOCUMENT OBJECT MODEL (DOM)

3

Page 4: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

WEB APPLICATION

ความท้าทายในการพัฒนาเว็บแอปพลิเคชันกับเทคโนโลยีแบบดั้งเดิม

4

requests

responses

(DOM)

การรอ้งขอหลายครั้ง

จากผูใ้ชแ้ต่ละคน

servers

ปัญหาคอขวด server ประมวลผลทุกๆ การร้องขอ

มาจาก client

Page 5: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

การพัฒนาเว็บในปัจจุบันพยายามจะลดการท างานฝั่ง Server ลงเพื่อไม่ให้เกิดปัญหาคอขวดขึ้น

EVOLUTION OF WEB DEVELOPMENT

5

requests

responses

servers

ประมวลผลบนเบราเซอร์Client side scripting

Client side processing

server ประมวลผลน้อยลง

เพิ่มการประมวลผลฝั่ง client

Page 6: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

ปัญหาของ JQUERY

• Jquery เป็นการพัฒนาโปรแกรมที่ไม่มีโครงสร้างที่แท้จริง ที่เป็น Framework

• Jquery อนุญาตให้นักพัฒนาโปรแกรมเขียนอย่างไรก็ได้ ท าให้คนที่มาพัฒนาต่อท างานได้ยาก และ เกิดปัญหาในโปรเจ็คใหญ่ ๆ

6

Page 7: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

WHAT IS ANGULARJS

• AngularJS เป็น Single Page Application Framework

• ที่ประกอบด้วยฟังก์ชัน ไลบราร่ี และ สถาปัตยกรรม ในการพัฒนาแอปพลิเคชัน

• พัฒนาขึ้นเมื่อปี 2009 ที่ Brat Tech LLC.

• สนับสนุนโดย Google

7

Misko Hevery and Adam Abrons

Page 8: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

SINGLE PAGE APPLICATIONS (SPAs)

Single-Page Applications (SPAs) คือเว็บแอปพลิเคชันที่โหลดข้อมูลเพียงหน้าเดียว (single HTML page) และ อัพเดทโดยอัติโนมัติเมื่อมีผู้ใช้ติดต่อกับเว็บแอปพลิเคชัน• หน้าเว็บทั้งหมดจะไม่มีการโหลดทุก ๆ ครั้ง

• เบราเซอร์จะมีการจัดการ DOM ทั้งหน้าเว็บเพียงครั้งเดียว

• เมื่อมีผู้ใช้ท างานกับเว็บ จะท าการติดต่อกับเซิร์ฟเวอร์เป็นส่วน ๆ ไป

8

Navigation bar { }

Details { }Side bar { }

Page 9: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

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

Page 10: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

ARCHITECTURE OF ANGULAR 2 APP

Components Directives

Routers Services

10

Page 11: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

COMPONENTS

ใช้ส าหรับจัดการ Template, ข้อมูล และ พฤติกรรมของ view

11

{ }

Sidebar

Details

Navigation bar

{ }

{ }

{ }

Page 12: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

COMPONENTS

ในแต่ละ component สามารถประกอบด้วย components ย่อย ๆ ได้

12

{ }

Sidebar

Navigation bar

{ }

{ }

detail 1{ }

detail 2{ }

detail 3{ }

{ } rating

Page 13: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

COMPONENTS

export class RatingComponent {

avgRating: number;

numRating: number;

setRating(value) {

}

}

13

App

DetailsNavbar Sidebar

detail

rating

ตัวอย่าง TypeScript ในการสร้าง Component

Page 14: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

COMPONENTS

ในการจัดการ component ใน Angular 2 จะใช้เทคนิคการ binding ระหว่าง DOM กับ Component attributes และ methods เช่น

14

{ } DOMbinding

<h1>Hello</h1>

onClick() {

}

title = "Hello"

Page 15: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

SERVICES

ในกรณีที่ต้องการติดต่อกับ Backend API จะใช้ Services เป็นตัวกลางในการติดต่อ

15

{ }

Service

Data access

Logging

Business Logic

Configuration

Page 16: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

ROUTERS

16

ใช้ส าหรับจัดการ Navigations เพื่อตรวจสอบว่า component ใดก าลัง active ท างานกับผู้ใช้อยู่

Sidebar

Details

Navigation bar

Page 17: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

DIRECTIVES

เช่น การขยาย Textbox อัตโนมัติ เมื่อมีการใช้งาน Textbox นั้น ๆ อยู่<input type=“text” name=“search” autoGrow />

17

ใช้ส าหรับจัดการ DOM Elements และ จัดการพฤติกรรมต่าง ๆ ของ DOMD

Page 18: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

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

Page 19: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

CREATE ANGULAR PROJECT

19

Page 20: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

ANGULAR PROJECT

Project ของ Angular จะประกอบไปด้วยหลาย ๆ ส่วนดังนี้• Folder node_modules ซึ่งจะเก็บ dependencies

ที่ใช้งานต่าง ๆ ใน node js

• package.json ใช้ส าหรับประกาศ dependencies ที่ต้องการใช้งานใน project นั้น ๆ

• tsconfig.json ส าหรับก าหนด typescript compiler เพื่อแปลง Typescript เป็น JavaScript

• src->app เป็นโฟล์เดอร์ที่ใช้ส าหรับพัฒนาแอฟพลิเคชันหลัก

20

Page 21: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

ANGULAR PROJECT EXAMPLE

• เริ่มต้นสร้าง package model ในโฟล์เดอร์ app จากนั้น new file ตั้งชื่อว่า student.ts

• ที่โฟล์เดอร์ app คลิกขวา new component ตั้งชื่อว่า

liststudent

21

export class Student {

stuid;

stuname;

email;

}

Page 22: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

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

Page 23: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

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]'

}

];

Page 24: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

ANGULAR PROJECT EXAMPLE

• เปิดไฟล์ student.service.ts ประกาศค่าคงที่ของข้อมูลและ methods (ต่อ)

24

@Injectable()

export class StudentService {

private students;

constructor() {

this.students = listStudents;

}

getStudents() {

return this.students;

}

}

Page 25: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

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() {

}

}

Page 26: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

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>

Page 27: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

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;}

Page 28: INTRODUCTION TO SAYAN UNANKARD ANGULAR 4 1/2560 1 · INTRODUCTION TO ANGULAR 4 SAYAN UNANKARD ... ที่ไม่มีโครงสร้างที่แท้จริง

ANGULAR PROJECT EXAMPLE

• เปิดไฟล์ที่ชื่อว่า app.component.html ส าหรับน าข้อมูลตารางนักศึกษาไปแสดงผลหน้าเว็บ

28

<h1>

{{title}}

</h1>

<app-liststudent></app-liststudent>