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 ($ range، numberValue) {
console.log (numberValue)
})
حقن المصنع
تُعرف الوظيفة التي تنشئ قيمًا باسم المصنع. يتم إنشاء القيمة عند الطلب من قبل المصنع ، كلما احتاجت خدمة أو وحدة تحكم إلى قيمة يتم ضخها من المصنع. بمجرد إنشاء القيمة ، يتم إعادة استخدامها لجميع الخدمات ووحدات التحكم.
فهو يستخدم وظيفة المصنع لحساب القيمة وإرجاعها.
مثال:
var firstModule = angular.module ('firstModule'، [])
firstModule.factory ('firstFactory'، function () {
إرجاع 'قيمة'
})
firstModule.controller ('FirstController'، function ($ range، firstFactory) {
console.log (firstFactory)
})
ضخ القيم في المصنع
يمكن حقن قيمة في المصنع بالطريقة التالية:
var firstModule = angular.module ('firstModule'، [])
firstModule.value ('numberValue'، 29)
firstModule.controller ('FirstController'، function ($ range، numberValue) {
console.log (numberValue)
})
وتجدر الإشارة إلى أن القيمةيتم إنتاجها بواسطة وظيفة المصنع ، وليس وظيفة المصنع نفسها. دعنا ننتقل إلى مقال حقن التبعية في AngularJs.
حقن الخدمة في AngularJs
يُعرف كائن JavaScript الفردي الذي يحتوي على مجموعة من الوظائف بالخدمة في AngularJs. المنطق الضروري للخدمة لتنفيذها وارد في الوظيفة. يمكن إنشاء الخدمة باستخدام الوظيفة service () في الوحدة النمطية.
مثال:
// تحديد وحدة
var firstApp = angular.module ('firstApp'، [])
...
// إنشاء خدمة تحدد طريقة مربع لإرجاع مربع الرقم
firstApp.service ('CalciService'، function (MathService) {
this.square = الوظيفة (x) {
إرجاع MathService.multiply (x، x)
}
})
// حقن خدمة 'CalciService' في وحدة التحكم
firstApp.controller ('CalciController' ، الوظيفة (نطاق $ ، CalciService ،
الإدخال الافتراضي) {
$ domain.number = الإدخال الافتراضي
$ scale.result = CalciService.square (نطاق $.number)
$ domain.square = الوظيفة () {
$ scale.result = CalciService.square (نطاق $.number)
}
})
مزود
لإنشاء خدمات أو مصنع داخليًا أثناء مرحلة التكوين ، فإننا نستخدم المزود. الموفر هو طريقة مصنع خاصة بوظيفة get () تُستخدم لإرجاع القيمة / الخدمة / المصنع.
مثال:
// تحديد وحدة
var firstApp = angular.module ('firstApp'، [])
...
// قم بإنشاء خدمة باستخدام مزود يحدد مربع طريقة لإرجاع
مربع الرقم.
firstApp.config (الوظيفة ($ provide) {
$ provide.provider ('MathService'، function () {
هذا. $ get = function () {
جافا كيفية إنهاء البرنامج
مصنع var =
factory.multiply = الوظيفة (x ، y) {
العودة x * y
}
إعادة المصنع
}
})
})
ثابت
نظرًا لأن المستخدم لا يمكنه حقن قيم في دالة module.config () ، فإننا نستخدم الثوابت. تستخدم الثوابت لتمرير القيم في مرحلة التكوين.
firstApp.constant ('configParam' ، 'قيمة ثابتة')
مثال:
يمكن استخدام التوجيهات المذكورة أعلاه بالطريقة التالية:
حقن التبعية
مثال تربيع AngularJS
أدخل أي رقم:
X2
النتيجة: {{النتيجة}}
var firstApp = angular.module ('firstApp'، [])
firstApp.config (الوظيفة ($ provide) {
$ provide.provider ('MathService'، function () {
هذا. $ get = function () {
مصنع var =
factory.multiply = الوظيفة (x ، y) {
العودة x * y
}
إعادة المصنع
}
})
})
firstApp.value ('defaultInput'، 6)
firstApp.factory ('MathService'، function () {
مصنع var =
factory.multiply = الوظيفة (x ، y) {
العودة x * y
}
إعادة المصنع
})
firstApp.service ('CalciService'، function (MathService) {
this.square = الوظيفة (x) {
إرجاع MathService.multiply (x، x)
}
})
firstApp.controller ('CalciController'، function ($ range، CalciService، defaultInput) {
$ domain.number = الإدخال الافتراضي
$ scale.result = CalciService.square (نطاق $.number)
$ domain.square = الوظيفة () {
$ scale.result = CalciService.square (نطاق $.number)
كيفية تثبيت php على windows 7
}
})
انتاج:
بهذا نكون قد وصلنا إلى نهاية مقالة حقن التبعية في AngularJs. ج تحقق من من Edureka ، وهي شركة تعليمية موثوقة عبر الإنترنت مع شبكة تضم أكثر من 250000 متعلم راضٍ منتشرين في جميع أنحاء العالم.
لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات من حقن التبعية هذا في AngularJs وسنعود إليك.