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

من قبل: جيمس هارتمان جيمس هارتمان
Hours تحديث

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

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

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

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

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

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

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

في ما تبقى من هذا البرنامج التعليمي، سننظر أكثر في حقن التبعية وكيفية تحقيق ذلك في AngularJS.

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

في Angular.JS، يتم حقن التبعيات باستخدام "طريقة المصنع القابلة للحقن" أو "وظيفة المنشئ".

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

لقد رأينا بالفعل أنه يمكن استخدام خدمة 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. يقوم الحاقن داخل Angular.JS بعد ذلك بتوفير مثيل لخدمة http $ إلى وحدة التحكم لدينا لمزيد من المعالجة.

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

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

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

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

  1. أحدهما من خلال "مكون القيمة"
  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>

ذات المواد

في مثال الكود أعلاه، يتم تنفيذ الخطوات الرئيسية أدناه

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

يتم استخدام دالة القيمة الخاصة بوحدة Angular.JS JS لإنشاء زوج من القيمة الرئيسية يسمى "TutorialID" وقيمة "5".

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

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

  1.  $scope.ID =TutorialID;

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

  1. {{ID}}

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

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

عنصر القيمة في حقن التبعية

2) الخدمة

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

على سبيل المثال، "$http" هي خدمة في 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>
<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 JS الرئيسية.

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

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

  1.  return a+b;

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

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

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

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

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

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

ملخص

  • حقن التبعية كما يوحي الاسم هو عملية حقن الوظائف التابعة في الوحدات النمطية في وقت التشغيل.
  • يساعد استخدام حقن التبعية في الحصول على رمز أكثر قابلية لإعادة الاستخدام. إذا كانت لديك وظيفة مشتركة يتم استخدامها عبر وحدات تطبيقية متعددة، فإن أفضل طريقة هي تحديد خدمة مركزية بهذه الوظيفة ثم إدخال تلك الخدمة باعتبارها تبعية في وحدات التطبيق الخاصة بك.
  • يمكن استخدام كائن القيمة الخاص بـ AngularJS لإدخال كائنات بسيطة Javaكائنات البرنامج النصي في وحدة التحكم الخاصة بك باستخدام $inject في AngularJS.
  • يمكن استخدام وحدة الخدمة لتحديد خدماتك المخصصة والتي يمكن إعادة استخدامها عبر وحدات AngularJS المتعددة.

تلخيص هذه التدوينة بـ: