في هذه الخطوة ، ستتعلم كيفية إنشاء قالب تخطيط وإنشاء تطبيق مع طرق عرض متعددة من خلال وظيفة التوجيه.
يرجى إعادة تعيين دليل العمل:
git checkout -f الخطوة 7
لاحظ أنه الآن عندما تذهب إلى App/Index.html ، سيتم إعادة توجيهك إلى App/Index.html#/هواتف ويتم عرض قائمة الهاتف نفسها في المتصفح. عند النقر فوق رابط الهاتف المحمول ، يتم أيضًا عرض قائمة تفاصيل الهاتف المحمول.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 6 والخطوة 7 أدناه. يمكنك رؤية الفرق الكامل في Github.
قوالب متعددة الرؤية والتوجيه والتخطيط
تتطور تطبيقاتنا ببطء وتصبح أكثر تعقيدًا. قبل الخطوة 7 ، يوفر التطبيق لمستخدمينا فقط واجهة بسيطة (قائمة بجميع الهواتف) ، وجميع رموز القالب موجودة في ملف index.html. الخطوة التالية هي إضافة صفحة تعرض تفاصيل كل هاتف في قائمتنا.
لإضافة عرض التفاصيل ، يمكننا توسيع index.html لتضمين رمز القالب لكلا العرضين في نفس الوقت ، ولكن هذا سيؤدي بسرعة إلى مشكلة كبيرة. بدلاً من ذلك ، نحتاج إلى تحويل قالب index.html إلى "قالب تخطيط". هذا قالب شائع بالنسبة لنا لتطبيق جميع المشاهدات. ثم يتم شغل "قوالب التخطيط المحلية" الأخرى وفقًا لـ "التوجيه" الحالي ، وبالتالي تشكيل طريقة عرض كاملة لعرضها على المستخدم.
يتم الإعلان عن المسار المطبق في AngularJS من خلال $ Routeprovider ، وهو مزود خدمة Route $. تتيح هذه الخدمة تكامل وحدات التحكم بسهولة وقوالب العرض وعنوان URL للمتصفح الحالي. من خلال تطبيق هذه الميزة ، يمكننا تنفيذ روابط عميقة ، والتي تتيح لنا استخدام سجل المتصفح (التراجع أو التنقل إلى الأمام) والإشارات المرجعية.
حول حقن التبعية (DI) ، الحاقن ومقدمي الخدمات
كما تعلمت من واحدة السابقة ، فإن حقن التبعية هو ميزة أساسية لـ AngularJS ، لذلك عليك أن تعرف قليلاً عن كيفية عمل هذا الرجل.
عندما يتم إنشاء أحذية التطبيق ، ستنشئ AngularJS حاقنًا ، والذي سيحتاجه جميع الخدمات التي يتم حقنها بعد تطبيقنا. هذا الحاقن نفسه لا يعرف ما يفعله $ HTTP و $ Route. في الواقع ، ما لم يتم تكوينه أثناء تعريف الوحدة النمطية ، فإنه لا يعرف وجود هذه الخدمات على الإطلاق. المسؤولية الوحيدة للحاقن هي تحميل وحدات الخدمة المحددة ، وتسجيل جميع مقدمي الخدمات المحددة في هذه الوحدات ، وحقن التبعيات (الخدمات) في وظيفة محددة عند الحاجة. يتم إنشاء هذه التبعيات من قبل مزودها "كسول" (تم تحميله إذا لزم الأمر).
المزود هو كائن يوفر (ينشئ) مثيل خدمة ويوفر واجهة API خارجيًا. يمكن استخدامه للتحكم في خلق وسلوك وقت التشغيل للخدمة. بالنسبة لخدمة $ route ، يوفر $ Routeprovider واجهة API للعالم الخارجي ، مما يتيح لك تحديد قواعد التوجيه لتطبيقك من خلال واجهة API.
تحل وحدة AngularJS مشكلتي إزالة الحالة العالمية من التطبيق وتوفير طرق لتكوين الحاقن. على عكس AMD أو requist.js (مكتبتان ليسا AngularJS) ، لا تحاول وحدة AngularJS حل مشكلة ترتيب تحميل البرنامج النصي وتحميل النص الكسول. هذه الأهداف لا علاقة لها بالمشاكل التي يحتاجها AngularJS إلى حلها ، بحيث يمكن أن تتعايش هذه الوحدات لتحقيق أهدافها.
وحدة التطبيق
APP/JS/APP.JS
Angular.Module ('phonecat' ، []). config (['$ routeprovider' ، function ($ routeprovider) {$ routeprovider. عندما ('/هواتف' ، {templateurl: 'partials/phone-list.html' ، controller: phonelistctrl}). phonedetailctrl}).من أجل تكوين التوجيه لتطبيقنا ، نحتاج إلى إنشاء وحدة نمطية للتطبيق. نحن نسمي هذه الوحدة phonecat ، وباستخدام configapi ، نطلب حقن $ routeProvider في وظيفة التكوين الخاصة بنا واستخدام $ routeprovider.henapi لتحديد قواعد التوجيه الخاصة بنا.
لاحظ أنه خلال مرحلة تكوين الحاقن ، يمكن أيضًا حقن المزود في نفس الوقت ، ولكن بمجرد إنشاء الحاقن وبدأ مثيل الخدمة ، لن يتم استردادها من قبل العالم الخارجي.
يتم تعريف قواعد التوجيه الخاصة بنا على النحو التالي
عندما يكون شريحة خريطة URL /هواتف ، سيتم عرض عرض قائمة الهاتف المحمول. لبناء هذا العرض ، يستخدم AngularJS قالب الهاتف. html ووحدة تحكم phonelistctrl.
عندما يكون شريحة خريطة عنوان URL /الهاتف /: PhoneID ، يتم عرض عرض تفاصيل الهاتف. هنا: PhoneID هو الجزء المتغير من عنوان URL. من أجل إنشاء عرض مفصل للهاتف ، يستخدم AngularJS قالب Detail.html ووحدة التحكم phonedetailctrl.
نقوم بإعادة استخدام وحدة تحكم Phonelistctrl التي أنشأناها من قبل ، وفي الوقت نفسه نضيف وحدة تحكم جديدة phonedetailctrl إلى العرض التفصيلي للهاتف وتخزينها في ملف App/JS/Controlers.js.
$ Route.Ollywise ({redirectto: ' /phones'}) يتسبب في إعادة توجيه /الهواتف التي يتم تشغيلها عندما لا يمكن أن يتطابق عنوان المتصفح مع أي من قواعد التوجيه الخاصة بنا.
لاحظ أنه في إعلان المسار الثاني: استخدام المعلمة phoneid. تستخدم خدمة Route $ إعلان التوجيه /الهواتف /: PhoneID كقالب يطابق عنوان URL الحالي. سيتم استخراج جميع المتغيرات المعلنة بـ: الرمز (هنا هو الهواتف المتغيرة) وتخزينها في كائن $ routeparams.
لكي يوجه تطبيقنا الوحدة النمطية التي تم إنشاؤها حديثًا ، نحتاج أيضًا إلى تحديد اسم الوحدة النمطية على قيمة توجيه NGAPP:
app/index.html
<! doctype html> <html lang = "en" ng-app = "phonecat"> ...
وحدة تحكم
APP/JS/Controllers.JS
... الوظيفة phonedetailctrl (Scope $ ، $ courneparams) {$ scope.phoneid = $ routeparams.phone ؛} // phonedetailctrl. $ enject = ['$ scope' ، '$ routeparams'] ؛نموذج
عادة ما يتم استخدام خدمة Route $ مع توجيه NGVIEW. يتمثل دور توجيه NGVIEW في تحميل قالب العرض المقابل في قالب التخطيط للمسار الحالي.
app/index.html
<html lang = "en" ng-app = "phonecat"> <head> ... <script src = "lib/Angular/Angular.js"> </script> <script src = "js/app.js"> </script> <script src = js/controlers.js ng-view> </viv> </body> </html>
لاحظ أننا أزلنا معظم الكود في قالب INDEX.HTML ، وقمنا فقط بوضع حاوية <viv> ، التي تحتوي على سمة NG-View. يتم الآن وضع الرمز الذي قمنا بحذفه في قالب الهاتف. html:
التطبيق/الجزئي/قائمة الهاتف. html
<viv> <viv> <viv> <!-محتوى الشريط الجانبي-> البحث: <input ng-model = "query"> SITE بواسطة: <SELECT NG-MODEL = "OrderProp"> <Opture value = "name"> alphabetical </soph> <orpue value = "Age"> أحدث </option> مرشح: Query |. <p> {{phone.snippet}} </p> </li></ul> </viv> </viv> </viv>في الوقت نفسه ، نضيف قالب العنصر النائب إلى عرض تفاصيل الهاتف المحمول.
التطبيق/الجزئي/detail.html
TBD: عرض التفاصيل لـ {{phoneid}}
لاحظ أن قالب التخطيط الخاص بنا لم يضاف خصائص وحدة تحكم PhonelistCtrl أو Phonedetailctrl!
امتحان
للتحقق تلقائيًا من أن كل شيء متكامل جيدًا ، نحتاج إلى كتابة بعض الاختبارات الشاملة ، والانتقال إلى عناوين URL مختلفة والتحقق من تقديم العرض الصحيح.
... إنه (يجب إعادة توجيه الفهرس Browser ()
يمكنك الآن تحديث متصفحك وتشغيل الاختبار الشامل مرة أخرى ، أو يمكنك تشغيله على خادم AngularJS.
يمارس
حاول إضافة {{orderprop}} الربط إلى index.html ولا شيء يتغير عندما تكون في عرض قائمة هاتفك. وذلك لأن نموذج OrderProp مرئي فقط تحت نطاق إدارة PhonelistCtrl ، والذي يرتبط بعنصر <div ng-view>. إذا قمت بإضافة نفس الربط إلى قالب الهاتف. html ، فسيتم تقديم الربط كما تخيلت.
لخص
بعد إعداد المسار وتنفيذ عرض قائمة الهاتف المحمول ، يمكننا بالفعل المتابعة إلى الخطوة 8 لتنفيذ عرض تفاصيل الهاتف المحمول.
ما سبق هو فرز معلومات توجيه AngularJS ومعرفة العرض المتعددة ، وسنستمر في إضافة المعرفة ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!