حتى الآن ، استخدمنا ثلاث مجموعات بيانات سجلات الهاتف المحمول. الآن نستخدم AngularJS خدمة مدمجة $ http للحصول على مجموعة أكبر من بيانات سجلات الهاتف المحمول. سوف نستخدم وظيفة حقن التبعية لـ AngularJS (DI) لتوفير خدمة AngularJS لوحدة التحكم PhonelistCtrl.
يرجى إعادة تعيين دليل العمل:
git checkout -f step -5
قم بتحديث المتصفح ويجب أن ترى الآن قائمة من 20 هاتفًا.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 4 والخطوة 5 أدناه. يمكنك رؤية الفرق الكامل في Github.
بيانات
ملف التطبيق/الهواتف/الهواتف.
فيما يلي مثال على هذا الملف:
[{"Age": 13 ، "id": "Motorola-Defy-With-Motoblur" ، "Name": "Motorola Defy/U2122 with Motoblur/U2122" ، "Snippet": "هل أنت مستعد لكل شيء تطرح الحياة طريقك؟" ...} ، ...]وحدة تحكم
نستخدم خدمة AngularJS $ HTTP في وحدة التحكم لبدء طلب HTTP إلى خادم الويب الخاص بك للحصول على بيانات من ملف التطبيق/الهواتف/الهواتف. $ HTTP هي مجرد واحدة من العديد من الخدمات المدمجة في AngularJs التي يمكنها التعامل مع العمليات المشتركة لبعض تطبيقات الويب. يمكن لـ AngularJs ضخ هذه الخدمات في أي مكان تحتاجه.
تتم إدارة الخدمات من خلال نظام angularjs التبعية DI. يمكن لخدمات حقن التبعية أن تجعل تطبيقات الويب الخاصة بك مصممة بشكل جيد (مثل فصل مكونات طبقة العرض والبيانات والتحكم) والاقتران بشكل فضفاض (لا يحتاج المكون إلى حل مشاكل التبعية بين المكونات ، يتم التعامل معها جميعًا بواسطة نظام DI الفرعي).
APP/JS/Controllers.JS
وظيفة phonelistctrl (scope $ ، $ http) {$ http.get ('هواتف/هواتف. $ scope.orderprop = 'age' ؛}$ HTTP يبدأ طلب HTTP للحصول على خادم الويب ويطلب الهاتف/الهواتف. يستجيب الخادم بالبيانات من ملف JSON. (قد يتم إنشاء هذه الاستجابة ديناميكيًا من خادم الواجهة الخلفية في الوقت الفعلي. ولكن بالنسبة للمتصفحات ، تبدو جميعها متشابهة. من أجل البساطة ، استخدمنا ببساطة ملف JSON في البرنامج التعليمي.)
تستخدم خدمة $ HTTP النجاح لإرجاع [استجابة الكائن] [ng. $ q]. عند وصول الاستجابة غير المتزامنة ، يتم استخدام وظيفة استجابة الكائن هذه لمعالجة بيانات استجابة الخادم وتعيين البيانات إلى نموذج بيانات الهواتف المنحدر. لقد لاحظت أن AngularJS سوف يكتشف تلقائيًا استجابة JSON هذه وتم تحليلنا لنا!
من أجل استخدام خدمات AngularJS ، تحتاج فقط إلى إعلان اسم الخدمة المطلوبة كمعلمة في مُنشئ وحدة التحكم ، مثل هذا:
الدالة phonelistctrl (نطاق $ ، $ http) {...}
عندما يتم بناء وحدة التحكم ، فإن حاقن التبعية في AngularJS يحقن هذه الخدمات في وحدة التحكم الخاصة بك. بطبيعة الحال ، سوف يتعامل حاقن التبعية أيضًا مع أي تبعيات متعدية قد توجد فيها الخدمة المطلوبة (تعتمد خدمة واحدة عادة على الخدمات الأخرى).
لاحظ أن أسماء المعلمات مهمة للغاية لأن الحقن سوف تستخدمها للعثور على التبعيات المقابلة.
عادة تسمية البادئة "$"
يمكنك إنشاء خدمتك الخاصة ، وسوف نتعلمها فعليًا في الخطوة 11. كعادة تسمية ، وخدمات AngularJS المدمجة ، والطرق التي يتم تحديدها ، وبعض واجهات برمجة تطبيقات AngularJS الأخرى ، تستخدم جميعها بادئة "$" قبل الاسم. لا تستخدم بادئة "$" لتسمية الخدمات والنماذج الخاصة بك ، وإلا فقد تحدث تعارضات الأسماء.
حول ضغط JS
نظرًا لأن AngularJS يثير اسم خدمة التبعية من خلال اسم المعلمة لمؤسس وحدة التحكم. لذلك إذا كنت ترغب في ضغط رمز JS لوحدة التحكم PhonelistCtrl ، فسيتم ضغط جميع معلماتها في نفس الوقت. في هذا الوقت ، لن يحدد نظام حقن التبعية الخدمة بشكل صحيح.
للتغلب على المشكلة الناجمة عن الضغط ، ما عليك سوى تعيين صفيف يعتمد على معرفات الخدمة لخاصية حقن $ في وظيفة وحدة التحكم ، تمامًا مثل السطر الأخير الذي تم تعليقه:
phonelistctrl. $ enject = ['$ scope' ، '$ http'] ؛
يمكن أيضًا استخدام طريقة أخرى لتحديد قائمة التبعية وتجنب مشاكل الضغط - استخدم صفيف JavaScript لإنشاء وحدة التحكم: ضع الخدمة ليتم حقنها في مجموعة من الأوتار (تمثل اسم التبعية) ، والعنصر الأخير من الصفيف هو وظيفة طريقة وحدة التحكم:
var phonelistctrl = ['$ scope' ، '$ http' ، function ($ scope ، $ http) { / * constructor body * /}] ؛
يمكن أن تعمل كلتا الطريقتين المذكورة أعلاه بشكل مثالي مع أي وظيفة يمكن أن يضخها AngularJs. ما هي الطريقة التي لاختيارها تعتمد بالكامل على نمط البرمجة في مشروعك. يوصى باستخدام طريقة الصفيف.
امتحان
اختبار/وحدة/وحدات تحكم.
نظرًا لأننا نستخدم الآن حقن التبعية ويحتوي وحدة التحكم لدينا أيضًا على العديد من خدمات التبعية ، فهي معقدة بعض الشيء لإنشاء اختبارات لوحدات التحكم لدينا. نحتاج إلى استخدام عمليات جديدة وتوفير بعض التطبيقات الزائفة للمُنشئ بما في ذلك $ HTTP. ومع ذلك ، فإن الطريقة الموصى بها (وحتى أبسط) هي إنشاء وحدة تحكم في بيئة اختبار ، باستخدام نفس طريقة AngularJS في السيناريو التالي:
وصف ('phonecat controllers' ، function () {وصف ('phonelistctrl' ، function () {var scope ، ctrl ، $ httpbackend ؛ inteach (enject (_ $ httpbackend_ $ httpbackend.expectget ('phones.json').ملاحظة: نظرًا لأننا قمنا بتحميل الياسمين و angular mock.js في بيئة الاختبار ، لدينا طريقتان مساعدان ، الوحدة النمطية والحقن ، لمساعدتنا في الحصول على الحاقن وتكوينه.
باستخدام الطريقة التالية ، نقوم بإنشاء وحدة تحكم في بيئة الاختبار:
نستخدم طريقة الحقن لحقن $ rootscope ووحدة التحكم $ و $ httpbackend service في وظيفة jasmine قبل. هذه الحالات كلها من حاقن ، ولكن يتم إعادة إنشاء هذا الحاقن داخل كل اختبار. هذا يضمن أن كل اختبار يبدأ من نقطة انطلاق معروفة وأن كل اختبار مستقل عن الاختبارات الأخرى.
اتصل بـ $ rootscope. $ new () لإنشاء نطاق جديد لوحدة التحكم لدينا.
يتم تمرير وظيفة phonelistctrl والنطاق الذي تم إنشاؤه للتو كمعلمات إلى وظيفة وحدة تحكم $ المحقونة.
نظرًا لأن الكود الحالي الخاص بنا يستخدم خدمة $ HTTP للحصول على بيانات قائمة الهاتف في وحدة التحكم قبل إنشاء مجموعة PhonelistCtrl الفرعية ، نحتاج إلى إخبار جناح الاختبار بانتظار طلب من وحدة التحكم. يمكننا أن نفعل هذا:
حقن خدمة الطلب $ httpbackend في وظيفة قبلنا. هذا هو النسخة الزائفة من هذه الخدمة ، والقيام بذلك يساعد في التعامل مع جميع طلبات XHR و JSONP في بيئة المنتج. يتيح لك النسخة الزائفة للخدمة كتابة الاختبارات دون النظر في واجهات برمجة التطبيقات الأصلية والولايات العالمية - يمكن لأي شخص أن يشكل كابوسًا للاختبار.
استخدم طريقة $ httpbackend.expectget لإخبار خدمة httpbackend $ لانتظار طلب HTTP وإخبارها بكيفية الرد عليها. لاحظ أنه لن يتم إصدار الاستجابة حتى ندعو طريقة $ httpbackend.flush.
الآن،
(يجب إنشاء نموذج "هواتف" بهاتفان تم جلبهما من XHR '، function () {توقع (scope.phones) .tobeundefined () ؛ $ httpbackend.flush () ؛في المتصفح ، ندعو $ httpbackend.flush () لمسح قائمة انتظار طلب (Flush). سيمكن هذا الوعد الذي تم إرجاعه بواسطة خدمة HTTP $ (انظر هنا لما هو الوعد) من أن يتم تفسيرها على أنها استجابة قياسية.
أنشأنا بعض التأكيدات للتحقق من أن نموذج بيانات الهاتف المحمول موجود بالفعل.
أخيرًا ، نتحقق من ضبط القيمة الافتراضية لـ OrderProp بشكل صحيح:
IT (يجب تعيين القيمة الافتراضية لنموذج OrderProp "، الدالة () {توقع (scope.orderProp) .tobe ('age') ؛}) ؛يمارس
إضافة {{هواتف | json}} الربط في نهاية index.html ومراقبة قائمة الهواتف المحمولة بتنسيق JSON.
في وحدة تحكم PhonelistCtrl ، معالجة Preprocated استجابة HTTP بحيث يتم عرض الخمسة الأولى فقط من قائمة الهاتف. استخدم الكود التالي في وظيفة رد الاتصال HTTP $:
$ scope.phones = data.splice (0 ، 5) ؛
لخص
الآن يجب أن تشعر بمدى سهولة استخدام خدمات AngularJS (كل هذا بفضل آلية حقن التبعية لخدمات AngularJS) ، انتقل إلى الخطوة 6 وستضيف صورًا مصغرة وروابط إلى هاتفك.
شكرًا لك على دعمك لهذا الموقع واستمر في تحديث المقالات ذات الصلة في المستقبل!