قبل أن نمضي قدما مع بقية التدريبات والمهام في هذه الدورة،
اعتقدت أن هذا سيكون الوقت المناسب بالنسبة لي
لإعطاء طلبي الزاوي بنية لطيفة.
لذا، هذا هو المكان الذي سأضيفه في الرأس والتذييل
للتطبيق الزاوي الخاص بي بحيث تكون الطريقة
التي يتم بها تقديم واجهة المستخدم أكثر جاذبية مما كان عليه حتى الآن.
لذلك، دعونا نرى كيف يمكننا بناء مكونات متعددة
لاحتلال أجزاء مختلفة من الشاشة داخل التطبيق الزاوي لدينا.
لذا، هنا، سترى أن تطبيقي الزاوي الآن سيتكون من رأس،
وهو مكون منفصل، التذييل،
وهو مكون آخر،
ثم بين الاثنين،
سيكون لدي جزء من تطبيقي الزاوي الذي
سيتم التحكم فيه لاحقًا باستخدام جهاز التوجيه الزاوي.
لذا، كما ترون، أنا أقوم بإعداد المسرح لما سيأتي لاحقاً في هذه الدورة.
لذلك، على طول الطريق،
سنقوم أيضا الاستفادة من الرموز الخط رهيبة داخل التطبيق الزاوي لدينا.
أنا فقط مولعا من الرموز رهيبة الخط،
لذلك اعتقدت أن هذا سيكون مكانا جيدا
لإدخال هذه الرموز في بلدي التطبيق الزاوي.
للمضي قدما، دعونا تثبيت الخط رهيبة في التطبيق الزاوي لدينا.
لذلك، للقيام بذلك، سأستخدم الآلية الوقائية الوطنية للذهاب،
وجلب الخط الرائع بالنسبة لي،
لذلك تقوم الآلية الوقائية الوطنية بتثبيت الخط الرائع 4.7.0، وحفظها.
ثم، دعونا يتم تثبيت الخط رهيبة.
لذا، بمجرد دخول الخط الرائع إلى تطبيقنا الزاوي،
ثم يصبح جزءًا من وحدات العقدة
التي يتم تضمينها في تطبيقنا الزاوي،
فإن الخطوة التالية هي جعلها متاحة لتطبيقنا الزاوي.
نحن بحاجة إلى دمج الخط رائع في تطبيقنا الزاوي.
لذلك، للقيام بذلك،
انتقل إلى المجلد المصدر،
ثم قم بإنشاء ملف باسم _variables.scss في المجلد المصدر.
في ملف variables.scss،
أضف في $ fa-font-path:
ثم ضمن علامات الاقتباس، ضع.. /node_modeles/خط رائعة/الخطوط.
لذلك، نحن نحدد مسار الخط لملفاتنا الرائعة هنا.
ثم، افتح ملف Styles.scss،
ثم في ملف Styles.scss،
سنقوم بإضافة بضعة أسطر هناك.
أولاً، سنقوم باستيراد المتغيرات التي أعلناها للتو بقولها @import،
وضمن متغيرات الاقتباس،
ثم سنقوم باستيراد ملفات الخط الرائعة هناك،
ثم سنقول
@import.. /node_modeles/الخط رائعة/SCSS/الخط رائع. نحن نستورد
إصدار SCSS منه لأننا نستخدم SCSS في تطبيقنا الزاوي.
بمجرد تعديل الأنماط لملف CSS،
دعنا نحفظ التغييرات.
عند هذه النقطة، قد نحتاج إلى إعادة تشغيل
الخادم الخاص بنا الذي كان يخدم تطبيقنا الزاوي.
لذا، حيث قمت بكتابة خدمة NG،
قد ترغب في إيقاف الخادم الذي يخدم تطبيقك الزاوي وإعادة
تشغيله بحيث يتضمن هذه التغييرات الجديدة التي تم إجراؤها.
لذلك، الذهاب إلى محطة بلدي،
وأنا ذاهب لوقف الخادم الخاص بي،
ومن ثم إعادة تشغيل الخادم بحيث سوف تأخذ في الاعتبار التغيير الذي قمت به.
سترى الحالة الحالية
للتطبيق الزاوي لدينا من خلال النظر إليها في المتصفح.
لذلك، هذا هو ما لدينا في التطبيق الزاوي لدينا.
أريد أن أكون قادرًا على إضافة رأس وتذييل
لهذا العرض حتى أتمكن من استخدام كل من الرأس والتذييل،
ثم المحتوى الفعلي بين الرأس
والتذييل في الطريقة التي أقوم بها ببناء التطبيق الزاوي الخاص بي.
لذلك، للقيام بذلك،
سأقوم بإنشاء مكونين جديدين يسمى رأس وتذييل الصفحة،
والسماح لهم بإدارة الجزء الخاص بهم من الشاشة التي يتم تخصيصها لهم.
الذهاب إلى المطالبة، اسمحوا لي إنشاء مكون رأس جديد.
يمكنني حتى أن أقول ng g g،
وهذا يكفي بما فيه الكفاية لـ CLI الزاوي
للتعرف على أنه يريد إنشاء مكون.
لذا، أقول رأس مكون ng g g
، وكذلك تذييل مكون ng g.
لذلك، الآن، لدي عنصرين متاحين بالنسبة لي
للاستفادة من داخل بلدي التطبيق الزاوي.
كيف يمكنني الاستفادة من هذين العنصرين؟
دعونا نذهب إلى ملف component.html التطبيق،
ومن ثم الاستفادة من هذين العنصرين في الطريقة التي
يؤلف بها الشاشة بأكملها لتطبيق الزاوي لدينا.
بالعودة إلى
تطبيقنا، نرى أن ملف module.ts التطبيق
يتضمن بالفعل رأس
ومكون تذييل الصفحة وقد تم تضمينها بالفعل في الإعلانات هنا.
لذلك هذا هو ميزة استخدام كلي الزاوي،
فإنه يعتني كل هذا الأساس بالنسبة
لك بحيث يمكنك التركيز على مجرد بناء التطبيق الزاوي الخاص بك.
لذا، هذا هو السبب في أنني أحب CLI
الزاوي كنهج لبناء تطبيقي الزاوي.
حتى الآن، دعونا نذهب إلى مكونات التطبيق ملف HTML.
لذا، هنا، ترى أننا قمنا بتضمين قائمة التطبيق هناك.
سأقوم بإزالة شريط الأدوات هذا من ملف HTML لمكونات التطبيق الخاص بي.
سيصبح شريط الأدوات هذا جزءًا من قالب الرأس لمكون الرأس الخاص بي.
لذا، بدلاً من ذلك،
سيحتوي ملف قالب مكونات التطبيق الخاص بي على الرأس والتذييل في الأسفل فقط.
لذلك، ترون أنه الآن،
لدينا وجهات نظر المكونات الثلاثة.
الرأس والقائمة
والتذييل الذي يشغل الشاشة بأكملها.
لذلك، هذه المكونات الثلاثة الحصول على ذلك الجزء من الشاشة لأنفسهم.
دعونا حفظ التغييرات ونلقي نظرة سريعة على تطبيقنا في المتصفح.
الذهاب إلى التطبيق في المتصفح،
ترى الآن أن الرأس قد احتلت بالفعل انها
جزء من الشاشة هناك، ومن الواضح،
لأننا قد أعدت للتو المكون،
فإنه يقول فقط يعمل رأس،
ثم أسفل هنا،
وقد اتخذت تذييل أيضا مكانها في صفحة الشاشة.
الآن، سنمضي الآن ونقوم بتحديث القوالب لكل من الرأس والتذييل
بحيث يمكننا تحديد واجهة المستخدم الخاصة بنا بشكل جيد للتطبيق الزاوي الخاص بنا.
دعونا نبدأ العمل على تذييلنا.
لذا، للبدء في التذييل،
دعنا نذهب إلى ملف قالب التذييل،
ثم سنقوم باستبدال هذا مع قالب التذييل المصمم حديثًا.
الآن، لراحتك،
لقد قدمت الرمز لك في التعليمات.
سيكون من الحكمة نسخ الشفرة بأكملها من هناك،
ثم لصقها هنا.
ثم قم بفحص ما يفعله هذا التذييل.
حتى هنا، ترى أنني قد لصق في التعليمات البرمجية لقالب تذييل بلدي.
الآن، سأعود إلى هذا الرمز بعد قليل.
إذا كنت قد أجريت الدورة السابقة على Bootstrap،
فسترى أن هذه هي الطريقة المادية الزاوي لتنفيذ
نفس النوع من البنية للتذييل الذي قمنا به في دورة Bootstrap.
بعض هذه الأشياء سوف تكون قابلة للتمييز بالنسبة لك بالفعل،
ولكن اسمحوا لي أن أكمل التحديث إلى قالب التذييل،
وبعد ذلك أيضا سوف نضيف في عدد قليل من التعليمات البرمجية SCSS إلى ملف مكون تذييل الصفحة. scss،
ثم نلقي نظرة على كيفية تشكيل تذييل الآن.
حتى هنا، لقد لصق مرة أخرى في التعليمات البرمجية
من تعليمات التمرين التي تتبع هذا الفيديو،
لإظهار فئات SCSS المختلفة التي قمت بإضافتها إلى تذييل بلدي.
لذلك، لدي بعض الطبقات التي قمت بتعريفها هنا،
سأستخدمها لتحديد جزء من تذييل الصفحة،
ثم الطبقة تذييل هنا،
ولدي خلط SCSS هنا،
وبعض المتغيرات هنا التي
تحدد الألوان المختلفة التي سأستخدمها في تطبيقي الزاوي.
لذلك، دعونا حفظ التغييرات التي قمنا بها.
دعونا نلقي نظرة على التذييل في تجسيده الحالي،
وبعد ذلك سنعود ونقوم بزيارة سريعة إلى الشفرة التي قمت بتضمينها
في ملف قالب مكونات التذييل ورمز SCSS هنا.
الذهاب إلى تطبيقنا الزاوي في المتصفح، wallah،
هناك لديك تذييل جديد لتطبيقنا الزاوي.
لذلك، يمكنك أن ترى أن لدي بعض الأشياء هنا.
هذه الموجودة على الحافة اليسرى هي الروابط المختلفة
للصفحات المختلفة التي ستشكل جزءًا من تطبيق Angular الخاص بي.
سنرى كيف نفعل ذلك كجزء من التدريبات القليلة القادمة.
الآن، هنا أنا الاستفادة من عنصر زر الذي
هو جزء من المواد الزاوي لتحديد هذه الروابط هنا،
ثم لدي عنوان هنا،
ومن ثم أنا أيضا استخدام أزرار مرة أخرى لتحديد هذا التسلسل
من الأزرار لمختلف وصلات وسائل الاعلام الاجتماعية لمطعمي هنا.
لذلك، يمكنك أن ترى أن لدي كل هذه.
لإنشاء هذه، يمكنني استخدام
دعم المواد الزاوي لأزرار العمل العائمة الصغيرة هنا،
والتي تعطي بنية لطيفة لهذا الغرض.
إذا كنت قد رأيت إصدار Bootstrap من هذا،
فأنا أحب هذا أفضل بكثير من إصدار Bootstrap الذي قمت بإنشائه في الدورة السابقة.
لذلك، تذييل لدينا هو الآن في مكان جيد.
دعونا ننظر بسرعة في بعض التعليمات البرمجية في تذييل الصفحة.
الآن، لن أشرح أنه في الكثير من التفاصيل لأن ذلك هو
التعامل مع أكثر مع المادة الزاوي من Angular نفسه،
ولكن على طول الطريق بمجرد النظر
إلى بنية الشفرة، ستبدأ في معرفة كيف
يمكن استخدام مكونات المادة الزاوي هذه لتحديد شيء ما مثل هذا.
الذهاب إلى مكون تذييل،
ترى أن لدي ديف الخارجي هنا الذي قمت بتحديد بعض تخطيط الزاوي،
سمات تخطيط المرن هنا،
لذلك أقول أن صف فكسلايوت،
ثم فكسلايوت سم و xs ليكون العمود.
لذا، بالنسبة لأحجام الشاشة الصغيرة والصغيرة الإضافية،
ستضع كل المحتوى كأعمدة،
ولكن بالنسبة لأحجام الشاشة الأكبر،
ستقوم بوضعها كصف.
لذلك، هذا هو ما يعطيني بنية لطيفة لتذييل بلدي.
كما ترى في ديف واجهة المستخدم،
أنا وضع جميع مركز المحتوى هنا،
وأسفل هنا،
وأنا تحديد أول واحد.
لذلك، هذا تطور الرياضيات هنا الذي أستخدمه يحدد روابطي هنا.
لذلك، في هذا أنا باستخدام حصيرة لعنصر المواد الزاوي،
وداخل هناك أنا باستخدام مع
سمة عنصر زر حصيرة المخصصة لإنشاء هذه الأزرار هنا.
في وقت لاحق، سأعود وأضيف
الرمز الفعلي لهذه الروابط في التدريبات اللاحقة هنا.
هذا ما يساعدني على إنشاء قائمة الروابط على الجانب الأيسر.
هذا هو العنوان الذي ترونه،
وهذا هو واضح إلى حد ما للنظر في.
لذا، هذا هو div الذي أستخدم FxFlex مع 50،
والآخر مع FxFlex مع 40.
لذلك، 40 يعني 40 في المئة و 50 يعني 50 في المئة،
وهنا أنا باستخدام FxFlex إزاحة 20 بكسل.
لذلك، فإنه يتحرك هذا المحتوى الحق بمقدار 20 بكسل.
لذلك، لدي مساحة 20 بكسل اليسار على الجانب الأيسر
لهذا div معين يحتوي على هذه الروابط هنا.
ثم أخيرا أدناه هنا،
لدي هذه المجموعة من الروابط التي أستخدمها
لإنشاء شريط مع جميع وصلات وسائل الاعلام الاجتماعية هناك.
لذلك، أنا باستخدام مع زر رمز حصيرة هنا.
لذلك، هذا هو ما يخلق الأزرار المستديرة التي تراها في التذييل هناك.
الآن، لكل من هذه،
أنا أطبق الطبقة المقابلة هنا.
لذا، يمكنك ملاحظة هذا الزر Google Plus، زر Facebook،
يتم تعريف جميع هذه الفئات في ملف SCSS الخاص بي هناك،
حيث قمت بتحديد الألوان للخلفية وما إلى ذلك،
بحيث يتطابق مع نظام الألوان النموذجي الذي تستخدمه مواقع التواصل الاجتماعي هذه.
لذلك، قضاء قليلا من الوقت في النظر إلى هذا الرمز هنا،
وبعد ذلك سوف تحصل بسرعة على شعور كيف تم تصميم تذييل الصفحة.
وبالمثل، انتقل إلى مكونات تذييل رمز ساس هنا،
حتى تتمكن من رؤية أنني قمت بتعريف ألوان مختلفة هنا.
أنا باستخدام خلط مع الهامش إعداد هنا،
ومن ثم لتذييل بلدي،
وأنا تحديد لون الخلفية بشكل مناسب،
وتلاحظ الطبقات المختلفة التي أنا تعريف هنا
زر الفيسبوك الذي
اللون ولون الخلفية لقد حددت لكل واحد منهم.
لذلك،
يتم استخدام اللون المقابل لهذا الموقع وسائل الاعلام الاجتماعية كلون الخلفية لكل واحد من هذه.
الآن، في دورة Bootstrap في وقت سابق،
كنت قد استخدمت Bootstrap Social لتحقيق نفس الشيء.
هذا لا يعمل بشكل جيد جدا مع المواد الزاوي،
لذلك لهذا السبب أنا مجرد خلق بلدي مجموعة من النظارات ساس هنا،
ومن ثم إضافة في التعليمات البرمجية التي أحتاج إلى إنشاء تلك الأزرار هناك.
إذا كنت بحاجة إلى إضافة المزيد من الأزرار،
فما عليك سوى إنشاء المزيد من الفئات مثل هذه المقابلة
للأزرار التي تريد إضافتها إلى التطبيق الخاص بك.
لذلك، أن يبني تذييلنا.
الآن، العنوان هو الجزء التالي الذي سنستهدفه.
الذهاب إلى الرأس، سيتم فتح
ملف قالب مكونات الرأس وترى ما يحتوي عليه.
سنقوم باستبدال هذا
بالقالب الذي أعطيته لك في التعليمات التالية هنا.
لذلك، فقط المضي قدما وقطع ولصق هذا الرمز في هنا،
لأن هذا لا علاقة له على وجه التحديد مع الزاوي.
لذلك، هذا هو السبب في أنني فقط السماح لك لقطع ولصق التعليمات البرمجية مباشرة من هناك،
ويوفر بعض الوقت بالنسبة لنا.
يمكنك أن ترى أنني قمت الآن باستبدال قالب الرؤوس ببعض التعليمات البرمجية هنا.
وبالمثل، بينما نحن في ذلك،
سوف نضيف أيضا في بعض التعليمات البرمجية سس لبلدي Header.components.scss ملف هنا، ما
عليك سوى الذهاب ونسخ التعليمات البرمجية من التعليمات.
وبالمثل، بينما نحن في ذلك،
سنضيف في عدد قليل من فئات SCSS إلى ملف الأنماط الرئيسية.
لذلك، في هذا الملف الأنماط الرئيسية. scss،
وسوف أضيف في الألوان الفرعية واثنين من أكثر الطبقات في هذا.
لذلك، دعونا لصق في التعليمات البرمجية من التعليمات التي أعطيتك.
لذا، فإن التحديث إلى ملف Styles.scss اكتمل الآن،
لذلك أضفت في بعض الألوان هنا واخلط هناك،
ثم في الجزء السفلي أضفت في عدد قليل من الطبقات الأخرى هنا والتي
تساعدني عندما أقوم بتصميم القوالب الخاصة بي للتطبيق الزاوي.
لذلك، كل هذه التغييرات،
دعونا حفظ التغييرات،
نلقي نظرة سريعة على كيف يبدو رأسي الآن في التطبيق،
وبعد ذلك سوف نعود وسرعان ما إعادة النظر في التعليمات البرمجية التي قمنا بتضمينها هنا فقط.
بالعودة إلى تطبيق Angular الخاص بي في المتصفح،
سترى الآن شريط الأدوات يظهر مرة أخرى في الرأس هنا،
جنبا إلى جنب مع بعض الروابط
هناك ثم صورة تمثل شعار مطعمي،
ثم هنا، لديك شيء نستخدم ملف jumbotron في الدورة السابقة.
أنا ذاهب فقط لاستخدام فئة تسمى jumbotron لإنشاء هذا
في تطبيق Angular أيضا،
لذلك هنا على الجانب الأيسر لدي معلومات مطعمي
وشعار المطعم وترك نفسي بعض المساحة هنا لإضافة شيء في المستقبل.
لذلك، هنا ترى طلبي يتشكل الآن مع رأس،
مع بعض الروابط هناك.
الآن، نحن ذاهبون للاستفادة من هذه الروابط
في التدريبات القليلة القادمة لإعداد بلدي التطبيق الزاوي،
ثم القائمة يجلس بين ثم أسفل هنا تذييل بلدي.
الذهاب إلى ملف قالب مكونات الرأس الخاص بي،
يمكنك الآن أن ترى كيف قمت بإنشاء شريط الأدوات مع أزرار إضافية هنا.
لذلك، تتذكر أن لدينا شريط الأدوات قيد
الاستخدام بالفعل في ملف قالب مكونات التطبيق،
لقد قطعته من هناك وبدلاً من ذلك استخدم شريط الأدوات في قالب الرؤوس هنا.
الآن، داخل شريط الأدوات هذا،
قمت بتضمين بعض الروابط مع فئة الزر المطبقة عليه وهذا ما
يسمح لي بإنشاء تلك الروابط في شريط الأدوات كقائمة لتطبيق الويب الخاص بي.
أدناه هناك، لقد قمت بإنشاء div مع حاوية الصف و jumbotron.
هذا هو السبب في أنني أضفت فئات الحاوية و jumbotron في ملف SCSS الخاص بي،
حتى أتمكن من الاستفادة منها داخل القوالب الخاصة بي هنا.
لذلك، والتي مرة أخرى،
أطبق وبعض سمات التخطيط المرن هنا لمساعدتي في تصميم الشاشة هناك.
ثم يمكنك أن ترى كيف استخدمت اثنين من divs هنا مع
السمة FxFlex المطبقة وفقا لذلك لإنشاء واجهة المستخدم،
لتطبيقي هنا.
لذا، اقضي قليلاً من الوقت هنا لإلقاء نظرة سريعة على هذا الرمز هنا
لفهم كيفية إنشاء تخطيطي لقالب الرأس الخاص بي بسرعة.
انها ليست معقدة،
بمجرد الانتهاء من دورة بوتستراب،
وهذا ليس من الصعب أن نفهم.
على طول الطريق، كنت أيضا تعلم تخطيط المرن الزاوي ثم
أيضا مكونات المواد الزاوي هنا.
الذهاب إلى ملف SCSS لمكون الرأس،
يمكنك أن ترى أنني قد أضفت في بعض الألوان هنا ثم مزيج
في ثم وأضاف أيضا في فئة jumbotron هنا.
الآن، فئة الحاوية ليست هنا،
فئة الحاوية في ملف الأنماط الرئيسية.
لأن فئة الحاوية هي شيء
سأستخدمه للعديد من القوالب هناك.
لذلك، لهذا السبب، أضفت في فئة الحاوية إلى
ملف Styles.scss وهو الملف المشترك للتطبيق الزاوي بأكمله.
لذلك، هناك لقد أضفت في بعض الألوان الإضافية هنا،
وأيضا لقد خلقت مزيجًا هنا،
ثم أضفت في الحاوية،
الخلفية الأساسية، وألوان لهجة الخلفية،
ثم أستخدم أيضًا فئة أخرى تسمى flexes spacer،
والتي سأستخدمها في واحدة من التدريبات اللاحقة.
كل هذه الخطوات في التحضير لما
سيأتي في التدريبات العديدة المقبلة.
لقد اتخذ تطبيق Angular الخاص بي شكلاً جيدًا من حيث الطريقة التي يتم بها وضع واجهة المستخدم،
بحيث يمكنني الآن البدء في إدخال المزيد من الميزات الجديدة للزاوية.
دفع مرة أخرى إلى بلدي تطبيق الزاوي في المتصفح،
اسمحوا لي أن أرى كيف يبدو هذا التطبيق في أحجام الشاشة المختلفة.
لذا، هذا هو حجم شاشة سطح المكتب القياسي،
لذلك دعونا ننتقل إلى حجم شاشة أصغر ثم نرى كيف يبدو التطبيق.
لذا، هذا هو حجم شاشة iPhone 6 Plus،
حتى تتمكن من رؤية كيف يختلف التخطيط لحجم الشاشة الأصغر.
لذا، فإن رأسي موجود هناك وقائمة الطعام الخاصة بي في الأسفل والتذييل هنا،
لاحظ كيف تم
وضع الأجزاء المختلفة للتذييل بشكل مختلف لحجم الشاشة الصغيرة الإضافية.
هذا هو نفس التطبيق في وضع أفقي أو اي فون 6 زائد،
حتى تتمكن من رؤية أن رأسي وضعت من هذا القبيل والقائمة هناك وتذييل.
لذلك، يظهر لك ذلك أنني قد استفادت من تخطيط المرن الزاوي
لتكون قادرة على إنشاء تخطيطات مختلفة لأحجام الشاشة المختلفة.
لذا، مرة أخرى، إذا كنت قد أخذت دورة Bootstrap في وقت سابق،
فستبدأ في معرفة كيف
يمكن أيضًا استخدام التصميم المتجاوب مع التخطيط المرن الزاوي لتحقيق نتائج مماثلة.
لذلك، مع هذا، ونحن استكمال هذا التمرين.
في هذا التمرين، قمنا بإعداد تطبيق Angular الخاص بنا
وجعلناه جاهزًا لبقية التمارين في هذه الدورة.
هذا هو أيضا الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع رأس الرسالة والتذييلات.