Angular (1) สร้างและจัดการ Component

Angular คืออะไร?

Angular เป็น Frontend Framework พัฒนาโดย Angular Team จากบริษัท Google ที่ใช้ TypeScript เป็นหลัก ทำงานอยู่ใน JavaScript runtime environment อย่าง Node.js

ตัว Angular ถูกออกแบบมาเพื่อให้เป็น Single-Page Application Framework หมายถึงเป็นระบบเว็บที่สามารถทำงานต่างๆ ได้ในหนึ่งหน้า โดยไม่เปลี่ยนหน้า  (redirect) ไปมา อาศัยหลักการที่ Angular จะแบ่งส่วนต่างๆ ออกเป็นสิ่งที่เรียกว่า "Component"

หนึ่งในเหตุผลที่นักพัฒนาจำเป็นจะต้องใช้ Framework ก็คือ เพื่อให้มีโครงสร้างที่เป็นสากล สามารถส่งต่อ project ไปให้ผู้อื่น หรือใช้ทำงานร่วมกับผู้อื่นได้ง่ายขึ้น โดยที่คนในทีมเขียนโครงสร้างไปในทางเดียวกัน

การติดตั้ง Angular

เครื่องที่จะติดตั้งจำเป็นจะต้องมี Node.js และต้องอาศัย Node Packet Manager (NPM) ในการติดตั้ง โดยใช้คำสั่งดังนี้

npm i -g @angular/cli

เมื่อติดตั้งเสร็จเรียบร้อยแล้ว สามารถใช้คำสั่ง ng ในการสร้างและจัดการ Project ได้เลย

สร้าง Project

เราสามารถสร้าง Project ได้ โดยใช้คำสั่ง

ng new test-app

และสั่งให้เริ่มทำงาน โดยใช้คำสั่ง

ng serve

Component

