Angular คือ ตอนที่ 8 : Dependency Injection (DI)

30พ.ค. 2023 by รับทำแอพ สบายไอที
  1. การฉีดพึ่งพา (Dependency Injection) คืออะไร
  2. ทำความเข้าใจเกี่ยวกับการฉีดพึ่งพาใน AngularJS
  3. พลังของการพึ่งพาการฉีดใน AngularJS
  4. การพึ่งพาการฉีดในการดำเนินการ: การสร้างแอป AngularJS
  5. Injector: หัวใจของ AngularJS Dependency Injection

ในขณะที่โลกของการทำเว็บ Angular และทำแอพมีการพัฒนาอย่างต่อเนื่อง เทคโนโลยีสมัยใหม่เช่น AngularJS ได้กลายเป็นผู้เล่นสำคัญในการทำเว็บ Angular และทำแอพแบบไดนามิกและโต้ตอบได้ การออกแบบที่ยอดเยี่ยมของ AngularJS มุ่งเน้นไปที่การทำให้การพัฒนาส่วนหน้ามีประสิทธิภาพมากขึ้นและน่าผิดหวังน้อยลง หนึ่งในคุณสมบัติหลักในกระบวนทัศน์นี้คือ การพึ่งพาการฉีด (DI) DI เป็นรูปแบบการออกแบบซอฟต์แวร์ที่ช่วยให้เราสามารถสร้างโค้ดแยกส่วนและบำรุงรักษาได้มากขึ้น ซึ่งทำหน้าที่เป็นรากฐานที่สำคัญของสถาปัตยกรรมของ AngularJS

เรามาเจาะลึกลงไปใน Dependency Injection ทำความเข้าใจวิธีการทำงานใน AngularJS และดูว่ามันมีบทบาทสำคัญในการทำเว็บ Angular และทำแอพอย่างไร

1. การฉีดพึ่งพา (Dependency Injection) คืออะไร

ในแง่ที่ง่ายที่สุด การพึ่งพาอาศัยกัน (DI) เป็นรูปแบบการออกแบบที่การพึ่งพาไม่ได้เข้าโค้ดตายตัว แต่มีให้ – ‘injected’ – ลงในส่วนประกอบขณะรันไทม์ แทนที่จะให้คลาสยกตัวอย่างการขึ้นต่อกันหรือใช้การอ้างอิงแบบสแตติก พวกเขาจะได้รับการขึ้นต่อกันในเวลาที่สร้างอินสแตนซ์ โดยทั่วไปจะผ่านตัวสร้าง สิ่งนี้ทำให้โค้ดของเรามีความยืดหยุ่น ทดสอบได้ และบำรุงรักษาได้มากขึ้น

ในบริบทของ AngularJS จะใช้ DI เพื่อจัดเตรียมส่วนประกอบที่จำเป็น เช่น บริการ ตัวควบคุม ตัวกรอง และอื่นๆ ให้กับโมดูลแอปพลิเคชันของคุณเมื่อใดก็ตามที่จำเป็น

2. ทำความเข้าใจเกี่ยวกับการฉีดพึ่งพาใน AngularJS

AngularJS ใช้การพึ่งพาการฉีดเป็นวิธีการหลักในการจัดหาฟังก์ชันการทำงานที่แตกต่างกันไปยังส่วนต่าง ๆ ของแอปพลิเคชันของคุณ ระบบ DI นี้ใน AngularJS เป็น ‘ลำดับชั้นและโมดูลาร์’

ระบบฉีดการพึ่งพาแบบลำดับชั้นให้ความสามารถในการควบคุมขอบเขตของการพึ่งพาในขณะที่รักษาโค้ดให้สะอาดและเป็นระเบียบ ซึ่งหมายความว่า Injector (ซึ่งเป็นบริการหลักของ AngularJS ที่โหลดการพึ่งพา) รู้ว่าควรค้นหาการพึ่งพาจากที่ใด เมื่อเราขอบริการหัวฉีดจะเริ่มค้นหาจากรูทของแอปพลิเคชันและเลื่อนไปตามหัวฉีดลูกทั้งหมดจนกว่าจะพบบริการที่ร้องขอ

