การฉีดการพึ่งพา AngularJS: ส่วนประกอบใดที่ถูกฉีด

การฉีดพึ่งพาใน AngularJS คืออะไร?

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

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

ก่อนอื่นเรามาทำความเข้าใจก่อนว่าการพึ่งพาคืออะไร

แผนภาพด้านบนแสดงตัวอย่างการฉีดการพึ่งพา AngularJS แบบง่าย ๆ ของกิจวัตรประจำวันในการเขียนโปรแกรมฐานข้อมูล

กล่อง 'Model' แสดงถึง "คลาส Model" ซึ่งปกติจะสร้างขึ้นเพื่อโต้ตอบกับฐานข้อมูล ดังนั้นตอนนี้ฐานข้อมูลจึงกลายเป็นสิ่งที่ต้องมีเพื่อให้ "คลาส Model" ทำงานได้
ด้วยการฉีดขึ้นต่อกัน เราสร้างบริการเพื่อดึงข้อมูลทั้งหมดจากฐานข้อมูลและเข้าสู่คลาสโมเดล

ในส่วนที่เหลือของบทช่วยสอนนี้ เราจะดูเพิ่มเติมเกี่ยวกับ dependency insert และวิธีทำให้สิ่งนี้สำเร็จใน AngularJS

องค์ประกอบใดที่สามารถฉีดเป็นการพึ่งพาใน AngularJS

ใน Angular.JS การพึ่งพาจะถูกฉีดโดยใช้ "วิธีโรงงานแบบฉีด" หรือ "ฟังก์ชันตัวสร้าง"

ส่วนประกอบเหล่านี้สามารถแทรกด้วยส่วนประกอบ "บริการ" และ "คุณค่า" เป็นการพึ่งพาได้ เราได้เห็นสิ่งนี้ในหัวข้อก่อนหน้านี้กับบริการ $http

เราได้เห็นแล้วว่าบริการ $http สามารถใช้ภายใน AngularJS เพื่อรับข้อมูลจาก MySQL หรือ MS SQL ฐานข้อมูลเซิร์ฟเวอร์ผ่าน PHP โปรแกรมประยุกต์บนเว็บ

โดยปกติบริการ $http จะถูกกำหนดจากภายในตัวควบคุมในลักษณะต่อไปนี้

sampleApp.controller ('AngularJSController', function ($scope, $http)

ตอนนี้เมื่อมีการกำหนดบริการ $http ในคอนโทรลเลอร์ดังที่แสดงด้านบน หมายความว่าตอนนี้คอนโทรลเลอร์ต้องพึ่งพาบริการ $http

ดังนั้นเมื่อมีการดำเนินการโค้ดข้างต้น AngularJS จะดำเนินการตามขั้นตอนต่อไปนี้

ตรวจสอบว่ามีการสร้างอินสแตนซ์ “$http service” แล้วหรือยัง เนื่องจากตอนนี้ "ตัวควบคุม" ของเราขึ้นอยู่กับ "บริการ $http" วัตถุของบริการนี้จึงต้องเปิดให้ผู้ควบคุมของเราใช้งานได้
หาก AngularJS พบว่าบริการ $http ไม่ได้สร้างอินสแตนซ์ AngularJS จะใช้ฟังก์ชัน 'factory' เพื่อสร้างวัตถุ $http
injector ภายใน Angular.JS จะจัดเตรียมอินสแตนซ์ของบริการ $http ให้กับคอนโทรลเลอร์ของเราเพื่อการประมวลผลต่อไป

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

ตัวอย่างของการพึ่งพาการฉีด

ในตัวอย่างนี้ เราจะเรียนรู้วิธีใช้ dependencyjection ใน AngularJS

การฉีดพึ่งพาสามารถทำได้ 2 วิธี

ประการหนึ่งคือผ่าน “องค์ประกอบคุณค่า”
อีกประการหนึ่งคือผ่าน "บริการ"

มาดูการใช้งานทั้งสองวิธีโดยละเอียด

1) องค์ประกอบคุณค่า

แนวคิดนี้มีพื้นฐานมาจากความเป็นจริงของการสร้างความเรียบง่าย Javaต้นฉบับ วัตถุและส่งต่อไปยังตัวควบคุมเพื่อประมวลผลต่อไป

ดำเนินการโดยใช้สองขั้นตอนด้านล่าง

ขั้นตอน 1) สร้าง Javaวัตถุสคริปต์โดยใช้ส่วนประกอบค่าและแนบไปกับโมดูล AngularJS.JS หลักของคุณ

องค์ประกอบค่าใช้พารามิเตอร์สองตัว อันหนึ่งคือกุญแจสำคัญ และอีกอันคือค่าของออบเจ็กต์จาวาสคริปต์ที่สร้างขึ้น

