الآن سوف ننتقل إلى
التمرين التالي حيث سنقوم بإنشاء
مكون جديد وإضافته إلى تطبيق Angular الخاص بنا.
بعد ذلك، سنستفيد من هذا المكون للتحكم في جزء
من الشاشة الذي قمنا بتصميمه لتطبيق Angular الخاص بنا.
الشاشة لتطبيق الزاوي لدينا مملة جدا في الوقت الراهن.
كل ما لدينا هو شريط أدوات في الأعلى ثم فارغة،
شاشة بيضاء هنا، ولكن هذا يعطينا أيضا الأفكار.
يمكننا الآن أخذ محتوى إضافي ثم
وضعه في هذا الجزء من الشاشة هنا. كيف نفعل ذلك؟
يمكننا إنشاء مكون جديد ومن ثم
تسليم هذا الجزء من الشاشة إلى هذا المكون ونقول،
«أنت تهتم بتقديم ما تريد في ذلك الجزء من الشاشة.»
لذلك، سيتم التحكم في هذا العرض من قبل المكون الجديد.
كيف نفعل ذلك؟ دعونا نذهب من خلال التمرين الآن.
للبدء في التمرين،
انتقل إلى تعليمات التمرين التي تتبع هذا الفيديو بالذات.
ثم في تعليمات التمرين،
سترى بعض موارد التمرين،
وهو ملف مضغوط متاح لك.
تحميل هذا الملف مضغوط إلى جهاز الكمبيوتر الخاص بك،
وهذا سوف تعطيك ملفات images.zip.
لذا، فقط احفظه كملف images.zip إلى مجلد التنزيلات الخاص بك
، وفك ضغطه، ومن ثم سيعطيك هذا
مجلد صور يحتوي على
مجموعة من الصور التي سنقوم بالاستفادة منها في تطبيقنا.
قم بفك ضغط ملف images.zip الذي قمت بتنزيله للتو،
ونقل ملف images.zip هذا إلى مشروعك،
وداخل مشروعك،
إلى مجلد المصادر والأصول هنا.
لذلك، مرة أخرى، نقل مجلد الصور التي تحصل عليها عن طريق
فك ضغط ملف images.zip ثم نقل مجلد الصور هذا إلى التطبيق الخاص بك،
لذلك، داخل التطبيق الخاص بك،
تحت المصادر والأصول المجلد الفرعي.
ستكون هذه الصور التي يتم توفيرها هنا
متاحة للاستخدام داخل تطبيق Angular الخاص بك.
الآن، سنقوم باستخدام CLI Angular
لإنشاء مكون تلقائيًا لنا وإضافته إلى تطبيقنا Angular.
لذلك، في المحطة،
انتقل إلى المجلد الذي يحتوي على تطبيق Angular الخاص بك واكتب
ng قائمة المكونات.
لذلك، سنقوم بتسمية هذا المكون كما مينوكومبوننت.
سيحتوي هذا MenuComponent
على قائمة المطعم الذي نقوم بإعداد تطبيق Angular الخاص بنا.
لذلك، عند كتابة
هذا، سيؤدي ذلك تلقائيًا إلى إنشاء
MenuComponent ثم إضافته إلى تطبيق Angular الخاص بك.
سيتم إنشاء هذا MenuComponent وإضافته
إلى مجلد المصدر/التطبيق/القائمة من التطبيق الخاص بك.
لذلك، فإنه سيتم إنشاء مجموعة من الملفات في مجلد القائمة.
لذلك، يمكنك أن ترى أنه يقوم بإنشاء ملف SCSS،
ملف HTML، وملف TS،
ثم شيء يسمى ملف TS الطيفي.
سنعود إلى ذلك لاحقاً
ثم، أيضًا، سيقوم بتحديث ملف.ts module.ts الخاص بالتطبيق.
لذلك، دعونا نذهب ونلقي نظرة على ما حدث للتو عندما قمت
بإنشاء هذا MenuComponent وإضافته إلى تطبيق Angular الخاص بك.
دعونا نذهب إلى المحرر.
القادمة إلى المحرر لدينا،
ستلاحظ الآن أنه،
في مجلد التطبيق،
هناك مجلد جديد يسمى القائمة هناك،
وهذا المجلد القائمة يحتوي على جميع الملفات ذات الصلة مينوكومبوننت هنا.
يتبع CLI الزاوي دليل النمط القياسي الزاوي.
يقترح دليل النمط أنه يجب وضع كل مكون
في مجلده الخاص كما هو موضح هنا،
وأنا أحب هذا إلى حد كبير لأنني مهووس جدا حول
الحفاظ عليه التسلسل الهرمي نظيفة لمجلدات التطبيق الخاصة بي هنا.
لذلك، هذا يعمل بشكل جيد جدا بالنسبة لي.
بعض الناس يحبون التسلسل الهرمي المسطح،
ولكن أنا فقط الحصول على الخلط مع ذلك الجزء.
لذلك، أنا أفضل تخزين كل مكون في المجلد الخاص به.
لذلك، فإنه يعمل بشكل جيد بالنسبة لي.
الآن، إذا قمت بفتح ملف.ts module.ts
التطبيق، ستلاحظ أنه قد تم تحديث ملف module.ts التطبيق
عن طريق تضمين استيراد آخر في ملف module.ts التطبيق.
لذلك، ترى أنه، جنبا إلى جنب مع AppComponent،
تمت إضافة MenuComponent تلقائيا في كاستيراد إلى وحدة التطبيق الخاصة بك.
لذا، هذا يعني أن MenuComponent
متاح الآن لتطبيق Angular الخاص بك ليتم استخدامه.
أيضا، إذا قمت بالتحقق من خاصية الإعلانات داخل الديكور نغمودول،
سترى أنه في خاصية الإعلانات،
بالإضافة إلى أبكومبوننت،
لديك أيضا مينوكومبوننت المدرجة.
هذا هو السبب في أنني أحب Angular CLI،
لأنه يبسط كل هذا العمل بالنسبة لي.
إذا كان لي أن تفعل ذلك باليد،
وسوف تضطر إلى الذهاب يدويا إلى module.ts التطبيق ثم اكتب في كل هذا الرمز
هناك، وهناك احتمال كبير أن ينتهي بي الأمر ارتكاب الأخطاء هناك.
لذلك، نحن نوفر أنفسنا الكثير من المتاعب باستخدام كلي الزاوي.
لذا، هذا هو السبب في أنني وقعت في الحب مع
Angular CLI لإنشاء تطبيقات Angular الخاصة بي.
لذلك، مع ذلك، قمنا بإعداد
مينوكومبوننت لدينا لتكون متاحة لتطبيق الزاوي لدينا.
الآن، أين أنا ذاهب للاستفادة من مينوكومبوننت؟
أنا ذاهب للاستفادة من مينوكومبوننت داخل بلدي قالب أبكومبونينتس.
لذلك، سأذهب إلى قالب AppComponents ثم قم
بتضمين MenuComponent هنا في AppComponent الخاص بي.
لذلك، فإن ذلك سوف يسلم أساسا هذا الجزء من الشاشة إلى بلدي مينوكومبوننت.
كيف نفعل ذلك؟
للقيام بذلك، سنلقي نظرة سريعة على ملف MenuComponent.ts.
لذلك، عند فتح الملف MenuComponent.ts،
سترى أن محدد MenuComponent قد تم تعريفه كقائمة التطبيق.
لذا، هذا هو اسم المحدد القياسي الذي يعطيه CLI Angular للمكونات الخاصة بك.
يمكنك تغيير هذا إذا كنت تريد،
ولكن أيا كان المحدد الذي تحدده هنا، من
شأنه أن يشكل العلامات التي تستخدمها لتضمينه في ملف القالب الخاص بك.
لذلك، والعودة إلى AppComponent.html،
الآن، إذا كنت ترغب في تضمين ملف القائمة هنا،
لذلك سأقول فقط،
علامة القائمة التطبيق وفويلا،
يتم تسليم هذا الجزء من الشاشة الآن إلى مينوكومبوننت بلدي،
والامر متروك لمينوكومبوننت أن تقرر ما يريد أن يضع في هناك.
لذلك، مهما تم تعريفه،
سيتم وضع قالب MenuComponents في مكانه هنا.
لذلك، الآن، كل ما تبقى لنا هو الذهاب وإعداد
مينوكومبوننت لدينا لإظهار المعلومات المناسبة بالنسبة لنا.
دعونا حفظ التغييرات،
وبعد ذلك سوف ننتقل إلى
الخطوة التالية حيث سنقوم بإنشاء القائمة لمطعمنا باستخدام MenuComponent.
قبل أن أفعل ذلك،
ما سأقوم به هو،
انتقل إلى مجلد التطبيق هنا،
ثم في مجلد التطبيق،
سأقوم بإنشاء مجلد فرعي جديد واسمه كمجلد فرعي مشترك.
الآن، أي ملفات سأقوم بمشاركتها عبر مكونات مختلفة،
سأقوم بوضعها في المجلد المشترك هنا.
الآن، داخل المجلد المشترك،
سأقوم بإنشاء ملف جديد باسم dish.ts.
داخل هذا dish.ts، سأقوم بإنشاء فئة لتحديد
طبق وجعله متاحًا للمكونات المتبقية لاستخدامها.
لذلك، لتحديد فئة تيبسكريبت هنا،
سأقول التصدير،
لذلك أنا تصدير هذه الفئة تيبسكريبت هنا،
فئة التصدير، وبعد ذلك سوف تسمية الطبقة كطبق.
داخل فئة الطبق هذه،
يمكنني الآن تحديد خصائص مختلفة.
لذلك، بالنسبة لفئة الطبق،
سأحدد خاصية واحدة،
وهي معرّف، والذي أعرّفه كسلسلة.
الآن، لاحظ، إذا كنت قادمًا من عالم جافا سكريبت،
في JavaScript، لا تحتاج إلى تحديد نوع أي متغير.
يجلب TypeScript هذا المرفق لك لتحديد النوع لكل متغير.
لذا، إذا قمت بتحديد الاسم والعمود والسلسلة،
فهذا يعني أن متغير الاسم سيكون دائمًا من نوع السلسلة.
لذا، إذا حاولت تعيين عدد صحيح للاسم،
فسيقوم مترجم TypeScript
بالتقاط ذلك تلقائيًا لك ثم يخبرك بوجود خطأ.
هذا هو السبب، باستخدام TypeScript،
يمكنك تقليل عدد الأخطاء التي قد تسببها.
جافا سكريبت تقليديا لا تفعل هذا
التحقق من الخطأ لأنه ليس لديها أي مفهوم لأنواع البيانات.
ولكن إذا كنت قادمًا من لغة برمجة تقليدية مثل C ++ أو Java،
فأنت على دراية كبيرة بأنواع البيانات وأنواع
البيانات البدائية وأنواع
أخرى من أنواع البيانات التي تم تعريفها بالفعل في اللغة.
يجلب TypeScript هذه الميزة إلى JavaScript أو بالأحرى كجزء من TypeScript،
والتي تمكنك من تحديد المتغيرات وإرفاق أنواع بتلك المتغيرات،
وبالتالي اسم TypeScript.
لذلك، بالنسبة للطبق،
سأقوم بإنشاء خاصية اسم.
ثم سأقوم بإنشاء خاصية صورة،
وهي أيضًا سلسلة.
ستكون سلسلة الصور هذه عبارة عن سلسلة تشير
إلى عنوان URL للصورة التي سأستخدمها لهذا الطبق المعين.
ثم سوف تحديد فئة لهذا الطبق كما أيضا سلسلة أخرى واردة كما منطقية،
تسمية كسلسلة.
السعر كسلسلة ثم وصف كسلسلة.
لذلك، هذه هي الخصائص التي أربطها مع فئة الطبق.
لذلك، وهذا سوف يحدد أطباق مختلفة في قائمتي من مطعمي،
ولكل طبق أحتاج إلى تحديد كل هذه الخصائص المختلفة.
الآن، لماذا أحتاج ذلك؟
هذا سيساعدني على بناء قائمة الطعام لمطعمي كما سترون قريباً
لذلك، مع هذا، ونحن استكمال تعريف صفي هناك.
دعونا حفظ التغييرات على ملف dish.ts.
الآن، هذا الملف dish.ts تصدير فئة.
الآن، يمكنني استيراد هذه الفئة إلى أي من
ملفات البرنامج النصي نوع المكون من طلبي.
بعد ذلك، سأقوم بالتبديل إلى ملف menu.component.ts الخاص بي.
داخل ملف menu.component.ts بالإضافة إلى استيراد المكون،
سأرى أيضًا أنك تقوم باستيراد OnInit هناك.
سنأتي إلى جزء أونينيت في واحدة من التدريبات في وقت لاحق.
سأشرح ماذا يفعل ذلك في تمرين لاحق
سنقوم أيضًا باستيراد الفئة الجديدة التي أنشأناها تسمى فئة الطبق.
لماذا نقوم باستيراد فئة الطبق هذه؟
حتى نتمكن من استخدام ذلك كنوع لمتغير أقوم بتعريفه هنا.
إذاً، أين صف الطبق هذا؟
هو في.. /مشتركة/مجلد الطبق.
لذلك، هذا هو في مجلد الطبق المشترك أعلاه هناك.
ثم سترى أننا حددنا مكون القائمة هنا.
لذلك، يمكنك أن ترى أنه يقول،
«مكون قائمة فئة التصدير» ثم يقول، «تنفيذ على ذلك».
سنعود إلى ذلك بعد قليل
ترى أيضا أن هناك منشئ وهناك طريقة واحدة أخرى هنا تسمى NGonIt.
سنستخدم هذه في بعض التدريبات اللاحقة
لذلك، دعونا فقط ترك الأمر هناك على هذا النحو ونحن سوف
نعود لفهم ما هو ذلك في فترة قصيرة.
أيضا، لاحظ أن لهذا المكون،
يتم تعريف القالب في عنصر القائمة نقطة HTML،
وعناوين URL نمط المعرفة هناك.
الآن، بالإضافة إلى ذلك، في فئة مكون القائمة الخاصة بي،
سأقوم بتضمين متغير جديد يسمى
الأطباق التي ستكون مجموعة من نوع الطبق.
حسناً؟ ثم أنا ذاهب ببساطة لتشمل مجموعة من
الأطباق في بلدي متغير الأطباق التي قمت بتعريفها هنا.
الآن، لكتابة كل شيء في اليد سوف يستغرق لي الكثير من الوقت.
لذلك بدلا من ذلك، ما أود أن أقترح عليك القيام به هو مجرد الذهاب ونسخ
المحتوى مباشرة من التعليمات التي تتبع هذا الفيديو.
إذاً، هذا ما سأفعله
ثم عد ولصق هذا هنا.
يمكنك الآن أن ترى أن قمت بقطع ولصق المعلومات
لجميع أطباقي من التعليمات هنا.
لذلك، هذا يكمل مجموعة من جميع الأطباق التي تم تعريفها في تعليماتي.
لذلك، وهذا هو أسهل طريقة للحصول على عقد من هذه المعلومات.
لذلك، مجرد قطع ولصقه من هناك.
الآن، لاحظ أنه لهذا الطبق،
كل واحد منهم هو كائن جافا سكريبت هنا.
لذلك، يمكن تعيين ذلك في فئة البرنامج النصي نوع المقابلة هناك.
لذلك، يمكنك أن ترى أن كل كائن جافا سكريبت له خصائص هناك،
وهذه الخصائص تتطابق تماما مع الخصائص التي قمت بتعريفها لفئة الطبق الخاص بي.
لذا، بمجرد تحديد هذا،
ستصبح هذه الأطباق الآن مجموعة من
الأطباق وهذا سيصبح متاحًا
لي لاستخدامه عند تحديد قالب HTML الخاص بي لقائمتي.
دعونا حفظ التغييرات التي قمنا بها حتى الآن ومن ثم سنقوم
بفتح ملف menu.component.html.
لذلك، سنذهب إلى ملف menu.component.html.
سترى أنه في ملف menu.component.html،
لديك حاليًا فقط P مع القائمة تعمل هنا.
لذلك، إذا قمت بلصقه هناك ثم رؤية التطبيق يعمل،
كنت قد رأيت فقط هذه القائمة تعمل على الشاشة.
أنا ذاهب لاستبدال هذا مع رمز القالب الخاص بي هنا.
هذا هو المكان الذي سأخذ مساعدة من تخطيط المرن الزاوي لمساعدتي على
وضع المحتوى الخاص بي بشكل جيد في شاشتي.
لذلك، للبدء،
سأبدأ مع ديف،
والتي سوف أطبق فئة تسمى الحاوية.
سأقوم بتعريف فئة الحاوية باستخدام
بعض رموز CSS في وقت لاحق قليلاً في هذا التمرين.
لذلك، سوف أطبق حاوية الصف هنا.
سأقوم أيضًا بتعريف خاصية تسمى fxlayout.
سمة تسمى fxlayout.
الآن، هذا fxlayout هو سمة
أن تخطيط المرن الزاوي يسمح لي بالتطبيق على div.
يحدد هذا ما إذا كان
يجب وضع المحتوى المختلف الذي أدرجه داخل تلك div إما أفقياً أو رأسياً.
لذا، سأحدد هذا ليكون عمودًا.
لذلك، مهما كان المحتوى الذي
أدرجه داخل هذا div، سيتم وضعه عموديًا أسفل الآخر على شاشتي.
إذا كنت قد رأيت طريقة الشبكة للعمل مع المحتوى في Bootstrap،
فسترى أن هذا يخبرني بشكل أساسي أنني
سأضع كل شيء في عمود واحد هناك.
لا تخلط بين هذا العمود وعمود Bootstrap من شبكة Bootstrap.
إنهما شيئان مختلفان
هنا، السمة هي fxlayout وأحدد العمود.
يمكنني أيضًا تحديد هذا كصف،
مما يعني أنه سيتم وضع المحتوى أفقيًا.
الآن أيضا، سمة واحدة أخرى أنا ذاهب لتحديد لهذا هو فكسلايوتغاب،
والتي سوف تحدد كما 10 بكسل.
لذلك، ما يعنيه هذا هو أنه أيا كان المحتوى الذي أدرجه هنا
سيتم فصله عن بعضها البعض بواسطة فجوة 10 بكسل بين كل واحد منهم.
من المعرفة بوتسترابس، ترى ما هو قطع هنا.
هذا يحدد فصل قطع بين
قطعتين من المحتوى في قالب التطبيق الخاص بي.
لذلك، مع هذا، سنقوم بإغلاق div هنا.
الآن، داخل هذا div،
سأقوم بتعريف المحتوى الفعلي الذي سيذهب إلى ملف menu.component.html الخاص بي.
الآن هنا، أنا ذاهب للاستفادة من عنصر آخر أن
تصميم المواد يوفر لي يسمى كعنصر قائمة حصيرة.
لذا، يسمح لي هذا المكون بإنشاء قائمة
بالعناصر التي أقوم بتضمينها في القالب الخاص بي هنا.
لذلك، هذا هو عنصر قائمة المواد الزاوي.
من Bootstrap، لاحظت أنه في Bootstrap كان لدينا كائن الوسائط.
لذا، فإن قائمة حصيرة مثل كائن الوسائط بمعنى ما من Bootstrap.
الآن لهذا، أنا ذاهب لتطبيق فئة،
سمة تسمى FxFlex.
الآن، ما يعنيه هذا هو أن كل شيء سيتم التعامل معه كوحدة واحدة أو قطعة واحدة من
المحتوى الذي سيتم وضعه من خلال تخطيط المرن الخاص بي هنا.
لذا، إذا كنت معتادًا على تخطيط CSS المرن.
لذلك، هذا هو جزء واحد من المحتوى الذي سيتم وضعه من خلال تخطيط CSS المرن الخاص بي.
لذا، قم بتطبيق FxFlex
هنا، ثم داخل هنا سأقوم بتعريف عنصر قائمة الحصيرة.
لذلك، هذا هو عنصر القائمة هنا.
لذلك، من معرفة HTML الخاصة بك،
إذا كانت علامة LI التي تستخدمها في HTML مشابهة لهذا هنا.
لذلك، هذا هو عنصر قائمة ملغ هنا.
لذلك من الواضح، داخل عنصر القائمة هذا،
أنت ذاهب إلى تحديد قائمة الأشياء.
الآن، يوفر الزاوي بعض التوجيهات الهيكلية التي يمكنك تطبيقها
على علاماتك هنا والتي تسمح لك بإنشاء المحتوى الخاص بك.
الآن، أنا ذاهب لاستخدام توجيه هيكلي واحد يسمى نغفور.
سنرى كيف نستخدمها في هذا القالب.
ثم في وقت لاحق بعد هذا التمرين،
سأشرح لك بإيجاز ما هي التوجيهات الهيكلية
وما الغرض الذي تخدمه في تحديد القوالب الخاصة بك هنا.
لذلك، داخل هذا البند قائمة فارغة، وأنا ذاهب إلى القول،
نجمة، لاحظ بناء الجملة، نجمة نغفور.
لذا، هذا هو التوجيه الهيكلي، التوجيه الهيكلي
ngFor في الزاوي.
ما يسمح لك هذا التوجيه الهيكلي ngFor القيام به هو
التكرار على مجموعة من العناصر.
تذكر أننا عرفنا الأطباق كمجموعة من كائنات الأطباق في شفرتنا.
الآن، في قالب بلدي،
وسوف يكون الوصول إلى هذا الكائن الأطباق.
حتى هنا، إذا كنت تريد أن تتكرر أكثر من ذلك،
والطريقة التي أحدد بها هو سأقول،
«دع طبق من الأطباق.»
هذه هي الطريقة التي يعمل بها بناء الجملة للتوجيه الهيكلي ngFor.
لذلك، والسماح طبق من الأطباق.
ما يعنيه هذا هو أن الأطباق هي مجموعة من كائنات الأطباق.
عندما نختار نقول السماح طبق من الأطباق،
وهذا سوف يسمح لي للوصول إلى كل عنصر من عناصر
الصفيف ومن ثم يساعدني على التكرار عبر الصفيف.
هذا يشبه حلقة for،
إذا كنت معتادًا على الحلقات من البرمجة.
لذلك، هذا يعمل مثل حلقة for بالنسبة لك ومن ثم يساعدك
على التكرار على جميع عناصر مجموعة الأطباق هنا.
يصبح هذا الطبق كائن جافا سكريبت يسمح لي
بالوصول إلى كل عنصر من هذه الصفيف هناك.
الآن، من هذا، يمكننا أيضًا
الوصول إلى خصائص كل كائن على حدة داخل مجموعة الأطباق الخاصة بي.
لذلك، بعد ذلك، يمكنني الاستفادة منها لتحديد القالب الخاص بي هنا.
اسمحوا لي أن وضع القالب وبعد ذلك سوف نعود
وننظر في كيف هذين مترابطة هنا.
الآن، داخل عنصر القائمة الفارغ،
يمكنني تضمين صورة مع السمة كما MatlistavaTar.
لذلك، هذا يسمح لي بتضمين صورة ثم مع تحديد المصدر هنا.
الآن من المثير للاهتمام، انظر إلى بناء الجملة الذي أستخدمه هنا.
داخل الأقواس المزدوجة، وأنا ذاهب إلى القول dish.image.
ما يعنيه هذا هو أن هذا هو الاستيفاء أحادي الاتجاه الذي نتحدث عنه.
هنا، عندما أحدد هذا،
ما يعنيه هذا هو أن هذا المصدر سيحصل على قيمة dish.image التي تم تعريفها في
كائن جافا سكريبت
الخاص بي الذي قمت بتعريفه في فئة البرنامج النصي الخاصة بي هناك والتي تتوفر لي للقيام بالتخطيط هنا.
لذلك، أن قيمة dish.image ستكون متاحة لي وأيضا لهذه الصورة،
وسوف تحدد قيمة بديلة كما dish.name.
أذكر أن طبقي كان أيضا خاصية الاسم المتاحة
لي بحيث يحدد صورة لقائمتي هنا.
سوف تدرك قريبا كيف تبدو هذه القائمة
على الشاشة عندما نكمل هذا القالب هنا.
بالإضافة إلى ذلك، سأستخدم h1 مع علامة MatLine.
مرة أخرى، هذا هو استخدام
عنصر المادة الزاوي القائمة لتحديد القالب الخاص بي هنا.
لذلك، أقول h1 MatLine لذلك هذا يساعدني على تحديد خط هنا ثم داخل هناك،
وأنا ذاهب لاستخدام الأقواس المزدوجة ويقول dish.name هنا.
لذلك، هذا يسمح لي للحصول على قيمة اسم الطبق هناك.
لذلك، هذا يحدد سطر واحد ثم في السطر التالي أنا ذاهب إلى القول p MatLine.
لذلك، سأقوم باستخدام علامة p هنا ثم
أغلق علامة p ثم داخل علامة p،
سأقوم باستخدام امتداد لتحديد dish.description.
لذا، إذا كنت معتادًا على كائنات جافا سكريبت،
فسترى الآن كيف يمكنني الوصول إلى خصائص
كائن جافا سكريبت الخاص بي هنا، dish.description هنا.
للملاحظة، من خلال تشغيل هذه المرة الإضافية،
تسمح لي السمة ngFor بالتكرار عبر مجموعة من الكائنات هنا.
لذلك، الأطباق هنا هي مجموعة من الكائنات طبق.
لذلك، عندما أقول اسمحوا طبق من الأطباق،
وهذا الطبق يعطيني الوصول إلى كل عنصر من
صفيف الأطباق الخاصة بي وأنا تكرار على كل عنصر من عناصر الصفيف
وبعد ذلك سوف يتم إنشاء هذا المحتوى لكل واحد منهم.
لذا، فإن عنصر القائمة الفارغ هذا،
يعمل بشكل أساسي مثل حلقة for من
لغة الكمبيوتر التقليدية ثم يتكرر على
قائمة الأطباق ثم يضع كل واحد منهم على شاشتي.
لذلك، مع هذا التغيير،
دعونا حفظ ملف مكون القائمة.
بعد ذلك، نذهب إلى app.module.ts ونحن بحاجة إلى استيراد وحدة MatList في هذا.
لذلك، نقول، استيراد
MatlistModule من الزاوي/مادي/list.Once
قمنا باستيراد هذا هناك، ثم نذهب إلى أسفل ثم تحديث الواردات في
وحدة Ng وإضافة في
وحدة MatList إلى قائمة الواردات هناك.
يتم الآن تحديث هذا التطبيق module.ts ثم أيضا،
أنا ذاهب للذهاب إلى ملف.scss الأنماط ثم إضافة
في فئة الحاوية هنا.
ماذا تحدد فئة الحاوية هنا؟
فئة الحاوية هي هامش 20 بكسل
وعرض المرن وحفظ التغييرات.
الآن، دعنا نذهب ونلقي نظرة على صفحتنا الإلكترونية.
الذهاب إلى صفحة الويب الخاصة بنا.
( فويلا) ها أنت ذا
القائمة لمطعم لدينا هو مبين في كل روعة على الشاشة.
ترى كيف تم إنشاء هذه القائمة.
انظر إلى مصفوفة كائن JavaScript التي رأيتها.
انظر إلى كيفية استخدام كل من خصائص صفيف كائن JavaScript
وتعيينها إلى العناصر الأربعة في قائمتي.
انظر إلى كيفية تضمين الصور المقابلة هنا
باستخدام MatlistaVatar هنا.
لذلك، وهذا يخلق الصور المستديرة هنا ومن ثم لاحظ كيف
يتم عرض اسم الطبق هنا ثم وصف الطبق المدرجة هنا.
رائع الآن، لدينا القائمة لمطعمنا
على الشاشة باستخدام مكون القائمة في Angular.
و هذا يكمل هذا التمرين.
في هذا التمرين، تعلمنا كيفية إنشاء مكون جديد.
إضافته إلى تطبيق Angular الخاص بنا،
وكيفية تضمين هذا المكون في قالب
مكون آخر بحيث ينشئ التسلسل الهرمي للمكونات.
ثم رأينا كيف يمكننا الاستفادة من تخطيط المرن الزاوي وأيضا
مكونات تصميم المواد لتصميم
القالب لمكون القائمة لدينا لعرض المحتوى هنا.
الآن، إذا سألتني كيف أتذكر كل هذه الأشياء
حسنا، لأكون صادقا،
لا يمكنك تذكر كل شيء ولكن عليك أن تفهم النهج.
هذا أكثر أهمية من محاولة حفظ أي من هذه الأشياء.
الآن، إذا سألتني أين يمكنني الحصول على المعلومات حول
مكون القائمة من المواد الزاوي.
يمكننا فرز الوثائق المادية الزاوي وهناك
سيكون لديك تفاصيل حول كيفية إعداد مكون القائمة.
الآن، أين نحصل على التفاصيل حول كيفية تصميم مكون في الزاوي؟
درسنا فقط قليلا من ذلك وبعد ذلك في هذا التمرين،
تعلمنا كيفية إنشاء مكون جديد ومن ثم تطبيق ذلك في التطبيق الزاوي لدينا.
لذلك، هذه نقطة جيدة بالنسبة لك للقيام
بتعليق الحصول على مكونات الرسالة الجزء الأول.
في التمرين التالي،
سنقوم بتحسين هذا أكثر من ذلك بقليل باستخدام نوع آخر
من مكون المادة الزاوي لوضع المحتوى على شاشتي.