في هذه الخطوة ، ستقوم بتنفيذ عرض تفاصيل الهاتف ، والتي سيتم عرضها عندما ينقر المستخدم على هاتف في قائمة الهاتف.
يرجى إعادة تعيين دليل العمل:
git checkout -f step -8
الآن عند النقر فوق هاتف في القائمة ، سيتم عرض صفحة المعلومات التفصيلية للهاتف.
من أجل تنفيذ عرض تفاصيل الهاتف المحمول ، سنستخدم $ http للحصول على البيانات ، وسنضيف أيضًا قالب عرض الهاتف.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 7 والخطوة 8 أدناه. يمكنك رؤية الفرق الكامل في Github.
بيانات
بالإضافة إلى Phones.json ، يحتوي التطبيق/ الهواتف/ الدليل أيضًا على ملف JSON لكل معلومات هاتف محمول.
التطبيق/الهواتف/nexus-s.json (شظية عينة)
{"extrafeatures": "Contour Display ، بالقرب من الاتصالات الميدانية (NFC) ، ..." ، "Android": {"OS": "Android 2.3" ، "ui": "Android"} ، ... "IMG/Phones/Nexus-S.2.jpg" ، "IMG/Phones/Nexus-S.3.jpg"] ، "Storage": {"Flash": "16384MB" ، "RAM": "512MB"}}يصف كل من هذه الملفات خصائص مختلفة من الهاتف باستخدام نفس بنية البيانات. نعرض هذه البيانات في عرض تفاصيل الهاتف.
وحدة تحكم
نستخدم خدمة HTTP $ للحصول على بيانات لتوسيع phonelistctrl. هذه هي نفس الطريقة التي تعمل بها وحدة تحكم قائمة الهاتف السابقة.
APP/JS/Controllers.JS
الوظيفة phonedetailctrl (نطاق $ ، $ routeparams ، $ http) {$ http.get ('phones/' + $ routeparams.phone + '.json'). '$ http'] ؛من أجل إنشاء عنوان URL لطلب HTTP ، نحتاج إلى استخراج $ routeparams.phoneid من المسار الحالي الذي توفره خدمة $ route.
نموذج
تم استبدال خط العنصر النائب TBD الأصلي في ملف Phone-Detail.html بالقائمة والربط الذي يشكل المعلومات التفصيلية للهاتف. لاحظ أنه هنا نستخدم علامات AngularJS {{Expression}} و ngrepeat لتقديم نموذج البيانات في العرض.
التطبيق/الجزئي/detail.html
<img ng-src = "{{phone.images [0]}}"> <h1> {{phone.name}} </h1> <p> {{phone.description}} </p> <ul> <li ng-repeat = img in phone.images " </li></ul> <ul> <li> <span> التوفر والشبكات </span> <dl> <dt> التوفر </dt> <dd ng-repeat = "التوفر في الهاتف. <dd> {{phone.additionalfeatures}} </dd> </li> </ul>امتحان
دعنا نكتب اختبار وحدة جديد ، يشبه إلى حد كبير الاختبار الذي كتبناه لـ PhonelistCtrl في الخطوة 5.
اختبار/وحدة/وحدات التحكم spec.js
... وصف ('phonedetailctrl' ، function () {var scope ، $ httpbackend ، ctrl ؛ isheach (enject (_ $ httpbackend_ ، $ rootscope ، $ routeparams ، $ controller) {$ htpbackend = _ $ httpbackend_ ؛ $ httpbackend.expectget ('phones/xyz.json'). {توقع (scope.phone).تنفيذ البرنامج النصي ./scripts/test.sh لتنفيذ الاختبار ، يجب أن ترى الإخراج التالي:
Chrome: Runner Reset .... Total 3 اختبارات (تم تمريرها: 3 ؛ فشل: 0 ؛ الأخطاء: 0) (5.00 مللي ثانية) Chrome 19.0.1084.36 Mac OS: Run 3 اختبارات (تم تمريرها: 3 ؛ فشل: 0 ؛ أخطاء 0) (5.00 مللي ثانية)
في الوقت نفسه ، أضفنا أيضًا اختبارًا شاملاً ، مشيرًا إلى صفحة تفاصيل هاتف Nexus S والتحقق من أن رأس الصفحة "Nexus S".
اختبار/e2e/السيناريوهات
... وصف ('عرض تفاصيل الهاتف' ، function () {isheach (function () {browser (). navigateto ('../../ app/index.html#/phones/nexus-s') ؛}) ؛ it ('يجب عرض nexus-s' ، وظيفة () {توقع ('phone.name'يمكنك الآن تحديث متصفحك وتشغيل الاختبار الشامل مرة أخرى ، أو يمكنك تشغيله على خادم AngularJS.
يمارس
اكتب اختبارًا باستخدام واجهة برمجة تطبيقات AngularJS من طرف إلى طرف للتحقق من الصور المصغرة الأربعة التي نعرضها على صفحة تفاصيل Nexus s.
لخص
الآن بعد أن أصبحت صفحة تفاصيل الهاتف المحمول جاهزة ، في الخطوة 9 ، سنتعلم كيفية كتابة مرشح العرض.
ما ورد أعلاه هو المعلومات على المزيد من قوالب AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!