Modularity ของ AngularJS ช่วยให้เราสามารถจัดกลุ่มส่วนประกอบที่เกี่ยวข้อง เช่น บริการ คำสั่ง ตัวกรอง ฯลฯ ให้เป็นโมดูลเชิงตรรกะและแบบสแตนด์อโลน โมดูลเหล่านี้สามารถรวมกันเพื่อสร้างแอปพลิเคชันได้

3. พลังของการพึ่งพาการฉีดใน AngularJS

หนึ่งในเหตุผลหลักที่นักพัฒนาต้องการใช้ AngularJS ในการทำเว็บ Angular และทำแอพคือการใช้ Dependency Injection อย่างมีประสิทธิภาพ มาดูข้อดีบางประการของการใช้ DI ใน AngularJS:

ความสามารถในการใช้โค้ดซ้ำ : โดยการแทรกการพึ่งพา เราสามารถใช้ฟังก์ชันหรือคลาสเดียวกันซ้ำในส่วนต่าง ๆ ของแอปพลิเคชันของเรา สิ่งนี้นำไปสู่การทำซ้ำโค้ดน้อยลงและส่งเสริมการนำโค้ดกลับมาใช้ใหม่

การบำรุงรักษาโค้ด : DI ส่งเสริมการแยกระดับสูงซึ่งทำให้โค้ดสามารถบำรุงรักษาได้มากขึ้น เมื่อมีการแทรกการอ้างอิง การเปลี่ยนหรือแก้ไขบริการจะง่ายขึ้นโดยไม่ส่งผลกระทบต่อส่วนอื่นๆ ของแอปพลิเคชัน

การทดสอบทำได้ง่าย : เนื่องจากสามารถใส่การอ้างอิงลงในส่วนประกอบต่างๆ ได้ จึงกลายเป็นเรื่องง่ายที่จะเปลี่ยนบริการจริงเป็นแบบจำลองในระหว่างการทดสอบหน่วย ทำให้ส่วนประกอบของเราทดสอบได้ง่ายขึ้น

การแยกข้อกังวล : เมื่อใช้ DI เรารับประกันการแยกข้อกังวลอย่างชัดเจน แต่ละโมดูลหรือคอมโพเนนต์เกี่ยวข้องกับการปฏิบัติตามความรับผิดชอบของตนเองเท่านั้น และไม่จำเป็นต้องรู้ว่าการพึ่งพานั้นถูกสร้างขึ้นมาอย่างไร

การจัดการข้อกังวลเกี่ยวกับการตัดขวาง (Cross-cutting) : DI นั้นยอดเยี่ยมในการจัดการข้อกังวลเกี่ยวกับการตัดขวาง เช่น การบันทึก การกำหนดค่า และการจัดการข้อยกเว้น ข้อกังวลเหล่านี้สามารถสรุปไว้ในบริการและฉีดได้ทุกที่ที่ต้องการ

4. การพึ่งพาการฉีดในการดำเนินการ: การสร้างแอป AngularJS

เมื่อสร้างแอปด้วย AngularJS คุณจะพบว่า DI เป็นส่วนหนึ่งของกระบวนการทั้งหมด ตั้งแต่การกำหนดโมดูลหลักของแอปไปจนถึงการตั้งค่าตัวควบคุม บริการ และคำสั่ง DI มีอยู่ทั่วไปทุกหนทุกแห่ง ลองมาตัวอย่างง่ายๆ:

var app = angular.module('myApp', []);

app.controller('myController', function($scope, myService) {
    $scope.greeting = myService.getGreeting();
});

app.service('myService', function() {
    this.getGreeting = function() {
        return "Hello, World!";
    };
});

ในตัวอย่างนี้ เราสร้างแอป AngularJS ชื่อ myApp. ภายในแอพ นี้เรามีตัวควบคุม myController และบริการ myService บริการนี้ myService ขึ้นอยู่ myController กับ แทนที่จะสร้างอินสแตนซ์ของ myServiceinside myControllerเรา ใส่มันเป็นพารามิเตอร์ในฟังก์ชัน ระบบ AngularJS DI จะดูแลการจัดเตรียมอินสแตนซ์ myService เมื่อ myController มีการสร้างอินสแตนซ์

อ็ $scope อบเจกต์ที่ส่งผ่านไปยัง myController ฟังก์ชันนั้นเป็นบริการในตัวที่จัดทำโดย AngularJS ทำหน้าที่เป็นกาวเชื่อมระหว่างตัวควบคุมและมุมมอง ทำให้สามารถแลกเปลี่ยนข้อมูลและตอบสนองต่อการกระทำของผู้ใช้ได้

