Dependency Injection เป็นรูปแบบการออกแบบซอฟต์แวร์ที่ระบุวิธีที่ส่วนประกอบต่างๆได้รับการพึ่งพา ส่วนประกอบจะได้รับการอ้างอิงแทนที่จะเข้ารหัสอย่างหนัก ความสามารถในการใช้งานซ้ำและการบำรุงรักษาทำได้โดยใช้การฉีดแบบพึ่งพา Supreme Dependency Injection ใน สามารถทำได้โดยส่วนประกอบต่อไปนี้:
การฉีดขึ้นอยู่กับมูลค่า
วัตถุธรรมดาใน AngularJs เรียกว่าค่า อาจเป็นสตริงตัวเลขหรือแม้แต่วัตถุ JavaScript สามารถใช้เพื่อส่งผ่านค่าในโรงงานบริการหรือตัวควบคุมระหว่างขั้นตอนการรันและกำหนดค่า
ตัวอย่าง:
// กำหนดโมดูล
var firstModule = angular.module ('firstModule', [])
// สร้างออบเจ็กต์ค่าและส่งผ่านข้อมูลไป
firstModule.value ('numberValue', 50)
firstModule.value ('stringValue', 'xyz')
firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})
ในตัวอย่างนี้ค่าต่างๆถูกกำหนดโดยใช้ฟังก์ชัน value () ชื่อของค่าถูกระบุโดยพารามิเตอร์แรกและพารามิเตอร์ที่สองระบุค่า สิ่งนี้ทำให้โรงงานบริการและผู้ควบคุมสามารถอ้างอิงค่าเหล่านี้ด้วยชื่อของพวกเขาเอง
การใส่ค่า
เราสามารถฉีดค่าเข้าไปในฟังก์ชันตัวควบคุม AngularJs โดยการเพิ่มพารามิเตอร์ที่มีชื่อเดียวกับค่า
ตัวอย่าง:
var firstModule = angular.module ('firstModule', [])
firstModule.value ('numberValue', 18)
firstModule.controller ('FirstController', function ($ scope, numberValue) {
console.log (numberValue)
})
การฉีดจากโรงงาน
ฟังก์ชันที่สร้างค่าเรียกว่าโรงงาน ค่าตามความต้องการถูกสร้างขึ้นโดยโรงงานเมื่อใดก็ตามที่บริการหรือตัวควบคุมต้องการค่าที่ฉีดออกมาจากโรงงาน เมื่อสร้างค่าแล้วจะใช้ซ้ำสำหรับบริการและคอนโทรลเลอร์ทั้งหมด
ทำให้การใช้งานฟังก์ชั่นโรงงานในการคำนวณและส่งคืนค่า
ตัวอย่าง:
var firstModule = angular.module ('firstModule', [])
firstModule.factory ('firstFactory', ฟังก์ชัน () {
คืนค่า 'a value'
})
firstModule.controller ('FirstController', function ($ scope, firstFactory) {
console.log (firstFactory)
})
การอัดฉีดค่าเข้าไปในโรงงาน
สามารถฉีดค่าเข้าไปในโรงงานได้ด้วยวิธีการดังต่อไปนี้:
var firstModule = angular.module ('firstModule', [])
firstModule.value ('numberValue', 29)
firstModule.controller ('FirstController', function ($ scope, numberValue) {
console.log (numberValue)
})
ต้องสังเกตว่าค่าที่ผลิตโดยฟังก์ชั่นโรงงานถูกฉีดไม่ใช่ฟังก์ชั่นโรงงานเอง มาดูบทความเรื่อง Dependency Injection ใน AngularJs กัน
บริการฉีดใน AngularJs
อ็อบเจ็กต์ Singleton JavaScript ที่มีชุดของฟังก์ชันเรียกว่าเซอร์วิสใน AngularJs ตรรกะที่จำเป็นสำหรับการให้บริการมีอยู่ในฟังก์ชัน สามารถสร้างบริการได้โดยใช้ฟังก์ชัน service () บนโมดูล
ตัวอย่าง:
// กำหนดโมดูล
var firstApp = angular.module ('firstApp', [])
...
// สร้างบริการที่กำหนดวิธีการ กำลังสองเพื่อส่งกลับกำลังสองของตัวเลข
firstApp.service ('CalciService', ฟังก์ชัน (MathService) {
this.square = function (x) {
ส่งคืน MathService.multiply (x, x)
}
})
// ฉีดบริการ 'CalciService' ลงในคอนโทรลเลอร์
firstApp.controller ('CalciController', ฟังก์ชัน ($ ขอบเขต, CalciService,
defaultInput) {
$ scope.number = defaultInput
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}
})
ผู้ให้บริการ
ในการสร้างบริการหรือโรงงานภายในระหว่างขั้นตอนการกำหนดค่าเราใช้ประโยชน์จากผู้ให้บริการ ผู้ให้บริการเป็นวิธีการพิเศษจากโรงงานที่มีฟังก์ชัน get () ซึ่งใช้เพื่อส่งคืนค่า / บริการ / โรงงาน
ตัวอย่าง:
// กำหนดโมดูล
var firstApp = angular.module ('firstApp', [])
...
// สร้างบริการโดยใช้ผู้ให้บริการซึ่งกำหนดเมธอดสแควร์เพื่อส่งคืนไฟล์
กำลังสองของตัวเลข
firstApp.config (ฟังก์ชัน ($ ให้) {
$ give.provider ('MathService', ฟังก์ชัน () {
นี้. $ get = function () {
โรงงาน var =
factory.multiply = ฟังก์ชัน (x, y) {
ส่งคืน x * y
}
ส่งคืนโรงงาน
}
})
})
คงที่
เนื่องจากผู้ใช้ไม่สามารถฉีดค่าลงในฟังก์ชัน module.config () เราจึงใช้ค่าคงที่ ค่าคงที่ใช้เพื่อส่งผ่านค่าในเฟสการกำหนดค่า
firstApp.constant (“ configParam”,“ ค่าคงที่”)
ตัวอย่าง:
คำสั่งที่กล่าวถึงข้างต้นสามารถใช้ได้ในลักษณะต่อไปนี้:
การฉีดพึ่งพา
AngularJS Squaring ตัวอย่าง
ป้อนหมายเลขใดก็ได้:
X2
ผลลัพธ์: {{result}}การสอนข้อมูลขนาดใหญ่สำหรับผู้เริ่มต้น
var firstApp = angular.module ('firstApp', [])
firstApp.config (ฟังก์ชัน ($ ให้) {
$ give.provider ('MathService', ฟังก์ชัน () {
นี้. $ get = function () {
โรงงาน var =
factory.multiply = ฟังก์ชัน (x, y) {
ส่งคืน x * y
}
ส่งคืนโรงงาน
}
})
})
firstApp.value ('defaultInput', 6)
firstApp.factory ('MathService', ฟังก์ชัน () {
โรงงาน var =
factory.multiply = ฟังก์ชัน (x, y) {
ส่งคืน x * y
}
ส่งคืนโรงงาน
})
firstApp.service ('CalciService', ฟังก์ชัน (MathService) {
this.square = function (x) {
ส่งคืน MathService.multiply (x, x)
}
})
firstApp.controller ('CalciController', ฟังก์ชัน ($ scope, CalciService, defaultInput) {
$ scope.number = defaultInput
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}
})
เอาท์พุท:
ด้วยเหตุนี้เราจึงมาถึงจุดสิ้นสุดของ Dependency Injection ในบทความ AngularJs ค กำจัดไฟล์ โดย Edureka บริษัท การเรียนรู้ออนไลน์ที่เชื่อถือได้ซึ่งมีเครือข่ายผู้เรียนที่พึงพอใจมากกว่า 250,000 คนกระจายอยู่ทั่วโลก
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ Dependency Injection ใน AngularJs แล้วเราจะติดต่อกลับไป