مكونات حقن التبعية في AngularJS

ما هو حقن التبعية في AngularJS؟

حقن التبعية في AngularJS هو نمط تصميم برمجي ينفذ انعكاس التحكم لحل التبعيات. فهو يقرر كيفية احتفاظ المكونات بتبعياتها. يمكن استخدامه أثناء تحديد المكونات أو توفير كتل التشغيل والتكوين للوحدة. فهو يمكّنك من جعل المكونات قابلة لإعادة الاستخدام وقابلة للاختبار والصيانة.

قلب السيطرة: ويعني أن الكائنات لا تقوم بإنشاء كائنات أخرى تعتمد عليها في أداء عملها. وبدلا من ذلك، يحصلون على هذه الأشياء من مصدر خارجي. يشكل هذا أساس حقن التبعية AngularJS حيث إذا كان كائن يعتمد على كائن آخر؛ لا يتحمل الكائن الأساسي مسؤولية إنشاء الكائن التابع ثم استخدام أساليبه. بدلاً من ذلك، يقوم مصدر خارجي (وهو في AngularJS، هو إطار عمل AngularJS نفسه) بإنشاء الكائن التابع ويعطيه للكائن المصدر لمزيد من الاستخدام.

⚠️ ملاحظة حول الإصدار: انتهى دعم AngularJS في يناير 2022بدون أي تحديثات أمنية. يقوم Angular الحديث بالحقن من خلال موفري @Injectable و حقن()يبقى الكود أدناه تاريخياً.

لذلك دعونا أولا نفهم ما هي التبعية.

يُظهر الرسم البياني أعلاه مثالًا بسيطًا لحقن تبعية AngularJS لطقوس يومية في برمجة قواعد البيانات.

• يصور مربع "النموذج" "فئة النموذج" التي يتم إنشاؤها عادةً للتفاعل مع قاعدة البيانات. لذا، أصبحت قاعدة البيانات الآن تابعة لـ "فئة النموذج" لتعمل.
• عن طريق حقن التبعية، نقوم بإنشاء خدمة للحصول على جميع المعلومات من قاعدة البيانات والدخول إلى فئة النموذج.

في الجزء المتبقي من هذا الدرس، سنتناول بمزيد من التفصيل حقن التبعية وكيفية تحقيق ذلك في AngularJS.

ما هو المكون الذي يمكن حقنه كاعتمادية في AngularJS؟

في AngularJS، يتم حقن التبعيات باستخدام "طريقة المصنع القابلة للحقن" أو "دالة البناء".

يمكن حقن هذه المكونات بمكونات "الخدمة" و"القيمة" كتبعيات. لقد رأينا هذا في موضوع سابق مع خدمة $http.

AngularJS وحدة يقوم بتسجيل الكائنات القابلة للحقن من خلال خمس وصفات.

لقد رأينا بالفعل أنه يمكن استخدام خدمة http $ داخل AngularJS للحصول على البيانات من ملف MySQL أو MS SQL قاعدة بيانات الخادم عبر أ PHP تطبيق الويب.

يتم تعريف خدمة $http عادةً من داخل وحدة التحكم بالطريقة التالية.

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

الآن عندما يتم تعريف خدمة $http في وحدة التحكم كما هو موضح أعلاه. وهذا يعني أن وحدة التحكم تعتمد الآن على خدمة http $.

لذا، عندما يتم تنفيذ الكود أعلاه، سوف يقوم AngularJS بتنفيذ الخطوات التالية؛

1. تحقق لمعرفة ما إذا كان قد تم إنشاء مثيل "خدمة $http". نظرًا لأن "وحدة التحكم" الخاصة بنا تعتمد الآن على "خدمة $http"، فيجب إتاحة كائن هذه الخدمة لوحدة التحكم الخاصة بنا.
2. إذا اكتشفت AngularJS أن خدمة $http لم يتم إنشاء مثيل لها، فإن AngularJS تستخدم وظيفة "المصنع" لإنشاء كائن $http.
3. يقوم المُحقِّن داخل AngularJS بعد ذلك بتوفير نسخة من خدمة $http إلى وحدة التحكم الخاصة بنا لمزيد من المعالجة.

نماذج التعليقات التوضيحية: التعليق الضمني يقرأ أسماء المعاملات، لذا فإن عملية التصغير تُعطلها. يبقى كل من تدوين المصفوفة المضمنة و$inject سليمين؛ يرفض ng-strict-di في ng-app التعليقات التوضيحية الضمنية.

