รู้จัก Dependency injection หรือการนำเข้า services ใน Angular

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
service angular dependency injection

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ service angular dependency injection

ดูแล้ว 8,075 ครั้ง




ก่อนลงรายละเอียดต่อไป จะขอใช้คำย่อว่า DI แทน dependency injection หรือที่
เรียกว่า การนำเข้า service class ใน Angular App ซึ่งเป็นสิ่งที่มีความสำคัญมาก
ในการออกแบบ App ของเรา
    DI คือรูปแบบการเขียนโค้ดที่รับเอา service class จากภายนอกเข้ามาใช้งานใน class
แทนที่จะสร้างขึ้นมาเอง
 
เรามาเริ่มศึกษาโดยต่อยอดจากบทความที่ผ่านมา 
 
(ทบทวนบทความได้ที่)
การส่งค่าข้อมูลจาก Form ใน Angular app เบื้องต้น 
 
ให้เราสร้างไฟล์ชื่อ staff-list.component.html เป็นไฟล์ html template สำหรับ
แสดงรายชื่อ staff ดังนี้
 

ไฟล์ staff-list.component.html



 
 
<br>
<div class="container">
<table class="table table-condensed">
    <tr class="active">
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Department</th>
    </tr>
    <tr *ngFor="let staff of staffs">
        <td>{{staff.id}}</td>
        <td>{{staff.name}}</td>
        <td>{{staff.age}}</td>
        <td>{{staff.department}}</td>     
    </tr>
</table>
</div>
 
 
จากนั้นให้สร้างไฟล์ชื่อ mock-staffs.ts เป็นไฟล์สำหรับจำลองข้อมูล staff
 

ไฟล์ mock-staffs.ts

 

 
 
import { Staff } from './staff'

export var STAFFS:Staff[] = [
    {id:1,name:'John Smoke',department:'IT Support',age:27},
    {id:2,name:'Linda Pink',department:'Accounting',age:30},
    {id:3,name:'Lisa Mour',department:'Marketing',age:33} 
];
 
สังเกตว่าไฟล์นี้มีการ import class ชื่อ Staff ซึ่งเป็น Object class ที่กำหนด
คุณสมบัติหรือรูปแบบ property ของ Staff Object ด้านใน เช่น id,name,age และ department
    ไฟล์ mock-staffs.ts นี้จะทำการจำลองรายชื่อของ staff ไว้ในตัวแปรที่ชื่อ 
STAFFS ซึ่งมี type หรือประเภทตัวแปรเป็น Array ของ Staff Object ตามรูปแบบ
 
var STAFFS:Staff[] = [{},{},{}];
 
และส่งออกค่าตัวแปรนี้ด้วยคำสั่ง export
 
 
ต่อไปให้เราสร้างไฟล์ชื่อ staff-list.component.ts สำหรับทำคำสั่งต่างๆ ในการนำข้อมูล 
staff จากไฟล์จำลองช้อมูล mock-staffs.ts มาแสดงในไฟล์ template ที่เราสร้างไว้ก่อนหน้า
 

ไฟล์ staff-list.component.ts

 

 
 
import { Component } from '@angular/core'

import { STAFFS } from './mock-staffs'

@Component({
  moduleId: module.id,    
  selector: 'staff-list',
  templateUrl: `./staff-list.component.html`,
})
export class StaffListComponent {
    staffs = STAFFS;
}
 
จะเห็นว่ามีการ import ตัวแปรข้อมูล staff จากไฟล์จำลองข้อมูลมาใช้งาน โดยเราได้นำค่า
ตัวแปร STAFFS มากำหนดค่าให้กับ property ของ StaffListComponent ที่ชื่อ staffs
 
staffs = STAFFS;
 
รวมถึงมีการใช้งาน templateUrl เพื่อใช้งาน template จากไฟล์ staff-list.component.html
ให้ไปแสดงในส่วน selector ที่ชื่อ staff-list ซึ่งเราจะไปกำหนดแท็ก <staff-list> ในไฟล์
app.component.ts เพื่อใช้งาน
 