ตัวอย่างนี้แสดงให้เห็นว่าการใช้ Dependency Injection ใน AngularJS เป็นอย่างไร ตั้งแต่การเพิ่มบริการแบบกำหนดเองเช่น myService บริการในตัวเช่น $scopeDI เป็นส่วนสำคัญของเฟรมเวิร์ก

5. Injector: หัวใจของ AngularJS Dependency Injection

หัวฉีดเป็นตัวระบุตำแหน่งบริการ มีหน้าที่ในการเรียกค้นอินสแตนซ์ของออบเจกต์ตามที่กำหนดโดยผู้ให้บริการ ประเภทการสร้างอินสแตนซ์ การเรียกใช้เมธอด และการโหลดโมดูล

Injector ถูกใช้ทั่วทั้ง AngularJS และเป็นพื้นฐานของกระบวนการทำเว็บ Angular และทำแอพ การทำความเข้าใจเกี่ยวกับบริการหัวฉีดมีความสำคัญต่อการเรียนรู้การพึ่งพาการฉีดใน AngularJS

มีสามวิธีที่หัวฉีดจัดเตรียมไว้สำหรับการดึงข้อมูลอินสแตนซ์:

  • get : ส่งคืนอินสแตนซ์ของการพึ่งพาที่กำหนดไว้
  • invoke : วิธีนี้ใช้ฟังก์ชันและขอบเขต จากนั้นเรียกใช้ฟังก์ชันภายในขอบเขตที่กำหนด แทรกการพึ่งพาใดๆ ที่ฟังก์ชันต้องการ
  • instantiate : เมธอดนี้ใช้ฟังก์ชันคอนสตรัคเตอร์ เรียกใช้โอเปอเรเตอร์ใหม่ และส่งคืนอินสแตนซ์ที่สร้างขึ้น การพึ่งพาใด ๆ ที่ฟังก์ชันคอนสตรัคเตอร์ต้องการจะถูกฉีดเข้าไปด้วย

การพึ่งพาการฉีดเป็นคุณลักษณะหลักของ AngularJS ที่ช่วยในการทำเว็บ Angular และทำแอพที่สามารถบำรุงรักษา ทดสอบได้ และเป็นโมดูล ระบบ DI ของ AngularJS ได้รับการออกแบบมาเพื่อจัดการส่วนประกอบและการอ้างอิง ทำให้คุณสามารถมุ่งเน้นไปที่การพัฒนาตรรกะทางธุรกิจสำหรับแอปพลิเคชันของคุณ

การใช้ DI ในขณะที่ทำเว็บ Angular และทำแอพ สามารถปรับปรุงคุณภาพของโค้ดเบสของคุณได้อย่างมาก และทำให้นักพัฒนารายอื่นเข้าใจและมีส่วนร่วมในโครงการของคุณได้ง่ายขึ้น ช่วยให้คุณเขียนโค้ดที่เป็นไปตามหลักการ SOLID ซึ่งนำไปสู่โค้ดเบสที่ดูแลรักษาและพัฒนาได้ง่ายขึ้น

หากคุณเพิ่งเริ่มต้นกับ AngularJS หรือต้องการยกระดับทักษะของคุณไปอีกขั้น การยอมรับและทำความเข้าใจกับ Dependency Injection เป็นสิ่งที่จำเป็น โปรดจำไว้ว่าพลังของ AngularJS นั้นอยู่ที่ความเรียบง่ายและความสง่างาม และ Dependency Injection ก็มีบทบาทอย่างมากในเรื่องนี้

ดังนั้น เมื่อคุณพร้อมที่จะเริ่มทำเว็บ Angular และทำแอพ โปรดจำไว้ว่าการพึ่งพาการแทรกไม่ได้เป็นเพียงเครื่องมือเสริมเท่านั้น แต่ยังเป็นพันธมิตรที่มีประสิทธิภาพในการจัดการและบำรุงรักษาโค้ดเบสของคุณ

Angular คืออะไร (AngularJS)

Angular คือ ตอนที่ 7 : บริการ (Services)
Angular คือ ตอนที่ 9 : เทมเพลต (Templates)