ขั้นตอน 2) เข้า Javaวัตถุสคริปต์จาก ตัวควบคุม Angular.JS

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

ในตัวอย่างโค้ดข้างต้น กำลังดำเนินการขั้นตอนหลักด้านล่างนี้

```
sampleApp.value("TutorialID", 5);
```

ฟังก์ชันค่าของโมดูล Angular.JS JS กำลังถูกใช้เพื่อสร้างคู่คีย์-ค่าที่เรียกว่า "TutorialID" และค่าของ "5"

sampleApp.controller('AngularJSController', function ($scope,TutorialID)

ขณะนี้ตัวแปร TutorialID สามารถเข้าถึงได้โดยคอนโทรลเลอร์ในฐานะพารามิเตอร์ฟังก์ชัน

```
 $scope.ID =TutorialID;
```

ขณะนี้ค่าของ TutorialID ซึ่งก็คือ 5 กำลังถูกกำหนดให้กับตัวแปรอื่นที่เรียกว่า ID ในออบเจ็กต์ $scope สิ่งนี้กำลังดำเนินการเพื่อให้สามารถส่งผ่านค่า 5 จากคอนโทรลเลอร์ไปยังมุมมองได้

```
{{ID}}
```

พารามิเตอร์ ID จะแสดงเป็นนิพจน์ในมุมมอง ดังนั้นผลลัพธ์ของ '5' จะแสดงบนเพจ

เมื่อรันโค้ดข้างต้นแล้ว จะได้ผลลัพธ์ดังนี้

2) บริการ

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

ตัวอย่างเช่น “$http” เป็นบริการใน Angular.JS ซึ่งเมื่อฉีดเข้าไปในคอนโทรลเลอร์ของคุณจะมีฟังก์ชันที่จำเป็นของ

( get() , query() , บันทึก() , ลบ(), ลบ() )

จากนั้นคุณสามารถเรียกใช้ฟังก์ชันเหล่านี้ได้จากคอนโทรลเลอร์ของคุณตามลำดับ

มาดูตัวอย่างง่ายๆ ว่าคุณสามารถสร้างบริการของคุณเองได้อย่างไร เราจะสร้างบริการการบวกแบบง่ายๆ ซึ่งจะบวกเลขสองตัว

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

ในตัวอย่างข้างต้น ดำเนินการตามขั้นตอนต่อไปนี้

 mainApp.service('AdditionService', function()

ที่นี่เรากำลังสร้างบริการใหม่ที่เรียกว่า 'AdditionService' โดยใช้พารามิเตอร์บริการของโมดูล AngularJS JS หลักของเรา

```
 this.Addition = function(a,b)
```

ที่นี่เรากำลังสร้างฟังก์ชันใหม่ที่เรียกว่า Addition ภายในบริการของเรา ซึ่งหมายความว่าเมื่อ AngularJS สร้างอินสแตนซ์ AdditionService ของเราภายในคอนโทรลเลอร์ของเรา เราก็จะสามารถเข้าถึงฟังก์ชัน 'Addition' ได้ ในนิยามฟังก์ชันนี้ เรากำลังบอกว่าฟังก์ชันนี้ยอมรับพารามิเตอร์สองตัว คือ a และ b

```
 return a+b;
```

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

 mainApp.controller('DemoController', function($scope, AdditionService)

นี่คือขั้นตอนหลักที่เกี่ยวข้องกับการฉีดการพึ่งพา ในคำจำกัดความของคอนโทรลเลอร์ ขณะนี้เรากำลังอ้างอิงถึงบริการ 'AdditionService' ของเรา เมื่อ AngularJS เห็นสิ่งนี้ มันจะสร้างอินสแตนซ์ของวัตถุประเภท 'AdditionService'

 $scope.result = AdditionService.Addition(5,6);

ขณะนี้เรากำลังเข้าถึงฟังก์ชัน 'Addition' ซึ่งกำหนดไว้ในบริการของเราและกำหนดให้กับวัตถุ $scope ของคอนโทรลเลอร์

นี่คือตัวอย่างง่ายๆ ของวิธีที่เราสามารถกำหนดบริการของเราและแทรกฟังก์ชันการทำงานของบริการนั้นภายในตัวควบคุมของเรา

สรุป

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

การฉีดพึ่งพาใน AngularJS คืออะไร?

องค์ประกอบใดที่สามารถฉีดเป็นการพึ่งพาใน AngularJS

ตัวอย่างของการพึ่งพาการฉีด

1) องค์ประกอบคุณค่า

บทความที่เกี่ยวข้อง

2) บริการ

สรุป

ลงทะเบียนเพื่อรับจดหมายข่าว