Angular (2) สร้าง Service, ดึงข้อมูลจาก Backend

ในบทความก่อนหน้า เราได้ทำการ สร้าง Component รวมถึง Interface แล้ว ในบทความนี้ผมจะพามาสร้าง Service สำหรับการทำงานต่าง ๆ ในกรณีนี้จะเป็นการดึงข้อมูล JSON จาก Backend API มาแสดง โดยผมจะมี Backend ที่พัฒนาโดยใช้ Express.js ไว้แล้ว Express.js สำหรับทำ JSON API Backend และได้ตั้งค่า Serve JSON มาที่ localhost:3000/api/getPersons เรียบร้อยแล้ว เหลือแต่การนำข้อมูลมาแสดงใน Angular

สร้าง Service

ก่อนแรกเราจะต้องสร้าง Service ก่อนโดยใช้คำสั่ง

ng generate service Persons

เราจะได้ไฟล์ใหม่ที่ชื่อ persons.service.ts เข้ามาอยู่ใน /src/app เมื่อเข้าไปในไฟล์ จะเจอเนื้อหาประมาณนี้

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

@Injectable({
  providedIn: 'root'
})
export class PersonsService {

  constructor() { }
}

ก่อนแรกเราจะต้องรู้ก่อนว่า เราจำเป็นจะต้องส่ง HTTP Request ต่าง ๆ ไปที่ Backend ของเรา ดังนั้นเราจำเป็นจะต้องใช้ Class ที่เรียกว่า HttpClient จาก Module @angular/common/http

เราก็จะ Import Class จาก Module ดังกล่าวมาที่ persons.service.ts ที่พึ่งถูกสร้างขึ้น จากนั้นเราจะเก็บ class HttpClient ไว้ในตัวแปรแบบ private ที่ชื่อ "http" ซึ่งจะถูกนำไปใส่ใน constructor ของ export class PersonsService ดังนี้

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class PersonsService {

  constructor(private http: HttpClient) { }
}

จากนั้นผมจะสร้างฟังก์ชั่นที่ชื่อ getPersons() ขึ้นมา เพื่อใช้ในการดึงข้อมูลจากจาก Backend มาเก็บและ Return ออกจากฟังก์ชั่นนี้ จากข้อมูลที่ผมบอกในย่อหน้าแรก ว่าเราจะดึงข้อมูล JSON มาจาก localhost:3000/api/getPersons ดังนั้นผมก็จะเขียนตามนี้ลงไปใน Parameter แรกของฟังก์ชั่น http.get() ดังนี้

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class PersonsService {

  constructor(private http: HttpClient) { }

  getPersons() {
    return this.http.get("http://localhost:3000/api/getPersons");
  }
}

เพิ่ม provider สำหรับ HttpClient

จากนั้นเราจะไปที่ app.config.ts เพื่อเพิ่มฟังก์ชั่น provideHttpClient() เข้าไป และจะ Import provideHttpClient มาจาก @angular/common/http หากไม่ทำขั้นตอนนี้จะเกิด Error: No provider for HttpClient

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideHttpClient()]
};

การ Inject และเรียกใช้ฟังก์ชั่นจาก Service

จากนั้นให้กลับไปที่ไฟล์ persons-table/persons-table.component.ts ที่เราได้สร้างไว้ในบทความที่แล้ว และเพิ่ม code ด้านล่างนี้เข้าไปใน export class PersonsTableComponent เพื่อ Inject สิ่งที่อยู่ใน class PersonsService ให้มาอยู่ในตัวแปร personsService เพื่อที่เราจะสามารถเรียกฟังก์ชั่น getPersons() ที่เราได้สร้างไว้ในนั้นได้

personsService : PersonsService = inject(PersonsService);

ในการดึงข้อมูล เราจะสร้างฟังก์ชั่น getPersons() ไว้ก่อน ซึ่งข้างในฟังก์ชั่นนี้เราจะเรียกใช้ getPerson() ที่อยู่ใน personsService อีกทีหนึ่ง แบบนี้ this.personsService.getPersons() จากนั้นเราจะใช้ฟังก์ชั่น subscribe เพื่อเก็บข้อมูลที่ตอบกลับมาอยู่ใน callback ที่ชื่อ res แล้วเราจึงจะ Loop ข้อมูลจากใน res ออกมาเก็บไว้ใน this.persons อีกทีหนึ่ง

จากนั้นเราจะเพิ่ม this.getPersons() เข้าไปใน constructor เพื่อให้เรียก getPersons() เมื่อโปรแกรมเริ่มทำงาน โดยไม่ต้องเรียกใช้

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

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

  constructor() {
    this.getPersons()
  }

  getPersons() {
    this.personsService.getPersons().subscribe((res: any) => {
      let items: any[] = res
      items.forEach(item => {
        let data: any = {
          id: item.id,
          name: item.name,
          age: item.age,
        }
        this.persons.push(data)      
      })
    })
  }
}

เพียงเท่านี้เราก็จะสามารถ ดึงข้อมูลจาก Backend ของเรามาแสดงใน Angular ได้แล้ว ในบทความต่อไปเราจะมาทำ Routing ใน Angular สำหรับการเปลี่ยนไปยังหน้าต่าง ๆ รวมถึงการทำ Form สำหรับส่ง Request ไปที่ Backend เพื่อ เพิ่ม แก้ไข ข้อมูลในฐานข้อมูล

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