ให้เราเปิดไฟล์ app.component.ts และแก้ไขส่วนของ template โดยให้เปลี่ยนเป็นแท็ก 
<staff-list> ตาม selector ของ class ที่เราจะนำมาแสดง
 

ไฟล์ app.component.ts




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

@Component({
  selector: 'my-app',
  template: `<staff-list></staff-list>`,
})
export class AppComponent  { 

}
 
และส่วนสุดท้ายอีกไฟล์ที่เราต้องจำไว้เสมอว่า เมื่อมีการสร้าง Component class ใหม่
ขึ้นมาใช้งาน เราจะต้องทำการ import class นั้นๆ พร้อมทั้งกำหนดค่าเพิ่มเข้าไปใน
declarations metadata ของ NgModule ในไฟล์ app.module.ts เสมอ ทุกครั้ง
 

ไฟล์ app.module.ts

 
 
 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';
import { UserComponent }  from './components/user.component';
import { StaffFormComponent }  from './components/staff-form.component';
import { StaffListComponent }  from './components/staff-list.component'

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ 
    AppComponent, 
    UserComponent, 
    StaffFormComponent,
    StaffListComponent 
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

 
 
 

ที่นี้เรามาดูผลลัพธ์ที่ได้ เมื่อเราทำการรัน App จะได้เป็นดังนี้

 

 
 
การทำงานของโปรแกรมที่ได้ผลลัพธ์ดังรูปคือ StaffListComponent class รับข้อมูล
รายชื่อ staff จากตัวแปร STAFFS ซึ่งถูกส่งออกมาจากไฟล์ mock-staffs.ts เป็นข้อมูล
จำลองสำหรับทดสอบ
    การใช้งานข้างต้นนี้ ยังไม่มีการนำเข้า service class มาใช้งาน และเราจะศึกษาต่อ
ในลำดับต่อไป

 
 

สร้าง service class เพื่อเรียกใช้ Dependency Injection

ให้เราสร้างไฟล์ staff.service.ts โดยมีการกำหนด service class ชื่อ StaffService และมี
คำสั่ง getStaffs ซึ่งจะไปเรียกข้อมูลจำลองจากไฟล์ mock-staffs.ts มาใช้อีกที
 

ไฟล์ staff.service.ts

 

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

import { STAFFS }     from './mock-staffs';

@Injectable()
export class StaffService {

  getStaffs() { return STAFFS; }
  
}
 
การกำหนด @Injectable() เป็นการแสดงถึงว่า class นี้เป็น sevice class หรือ
เรียกว่า Injector ที่จะถูกนำไปใช้งานใน class อื่นๆ 
 
    หมายเหตุ: ตัวอย่าง service class ข้างต้น เป็นรูปแบบ service จำลองเท่านั้น ยังไม่ใช้
รูปแบบ service ที่ใช้งานจริงจังทั่วไป   ซึ่งปกติแล้ว ถ้า App จะดึงข้อมูลจาก server
การกำหนด API จะเป็นในลักษณะการรับค่าส่งค่าข้อมูลที่เกิดไม่พร้อมกัน เช่น การใช้งาน
รูปแบบ Ajax ที่ทำการส่งคำสั่งไปดึงข้อมูลและรอข้อมูลส่งกลับมา จากนั้นจึงค่อยนำข้อมูล
นั้นๆ ไปใช้งาน แบบนี้เป็นต้น  แต่ในตัวอย่างของเรา การใช้คำสั่งข้างต้น เพื่อจำลอง
การทำงานของ service class ก็เพียงพอแล้ว
 
ในตอนหน้า เราจะมาดูในเรื่องของการตั้งค่าและใช้งาน Injector หรือ service class ที่เราสร้าง
ขึ้นมา เพื่อใช้งานต่อไป รอติดตาม

 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