Component แรกที่ Angular จะสร้างมาให้เราอัตโนมัติ ก็คือ App Component (app.component) อยู่ในโฟล์เดอร์ /src/app/* ซึ่งจะถูก import เข้ามาในใช้ใน element ที่ชื่อ app-root ในไฟล์ /src/index.html

สร้าง Component

สมมุติว่า ผมจะสร้าง person-table component ขึ้นมา

ng generate component persons-table

Angular ก็จะสร้างโฟล์เดอร์ที่ชื่อ persons-table อยู่ใน /src/app ขึ้นมา โดยจะประกอบไปด้วยไฟล์ 4 ไฟล์ โดยไฟล์หลักที่เราจะใช้ในการเขียนสิ่งต่างๆ เข้าไป ก็คือไฟล์ persons-table.component.ts เมื่อเข้าไปข้างในจะพอว่ามีโครงสร้างดังนี้

import { Component } from '@angular/core';

@Component({
  selector: 'app-persons-table',
  standalone: true,
  imports: [],
  templateUrl: './persons-table.component.html',
  styleUrl: './persons-table.component.css'
})
export class PersonsTableComponent {

}

อธิบายแบบเข้าใจง่ายๆ คือ จะมี Class ที่ชื่อ PersonsTableComponent Export ออกมาจากไฟล์นี้ ส่วนที่เป็น @Component คือส่วนที่ใช้จัดการ Component เช่น

templateUrl จะหมายถึงไฟล์ HTML ปลายทางที่จะแสดง

styleUrl หมายถึงไฟล์ CSS ใช้งานร่วมกันกับ template

ส่วน selector ซึ่งมีค่าเป็น app-persons-table จะคือชื่อของ element นั้นๆ ซึ่งเราจะต้องเอาไปใส่ในส่วนที่เราต้องการให้ Component นี้แสดง เช่น ผมต้องการจะนำไปอยู่ใน app.component ผมก็จะไปที่ไฟล์ app.component.ts และ import เข้ามาดังนี้ โดยชื่อจะต้องตรงกับ class ที่ export ออกมา จากไฟล์ persons-table.component.ts ซึ่งก็คือ PersonsTableComponent

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PersonsTableComponent } from './persons-table/persons-table.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'test-app';
}

เมื่อ Import แล้ว ให้เราไปอยู่ที่ attribute "imports" ใน @Component ของ app.component และให้เพิ่ม class PersonsTableComponent ลงไปใน array ด้วย ดังนี้

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PersonsTableComponent } from './persons-table/persons-table.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,PersonsTableComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'text-app';
}

ในไฟล์ app.component.html เราถึงจะสามารถนำ element "app-person-table" ของ component มาแสดงได้แบบนี้

<div> 
    <h1>Table of Persons</h1> 
    <app-persons-table></app-persons-table> 
</div>
 

การสร้าง Object และ Loop มาแสดงผล

กรณีที่เรา Fetch ข้อมูลมาจาก Backend ก็จะได้ Array ของ Objects ต่างๆ มาเป็น หลายๆชุด ในบทความนี้เราจะยังไม่ Fetch ข้อมูลออกมาจาก Backend แต่จะเป็นการสร้าง Array ของ Objects ไว้ จำลองว่าเป็นข้อมูลจาก backend เราจะมีวิธีการ For Loop ดังนี้

ก่อนแรกเราจะต้องมีโครงสร้างข้อมูลของเราก่อน ว่าจะให้มี Attributes อะไรบ้าง โดยการที่เราจะกำหนดโครงสร้างแบบนี้ คือ เราต้องสร้างสิ่งที่เรียกว่า "Interface" เพื่อเก็บโครงสร้างของข้อมูลไว้แบบเป็น Class โดยใช้คำสั่งดังนี้ กรณีนี้ผมจะสร้าง Interface ที่ชื่อ "Persons"

ng generate interface Persons

เมื่อสร้างแล้วจะเกิดเป็นไฟล์ persons.ts ขึ้นมา ใน /src/app โดยข้างในไฟล์ ผมจะกำหนดโครงสร้างไว้ดังนี้

export interface Persons {
    id: number,
    name: string,
    age: number
}

จากนั้นไปที่ไฟล์ persons-table.component.ts ผมก็จะ import ไฟล์ Interface ที่พึ่งสร้างเข้ามา เราจึงจะสามารถสร้าง Object ใหม่ได้ จากโครงสร้างที่เรากำหนด

ในการที่เราจะ Loop จะต้องใช้ attribute ที่ชื่อ "ngFor" ซึ่งอยู่ใน CommonModule จาก @angular/common เราก็จะ import มันเข้ามา และใส่มันเข้าไปใน attribute "imports" ใน @Component

import { Component } from '@angular/core';
import { Persons } from '../persons';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-persons-table',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './persons-table.component.html',
  styleUrl: './persons-table.component.css'
})
export class PersonsTableComponent {
  persons : Persons[] = [{
    id: 1,
    name: "Joe",
    age: 25,
  }]
}

จากนั้นผมก็เพิ่ม Objects "persons" ซึ่งอ้างอิงโครงสร้างจาก Class "Persons" เข้ามาในส่วน export class และผมก็เพิ่มข้อมูลตัวแรกของ "Joe" เข้าไป

ในไฟล์ persons-table.component.html ผมก็จะสร้างตาราง และในส่วนของ tr ก็จะใส่ ngFor เข้าไป โดยจะลูปจาก Array "persons" ซึ่ง export มาจาก PersonsTableComponent มาเก็บไว้ในตัวแปลชั่วคราวคือ "person" โดยในแต่ละรอบของการ Loop เราจะเข้าถึง Attributes ต่างๆ เช่น id, name และ age ได้จากตัวแปรนี้

<table>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr *ngFor="let person of persons">
        <td>{{person.id}}</td>
        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
    </tr>
</table>

ในบทความแรกก็จะแนะนำเพียงเท่านี้ก่อน ในบทความหน้าเราจะมา สร้าง Service และรับข้อมูลจาก Backend มาแสดงกันครับ

อ้างอิง:
angular.io/docs