الآن بعد أن تم حقن التبعية في وحدة التحكم الخاصة بنا، يمكننا الآن استدعاء الوظائف الضرورية داخل خدمة http $ لمزيد من المعالجة.

مثال على حقن التبعية

في هذا المثال، سوف نتعلم كيفية استخدام حقن التبعية في AngularJS.

يمكن تنفيذ حقن التبعية بطريقتين

1. أحدهما من خلال "مكون القيمة"
2. آخر من خلال "الخدمة"

دعونا نلقي نظرة على تنفيذ كلا الطريقتين بمزيد من التفصيل.

1) مكون القيمة

يعتمد هذا المفهوم على إنشاء شيء بسيط Javaسيناريو الكائن وتمريره إلى وحدة التحكم لمزيد من المعالجة.

ويتم تنفيذ ذلك باستخدام الخطوتين أدناه

الخطوة 1) إنشاء Javaقم بإنشاء كائن البرنامج النصي باستخدام مكون القيمة وقم بإرفاقه بوحدة AngularJS الرئيسية الخاصة بك.

يأخذ عنصر القيمة معيارين؛ أحدهما هو المفتاح، والآخر هو قيمة Javaكائن البرنامج النصي الذي تم إنشاؤه.

الخطوة 2) وصول إلى Javaكائن نصي من وحدة تحكم AngularJS

<! 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>

يقوم الكود أعلاه بتنفيذ الخطوات التالية

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

   يتم استخدام دالة القيمة الخاصة بوحدة AngularJS لإنشاء زوج مفتاح-قيمة يسمى "TutorialID" وقيمة "5".

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

   أصبح الآن متغير TutorialID متاحًا لوحدة التحكم كمعلمة دالة.

3.  $scope.ID =TutorialID;

   يتم الآن تعيين قيمة TutorialID، وهي 5، إلى متغير آخر يسمى ID في $scope يتم ذلك لكي يتم تمرير القيمة 5 من وحدة التحكم إلى العرض.

4. {{ID}}

   يتم عرض معلمة المعرف في العرض كتعبير. لذا سيتم عرض الناتج "5" على الصفحة.

عند تنفيذ الكود أعلاه، سيتم عرض الإخراج على النحو التالي

2) الخدمة

يتم تعريف الخدمة على أنها مفردة Javaكائن نصي يتكون من مجموعة من الوظائف التي تريد عرضها وحقنها في وحدة التحكم الخاصة بك.

على سبيل المثال، "$http" هي خدمة في AngularJS، وعند حقنها في وحدات التحكم الخاصة بك، فإنها توفر الوظائف الضرورية لـ

(الحصول على()، الاستعلام()، حفظ()، إزالة()، حذف()).

يمكن بعد ذلك استدعاء هذه الوظائف من وحدة التحكم الخاصة بك وفقًا لذلك.

دعونا نلقي نظرة على مثال بسيط لكيفية إنشاء الخدمة الخاصة بك. سنقوم بإنشاء خدمة جمع بسيطة تقوم بإضافة رقمين.

<! 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>

في المثال أعلاه، يتم تنفيذ الخطوات التالية

1.  mainApp.service('AdditionService', function()

   هنا نقوم بإنشاء خدمة جديدة تسمى "AdditionService" باستخدام معلمة الخدمة الخاصة بوحدة AngularJS الرئيسية لدينا.

2.  this.ADDITION = function(a,b)

   هنا نقوم بإنشاء دالة جديدة باسم ADDITION ضمن خدمتنا. هذا يعني أنه عندما يقوم AngularJS بإنشاء مثيل لخدمة AdditionService داخل وحدة التحكم، سنتمكن من الوصول إلى دالة ADDITION. في تعريف هذه الدالة، نحدد أنها تقبل وسيطين، a و b.

3.  return a+b;

   هنا نقوم بتحديد جسم دالة الجمع الخاصة بنا والتي تقوم ببساطة بإضافة المعلمات وإرجاع القيمة المضافة.

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

   هذه هي الخطوة الرئيسية التي تتضمن حقن التبعية. في تعريف وحدة التحكم، نشير الآن إلى خدمة "AdditionService". عندما يرى AngularJS هذا، سيقوم بإنشاء كائن من نوع "AdditionService".

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

   نقوم الآن بالوصول إلى الدالة 'ADDITION' المعرفة في خدمتنا وتعيينها لكائن $scope الخاص بوحدة التحكم.

هذا مثال بسيط لكيفية تعريف خدمتنا وإدخال وظائف تلك الخدمة داخل وحدة التحكم الخاصة بنا.

الأسئلة الشائعة