لم يتم العثور على API؟
يوفر AngularJS بعض التغليف للوظائف ، ولكن عندما تحاول الوصول إلى هذه الوظائف من خلال الكائن العالمي الزاوي ، ستجد أنها مختلفة تمامًا عن المكتبات التي واجهتها في الماضي.
$ HTTP
على سبيل المثال ، في jQuery ، نعلم أن واجهة برمجة التطبيقات الخاصة بها تعرض من خلال كائن عالمي: $. عندما تحتاج إلى إجراء مكالمة Ajax ، استخدم $ .ajax (). تتوافق واجهة برمجة التطبيقات هذه مع توقعات التفكير.
يعرض AngularJS أيضًا كائنًا عالميًا: Angular ، والذي يلف أيضًا مكالمة Ajax ويوفر كائن HTTP $. ومع ذلك ، عندما تحاول الوصول إلى Angular. $ http باستخدام التجربة القديمة ، ستجد أن الأمر ليس كذلك!
بعد التحقق بعناية من وثائق $ HTTP ، لا يمكنني العثور على أي أدلة. أين يمكنني الحصول على هذا $ http؟
حقن التبعية/دي
في الواقع ، تنظم AngularJS جميع المكونات الوظيفية في حقن التبعية:
في وضع حقن التبعية ، يجب أن تمر جميع المكونات عبر الحاويات للوصول إلى بعضها البعض ، مما يؤدي إلى حقيقة أنه في AngularJS ، يجب عليك استخدام وسيط للحصول على كائن مثيل لمكون:
var enjector = Angular.Injector (['ng']) ؛ enjector.invoke (function ($ http) {// do sth. with $ http}) ؛هذا الوسيط هو حاوية في وضع حقن التبعية. في AngularJS ، يطلق عليه: الحاقن.
في مثال → _ → ، يمكننا أن نرى أننا حصلنا على كائن HTTP $ ، وهو في الواقع وظيفة.
حاقن/حاقن
الحاقن هو مفتاح تنفيذ إطار عمل AngularJS وتطوير التطبيق ، وهو تطبيق حاويات DI/IOC.
يقسم AngularJS الوظائف إلى أنواع مختلفة من المكونات وتنفيذها بشكل منفصل. هذه المكونات لها اسم جماعي - مزود/مزود. يسرد الشكل التالي العديد من الخدمات المدمجة شائعة الاستخدام لـ AngularJS:
لا يمكن استدعاء مكونات AngularJS مباشرة من بعضها البعض. يجب أن يمر أحد المكون من خلال حاقن لاستدعاء مكون آخر. هذه الفائدة هي أن المكونات مفصول عن بعضها البعض ، ويتم إلقاء إدارة دورة حياة الكائن بأكملها على الحاقن.
يقوم الحاقن بتنفيذ وظيفتين مهمتين:
موصفات تخزين مركزية لجميع مقدمي الخدمات
الوصفة هي في الواقع: Name + Class Constructor. عند بدء تشغيل AngularJS ، يتم تسجيل هؤلاء مقدمي الخدمات لأول مرة في الحاقن باستخدام وصفاتهم. على سبيل المثال ، يتم تغليف مكون خدمة طلب HTTP ضمن فئة $ httpprovider ، ويتم تسجيله في الحاقن من خلال اسم "$ HTTP".
تقديم أمثلة على المكونات الوظيفية عند الطلب
المكونات الأخرى ، مثل وحدة تحكم المستخدم ، إذا كنت بحاجة إلى استخدام وظيفة HTTP ، استخدم اسم "$ HTTP" لطلب الحاقن ، يمكنك الحصول على مثيل خدمة HTTP.
حاول تعديل رمز → _ → لمعرفة ما هي خدمة ترجمة $؟
تسجيل مكون الخدمة
من منظور الحاقن ، يكون المكون مزود وظائف ، لذلك يطلق عليه مزود/مزود. في AngularJS ، يتم تغليف المزود في شكل فئة JavaScript (مُنشئ).
عادة ما يتم تحديد أسماء الخدمة بواسطة سلسلة ، مثل "$ http" لخدمة الاتصال HTTP ، "$ rootscope" لكائن نطاق الجذر ، "$ compile" لخدمة التجميع ...
تتطلب فئة المزود وظيفة get $ (مصنع الفصل). من خلال استدعاء هذه الوظيفة ، يمكن للحاقن الحصول على مثيل لمكون الخدمة.
وتسمى مجموعة المعلومات عن الاسم ووظيفة الفصل الوصفة. يحافظ الحاقن على مكتبة وصفة مركزية لإنشاء مكونات مختلفة عند الطلب. مكتبة الوصفة هذه هي في الواقع كائن التجزئة ، والمفتاح هو اسم الخدمة ، والقيمة هي تعريف الفئة.
في مثال → _ → ، نحدد فئة خدمة بسيطة ، ومثال فئة الخدمة هذه عبارة عن سلسلة: "Hello ، World!". نستخدم "Ezhello" كاسم خدمة للتسجيل في الحاقن وعرض هذا المثيل من خلال الحاقن.
الحصول على كائن الحاقن
لاستخدام وظيفة AngularJS ، يجب أولاً الحصول على الحاقن. هناك طريقتان للحصول على الحاقن.
إنشاء حاقن جديد
يمكنك إنشاء حاقن جديد باستخدام Angular.Injector ():
Angular.Injector (الوحدات النمطية ، [Strictdi]) ؛ احصل على الحاقن الذي تم إنشاؤه بالفعل
إذا تم بدء إطار AngularJS ، فيمكنك استخدام طريقة الحاقن () لكائن DOM للحصول على الحاقن الذي تم إنشاؤه بالفعل:
var element = Angular.Element (dom_element) ؛
var enjector = element.injector () ؛
استدعاء API عبر الحاقن
يحتوي الحاقن على طريقتان لمكالمات API: Invoke () و Get ().
استدعاء ()
باستخدام طريقة Invoke () للحاقن ، يمكنك الاتصال مباشرة بجسم دالة محدد من قبل المستخدم وحقن كائن الخدمة التابع من خلال معلمات الوظيفة. هذا هو استخدام التوصية والاتفاقية AngularJS:
Angular.Injector (['ng']). استدعاء (وظيفة ($ http) {// do sth. with $ http}) ؛ يحصل()يمكنك أيضًا استخدام طريقة GET () للحاقن للحصول على مثيل الخدمة بالاسم المحدد:
var my $ http = Angular.injector (['ng']). get ('$ http') ؛ // do sth. مع $ http→ _ → مثال هذه المرة ، استخدمت طريقة GET () للحصول على مثيل خدمة مباشرة والشعور به!
طريقة الحقن والمبدأ
هناك طريقتان لإبلاغ الحاقن بكائن الخدمة الذي يجب حقنه: حقن اسم المعلمة وحقن صفيف التبعية.
حقن اسم المعلمة
عندما ينفذ AngularJS وظيفة Invoke () ، فإنه يحول تعريف الوظيفة ليتم حقنه في سلسلة ، ويتحقق من جدول المعلمة الخاص به من خلال التعبيرات العادية ، وبالتالي يكتشف ويحقق كائن الخدمة الذي يعتمد عليه:
// MyFunc يعلن هذه الوظيفة تعتمد على خدمة '$ http' var myfunc = function ($ http) {// do sth. باستخدام $ http} ؛ enjector.invoke (myfunc) ؛ // سيتم تحويل تعريف myfunc إلى سلسلة لفحص اسم المعلمة.هناك مشكلة في هذا ، أي عندما نضغط رمز JavaScript ، قد يتم تغيير $ HTTP إلى اسم آخر ، مما سيؤدي إلى فشل الحقن.
تعتمد على حقن الصفيف
يستخدم AngularJS طريقة صفيف التبعية لحل المشكلة الناجمة عن تعبير ضغط الكود. في هذا الوقت ، يتم تمرير الاستدعاء () إلى صفيف. العنصر الأخير من المصفوفة هو الوظيفة التي سيتم تنفيذها فعليًا ، وتشير العناصر الأخرى إلى اسم الخدمة الذي يجب حقنه في الوظيفة. سيقوم الحاقن بحقن الكائنات المعتمدة في الوظيفة بالترتيب في الصفيف.
مع هذه الطريقة ، فإن اسم جدول المعلمة المراد حقنه غير ذي صلة:
// يعتمد MyFunc على "$ http" و "$ compile 'services var myfunc = [' $ http '،' $ compile '، function (p1 ، p2) {// do sth. مع p1 ($ http) ، p2 ($ compile)}] ؛ enjector.invoke (myfunc) ؛يتم حقن مثيل → _ → بطريقة تعتمد على الصفيف. هذه المرة ، يتم حقن مثيل خدمة Ezhello. يمكنك تغيير اسم المعلمة لمعرفة ما إذا كان يؤثر على النتيجة؟
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.