في هذه الخطوة ، ستضيف صورة مصغرة وبعض الروابط إلى قائمة الهاتف ، لكن هذه الروابط لن تعمل بعد. بعد ذلك ، ستستخدم هذه الروابط لعرض معلومات إضافية على هاتفك في الفئات.
يرجى إعادة تعيين دليل العمل:
git checkout -f step -6
الآن يجب أن تكون قادرًا على رؤية صور وروابط هاتفك في القائمة.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 5 والخطوة 6 أدناه. يمكنك رؤية الفرق الكامل في Github.
بيانات
لاحظ أن ملف phones.json يحتوي الآن على معرف فريد ورابط صورة لكل هاتف. تشير عناوين URL هذه الآن إلى التطبيق/IMG/الهواتف/الدليل.
التطبيق/الهواتف/الهواتف.
[{... "id": "Motorola-Defy-With-Motoblur" ، "Imageurl": "IMG/Phones/Motorola-Defy-With-Motoblur.0.jpg" ، "name": "Motorola Defy/U2122 with Motoblur/U2122 ، ...} ، ...]نموذج
app/index.html
... <ul> <li ng-repeat = "phone in phone | filter: query | orderby: orderprop"> <a href = "#/phones/{{phone.id}}" href = "#/phones/{{phone.id}}"> {{phone.name}} </a> <p> {{phone.snippet}} </p> </li> </ul> ...ستشير هذه الروابط إلى صفحة التفاصيل لكل هاتف في المستقبل. ومع ذلك ، من أجل إنشاء هذه الروابط ، نستخدم ربط بيانات الطائفة المزدوجة التي نتعرف عليها بالفعل في سمة HREF. في الخطوة 2 ، أضفنا الربط {{phone.name}} كمحتوى عنصر. في هذه الخطوة ، نستخدم الربط {{phone.id}} في سمة العنصر.
نضيف أيضًا صور الهاتف المحمول إلى كل سجل ، ما عليك سوى استخدام توجيه NGSRC بدلاً من علامة السمة <img> SRC. إذا استخدمنا فقط سمة SRC العادية لـ bind (<img src = "{{phone.imageurl}}">) ، فسيقوم المتصفح بتفسير tag angularjs {{التعبير}} وبدء طلب إلى urlhttp: // localhost: 8000/app/ لأنه عندما يقوم المتصفح بتحميل الصفحة ، فإنه يطلب أيضًا تحميل الصورة ، يبدأ AngularJS فقط في التجميع عند تحميل الصفحة - عندما لا يتم تجميع المتصفح لتحميل الصورة {{phone.imageurl}} بعد! سيتم تجنب هذا الموقف مع توجيه NGSRC هذا ، وسيستخدم المتصفح توجيه NGSRC لمنع الطلب على عنوان غير قانوني.
امتحان
اختبار/e2e/السيناريوهات
... إنه (يجب تقديم روابط محددة للهاتف "، الدالة () {input ('query'). enter ('nexus') ؛ element ('. الهواتف li a'). click () ؛ توقع (متصفح (). الموقع (). url ()).لقد أضفنا اختبارًا جديدًا من طرف إلى طرف للتحقق من أن التطبيق ينشئ الرابط الصحيح لعرض الجوال ، وما فوق تطبيقنا.
يمكنك الآن تحديث متصفحك واستخدام اختبار من طرف إلى طرف لمراقبة الاختبارات التي تعمل ، أو يمكنك تشغيلها على خادم AngularJS.
يمارس
قم بتغيير توجيه NG-SRC إلى سمة SRC العادية. باستخدام أدوات مثل Firebug أو Chrome Web Inspector ، أو النظر مباشرة إلى سجل الوصول إلى الخادم ، ستجد أن التطبيق الخاص بك يرسل طلبًا غير قانوني إلى /app/٪7B٪7Bphone.imageurl٪7d٪7d (أو /app/ {phone.imageurl}}).
هذه المشكلة هي أن المتصفح سوف يرسل على الفور طلبًا إلى عنوان عنوان URL الذي لم يتم تجميعه بعد عند مواجهة علامة IMG. ستبدأ AngularJS فقط في تجميع التعبير بعد تحميل الصفحة للحصول على عنوان عنوان URL الصحيح للصورة.
لخص
الآن بعد أن أضافت صور هاتفك وروابطك ، انتقل إلى الخطوة 7 ، وسوف نتعرف على قوالب تخطيط AngularJS وكيف يمكن لـ AngularJs توفير طرق عرض متعددة بسهولة لتطبيقك.
ما سبق هو عبارة عن مجموعة من المعلومات على روابط AngularJS وقوالب الصور. سوف نستمر في إضافة المعرفة ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!