في التمرين السابق،
قمنا بسقالات أول تطبيق أساسي للزاوية.
كما ذكرت، ونحن في طريقنا للعمل على هذا التطبيق الزاوي
وتطويره أكثر طوال بقية هذه الدورة.
الآن، قبل أن نبدأ العمل على تطبيق Angular الخاص بنا،
دعونا تكوين تطبيق Angular الخاص بنا لاستخدام بعض الوحدات الإضافية،
والتي تمكننا من تصميم القوالب لتطبيق Angular الخاص بنا.
سوف نستفيد من وحدة المواد الزاوي لتصميم تخطيطات واجهة المستخدم.
توفر لنا وحدة المواد الزاوي عددًا من مكونات التخطيط المثيرة للاهتمام
التي يمكننا الاستفادة منها في تصميم قوالب المكونات الزاوي الخاصة بنا.
بالإضافة إلى ذلك، سنستفيد من التخطيط المرن الذي يقوم على تخطيط CSS المرن،
والذي يمكننا من القيام بالتصميم المتجاوب داخل تطبيقنا Angular.
لذلك، في هذا التمرين،
سنقوم بعمل هذه التكوينات.
على طول الطريق، سوف نتعلم أول معرفة موجزة لدينا من المكونات،
حتى قبل أن ننتقل إلى فحص المكونات بمزيد من التفصيل في الدرس التالي.
للبدء، دعونا نبدأ رحلتنا مع زيارة سريعة إلى ملف app.component.ts.
هذا هو الملف الذي يدعم
مكون الجذر الذي يشكل جزءًا من تطبيق Angular الخاص بنا.
الآن، مع إلقاء نظرة على هذا المكون الجذري،
هناك عدد قليل من الأشياء التي سوف تصبح واضحة جدا بالنسبة لك حتى من دون الكثير من التفسير.
أول شيء أود أن ألفت انتباهكم إليه هو بيان الاستيراد هذا.
كما ترون، هذا هو استيراد فئة المكون من مكتبة Angular الأساسية.
ثم بعد ذلك، نحن نستعد لدينا فئة AppComponent هنا،
وتصدير هذه الفئة.
لذا، ضمن فئة AppComponent هذه التي
أعلناها، لدينا متغير أعلناه هنا يسمى العنوان،
والذي تم تعيينه حاليًا ليكون سلسلة.
الآن، مع إلقاء نظرة سريعة على هذا المتغير،
تبدأ على الفور في التساؤل،
كيف يرتبط هذا بما رأيناه في المتصفح،
عندما رأيت تطبيق Angular الخاص بنا يظهر في المتصفح،
كان تطبيق Angular يعرض بالضبط هذه الكلمات في المتصفح.
في الواقع، يلعب هذا المتغير دورًا مهمًا في
الخروج بالعرض الذي رأيته في متصفحنا.
الآن، بالإضافة إلى ذلك، ترى أيضًا أن
فئة المكون هذه ملحقة بديكور هنا.
مرة أخرى، هذا هو ديكور آخر ستواجهه في Angular.
لذلك، هذا كما نرى هو ديكور مكون.
يأخذ ديكور المكون داخليًا كائن JavaScript كمعلمة هنا،
والخاصية الأولى التي تراها هنا تسمى selector: جذر التطبيق.
الآن، إذا كنت تتذكر عندما نظرنا إلى ملف index.HTML،
رأينا أننا قمنا بتضمين عنصر هناك يسمى الجذر التطبيق.
الآن، عليك أن تبدأ في رؤية من أين ينشأ هذا التطبيق الجذر.
لذلك، هذا هو محدد للمكون الذي نعلنه هنا،
وهو ما يتم استخدامه داخل فئة القالب لدينا لتحديد مكان
عرض المقابلة لهذا المكون في المتصفح.
الخاصية الثانية التي تقوم بتعريفها هنا هي TemplateUrl.
يشير هذا إلى ملف،
ملف HTML كما ترون،
والذي يحتوي على القالب المقابل لهذا المكون معين.
القالب الذي يحدد طريقة العرض لهذا المكون.
الخاصية الثالثة التي تحددها هنا كما ترون، تقول، StyleUrls،
والتي كما تلاحظ هنا يتم تعيينها إلى ملف app.component.scss.
لذلك، يجب أن يحتوي هذا الملف على جميع التعليمات البرمجية scss التي يمكن
استخدامها لتصميم CSS لقالب المكونات لدينا.
لذلك، هذه زيارة سريعة إلى ملف app.component.ts.
الآن، دعونا نذهب إلى ملف App.Component.html،
ونلقي نظرة سريعة على القالب.
انتقل إلى ملف App.Component.html،
ترى أن هذا الملف app.component،
رمز HTML هنا يحتوي على علامة h1 مع شيء هنا مع الأقواس المزدوجة.
الآن، من الواضح أن هذا ليس شيئًا اعتدت عليه من معرفتك بـ HTML،
أو CSS أو JavaScript التي رأيتها من قبل.
هذا هو بناء الجملة الزاوي.
هذا ما نسميه الاستيفاء.
هذا يستخدم ربط البيانات أحادي الاتجاه في Angular.
أنا أرمي بعض الشروط عليك في هذه اللحظة
تمسك بهذه الشروط سنعود للنظر في هذه المصطلحات
بمزيد من التفصيل في الدروس المتبقية من هذه الدورة.
أول شيء كما ذكرت هو الاستيفاء،
والثاني الذي ذكرته هو ربط البيانات في اتجاه واحد.
أيضا، ترى على الفور أن هذا هو المتغير الذي رأيته في الرفيق،
ملف TypeScript، الذي يحدد رمز TypeScript المقابلة لمكون التطبيق.
لذا، بمجرد تحديد شيء من هذا القبيل هنا،
فإن الإيحاء هو أنه مهما كانت قيمة هذا العنوان سيتم استبدالها
هنا وسيتم استخدامها كرمز HTML الداخلي لهذه العلامة h1 هنا.
هذا هو الغرض من تضمين هذا هنا.
سنمضي الآن في تثبيت بعض
وحدات العلاقة Angular الأخرى التي ستمكننا من تصميم القوالب.
ثم سنعود إلى هذا الملف App.Component.html.
ثم إعادة تصميم هذا القالب قليلا في وقت لاحق في هذا التمرين.
من أجل مساعدتنا في تصميم وجهات النظر استجابة داخل التطبيق الزاوي لدينا،
ونحن في طريقنا للحصول على مساعدة من اثنين من
وحدات ذات الصلة لالزاوي تسمى وحدة المواد الزاوي.
توفر لنا وحدة المواد الزاوي عددًا من المكونات.
مكونات التخطيط التي يمكننا استخدامها في تصميم
القوالب الجديدة لمكونات Angular الخاصة بنا.
وحدة المواد الزاوي إذا كنت ترغب في مقارنة هذا هو إلى حد ما مثل ما
قدمه لنا Bootstrap لتصميم صفحات الويب الخاصة بنا التي فحصناها في الدورة السابقة.
أيضا، سأستخدم وحدة أخرى تسمى وحدة تخطيط المرن الزاوي.
توفر وحدة التخطيط المرن دعمًا لاستخدام تخطيط CSS
المرن داخل قوالب Angular الخاصة بنا لمكونات Angular الخاصة بنا.
الآن، يجب
تثبيت هاتين الوحدتين بشكل صريح ثم استيرادهما في تطبيق Angular الخاص بنا،
وهذا ما سنقوم به في الخطوة التالية.
ولكن قبل
أن نمضي قدما، سؤال واحد قد تتساءل عنه هو،
لماذا لا تستخدم Bootstrap للقيام بتصميم القوالب لتطبيق Angular الخاص بنا؟
في الواقع، يمكنك أيضًا استخدام Bootstrap لتصميم القوالب لتطبيق Angular الخاص بنا.
ولكن يمكنك فقط استخدام
جزء مكونات CSS من Bootstrap داخل تطبيق Angular الخاص بك.
المكونات المستندة إلى jQuery.
لا يمكن استخدام مكونات JavaScript بشكل صريح، قد يكون هناك بعض التعارضات
بين المكونات المستندة إلى jQuery من Bootstrap والرمز الزاوي نفسه.
لذا، من الأفضل تجنب استخدام مكونات JavaScript من Bootstrap
في حال اخترت استخدام Bootstrap كطريقة لتصميم قوالب Angular الخاصة بك.
ولكن من ناحية أخرى،
اعتقدت أيضا أن هذا من شأنه
أن يوفر لنا فرصة جيدة للتعلم الحصول على إطار تخطيط واجهة المستخدم آخر هو الإطار المادي الزاوي.
لذلك، هذا هو السبب في أنني اخترت استخدام إطار المواد الزاوي
والتخطيط المرن الزاوي في هذه الدورة بالذات.
الآن، ونحن نذهب من خلال بقية هذه الدورة،
وأنا لن أشرح صراحة كيفية استخدام
مكونات المواد الزاوي أو كيفية استخدام الزاوي فليكس-لايوت.
بدلا من ذلك، سوف نتعلمها من خلال النظر في الأمثلة.
وسوف نستفيد من هذين،
كل من المكونات الزاوي أفضل المواد والدعم الزاوي فليكس-لايوت،
عندما نقوم بتصميم القوالب لدينا لمكونات الزاوي لدينا في هذه الدورة بالذات.
لذلك، من خلال عملية الاستفادة من هذه المكونات،
سوف
تتعلم أيضا على طول الطريق، كيفية الاستفادة من كل من المواد الزاوي و الزاوي
فليكس-لايوت داخل التطبيق الزاوي الخاص بك.
اعتقدت أنه من خلال القيام التدريبات،
سوف تتعلم الكثير عن المواد الزاوي.
الآن، لشرح الجوانب المفاهيمية لماذا
تعمل مكونات المادة الزاوي بالطريقة التي تعمل بها أو كيف تعمل الشبكة على سبيل المثال،
أو كيف يعمل التصميم المتجاوب،
قمنا بالفعل بفحص بعض تلك الموجودة في الدورة السابقة على Bootstrap.
لذلك، فإن نفس المفاهيم تأتي أيضا لمساعدتنا.
بدلا من ذلك، سوف ننظر في آليات استخدام كل من المواد الزاوي و
الزاوي فليكس-لايوت داخل التطبيق الزاوي لدينا في هذه الدورة بالذات.
للبدء في استخدام مادة الزاوي،
بالطبع أول شيء عليك القيام به هو تثبيت وحدة المواد الزاوي.
لذلك، في موجه نوع npm تثبيت - حفظ @angular /material.
لذلك، كما ترون،
نحدد جميع وحدات ربط Angular مع @angular،
لذلك سترى أيضًا نفس الشيء لـ Flex-Layout.
نحن نقوم بتثبيت الإصدار 6.4.7 من وحدة المواد الزاوي.
بالإضافة إلى ذلك، تتطلب وحدة المواد تركيب CDK.
لذلك، سنقوم أيضًا بتثبيت ذلك عن طريق إجراء
npm install @angular /cdk @6 .4.7 - حفظ،
وتثبيته مع مادة الزاوي.
لذا، فإن المادة الزاوي تستفيد من cdk الزاوي لمكوناته.
بالإضافة إلى ذلك، عندما تستخدم مادة الزاوي،
تحتاج أيضًا إلى استيراد وحدة الرسوم المتحركة الزاوي إلى تطبيق Angular الخاص بك.
بدءًا من الإصدار الزاوي الرابع،
تم استخراج دعم الرسوم المتحركة الزاوي
من الوحدات الأساسية إلى وحدة منفصلة خاصة به.
لذا، مما يعني أنه إذا كنت بحاجة إلى
استخدام الرسوم المتحركة داخل تطبيق Angular الخاص بك،
فستحتاج إلى تثبيت وحدة الرسوم المتحركة Angular بشكل صريح.
لذلك، دعونا المضي قدما وتثبيت ذلك أيضا.
لذا، ستقول
تثبيت npm - حفظ @angular /الرسوم المتحركة @6 .1.7.
أيضا، وحدة أخرى أنني سوف تثبيت
معا يسمى هامرجس.
يتم استخدام وحدة HammerJS بواسطة Angular
لدعم بعض الإيماءات داخل تطبيق Angular الخاص بك.
لذا، هذا هو السبب في تثبيت HammerJS أيضًا داخل تطبيقنا،
والإصدار الحالي من HammerJS الذي نستخدمه هو 2.0.8.
الآن، قمنا الآن بتثبيت كل ما نحتاجه
لوحدة المواد الزاوي لاستخدامها في تطبيق Angular الخاص بنا.
بعد ذلك، سأنتقل إلى تثبيت
Angular Flex-Layout داخل تطبيق Angular الخاص بي.
لذلك، للقيام بذلك، أقوم بوسادة
تثبيت npm الفوري - save @angular /flex-layout
وسنقوم بتثبيت أحدث إصدار من ذلك.
لذلك، الآن بعد أن لدينا جميع القطع التي نحتاجها لتطبيق Angular الخاص بنا مثبتة،
دعنا نمضي قدما ثم نقوم بتكوين تطبيق Angular الخاص بنا
للاستفادة من هذه الوحدات الجديدة التي قمنا بتثبيتها في تطبيق Angular الخاص بنا.
أول شيء سنقوم به هو الذهاب إلى ملف index.HTML،
وبعد ذلك سنقوم بتكوين ملف index.HTML لاستخدام رموز المواد الزاوي.
لذلك، لتضمين رموز المواد الزاوي بحيث يمكن
استخدامها داخل قوالب التطبيق الزاوي الخاص بك، لذلك،
اسمحوا لي أن أذهب هناك الحق في رأس index.HTML،
ومن ثم إنشاء رابط جديد مع
href =» https://fonts.googleapis.com/icon?family=Material+Icons "وهذا هو النمط ورقة.
لذلك، مع هذا، يمكنني الآن الاستفادة من رموز المواد الزاوي داخل
التطبيق الزاوي الخاص بي أينما اخترت القيام بذلك داخل القوالب.
الخطوة التالية هي الانتقال إلى module.ts التطبيق.ts
ثم استيراد الوحدات الثلاث التي قمنا بتثبيتها للتو.
لذلك، يتم استدعاء أول واحد أنني ذاهب استيراد كما
BrowserAnimationsModule التي سأقوم باستيرادها من
@angular /platform-المتصفح/الرسوم المتحركة. لذا، الآن التالي
الذي سأقوم باستيراده هو MaterialToolBarModule.
لذلك، يستورد هذا وحدة @angular /material/شريط الأدوات
التي يمكن استخدامها داخل قوالب تطبيقات Angular الخاصة بنا.
لذلك، الزاوي المواد، وأيضا استيراد
فليكسلايوتمودول من @angular /فليكس-تخطيط.
لذلك، بمجرد أن يكون لدينا كل هذه الوحدات المستوردة ثم تغيير إضافي واحد أحتاج إلى
القيام به هو - أوه اسمحوا لي أيضا استيراد Hammer.JS بينما أنا هناك حق.
لذلك، اسمحوا لي استيراد
Hammer.JS في طلبي.
وبمجرد أن أكون في ذلك،
فإن التغيير الآخر الذي أحتاج إلى القيام به هو تضمين
تلك الوحدات أيضًا في مدخلات مصمم وحدة NG هنا.
لذا، سأذهب إلى هناك وأقول وحدة
المتصفح، وحدة الرسوم المتحركة للمتصفح هناك وبعد ذلك بعد وحدة HTTP،
سأقوم باستيراد وحدة شريط الأدوات المادية وكذلك
وحدة تخطيط المرن كجزء من المدخلات داخل وحدة الديكور NG لوحدة التطبيق الخاصة بي.
لذلك، مع هذا كل ما عندي من تكوينات لاستخدام وحدة شريط الأدوات المادية ووحدة
تخطيط المرن الزاوي وجنبا إلى جنب مع
وحدة الرسوم المتحركة في الزاوي اكتمال.
الآن دعونا خطوة إلى قالب المكونات والاستفادة من
أول مكون المواد الزاوي لدينا في تصميم تخطيط
لمكون التطبيق التطبيقات لدينا.
الذهاب إلى ملف قالب مكونات التطبيق،
وأنا ذاهب لاستبدال هذا الآن مع
عنصر مادة الزاوي
يسمى شريط الأدوات حصيرة.
لذا، يتيح لي شريط أدوات الحصيرة تصميم
شريط أدوات يمكنني استخدامها في تطبيقي الزاوي.
يتم عرض شريط الأدوات عادة في أعلى صفحتك داخل التطبيق الخاص بك.
لذلك، بالنسبة لشريط الأدوات هذا، سأحدد اللون كأساسي.
سنرى ما يعنيه هذا في فترة قصيرة.
وأيضا سنقوم بإغلاق هذا شريط أدوات MD هنا.
الآن داخل هذا أنا ذاهب لاستخدام فترة مع
اسم مطعمي الذي أنا تصميم هذا الموقع.
إذاً، (ريستورانتي كون فيوجن)
الآن ترى لماذا سميت هذا المجلد بالارتباك.
لذا، ما هو التحديث الذي نحتاج إلى القيام به لملف HTML المكون التطبيق.
بينما نحن في ذلك، سنقوم أيضًا بتضمين بعض تحديثات SCSS إلى ملف Styles.scss الخاص بي.
لذلك، إذا ذهبت إلى التعليمات البرمجية الخاصة بك هنا،
وسوف تجد هذا الملف الأنماط. scss هنا.
لذلك، هذا هو المكان الذي يمكنك تضمين جميع الأنماط العالمية في
هذا الملف وهذا سوف يكون متاحا لجميع المكونات للاستفادة من.
يحتوي كل مكون على ملفات SCSS الخاصة به حيث يمكنك تضمين
تخصيص مستوى المكون أو
رمز SCSS مستوى المكون لاستخدامها ضمن هذا المكون المحدد.
سوف نستخدم كلا النهجين ضمن
هذا التطبيق الزاوي الذي نقوم بتطويره في هذه الدورة.
ولكن الآن أنا ذاهب لتحديث
ملف الأنماط الرئيسية. scss مع بعض التعليمات البرمجية التي سوف تكون مفيدة لتطبيق الزاوي كله.
أول شيء سأقوم به،
هو استيراد موضوع مبني مسبقًا متاح من خلال المواد الزاوي.
هذا الموضوع بنيت مسبقا في المواد الزاوي يوفر لنا وسيلة لتحديد
بعض الألوان والطريقة التي
وضعت بعض الأشياء داخل بلدي مكونات المواد الزاوي.
الألوان التي سوف تكون متاحة من خلال الإطار مسبقا اللون الأساسي لدينا،
لون لهجة، ولون التحذير.
الآن يسمى الموضوع المحدد الذي سأستخدمه بنفسجي عميق.
لذلك، في هذه الحالة سيكون اللون الأساسي بيربل عميق.
سيكون لون اللكنة العنبر وسيكون لون التحذير أحمر في هذه الحالة.
الآن يمكنك بناء المواضيع المواد الزاوي الخاصة
بك التي يمكنك استخدامها داخل التطبيق الخاص بك ولكن
سأترك ذلك كممارسة لك لاستكشاف بنفسك.
الآن داخل تطبيقي الزاوي، سأستخدم أحد
الأشياء التي تم بناؤها مسبقًا تسمى العنبر الأرجواني العميق.
لذلك، للقيام بذلك الذهاب إلى ملف Styles.scss،
وسوف استيراد
المواد الزاوي
المواضيع مسبقا عميقة الأرجواني amber.CSS.
لذلك، هذا الموضوع واحد بنيت مسبقا سوف الاستفادة من داخل بلدي التطبيق الزاوي.
سترى قريبًا كيف يعمل هذا الموضوع مسبقًا في
التطبيق الزاوي في القوالب التي قمنا بتصميمها لتطبيقنا الزاوي.
بالإضافة إلى ذلك، سأقوم بتكوين بعض الخصائص
لجسم صفحة index.HTML حتى أقوم بتحديد الحشو كصفر،
الهامش كصفر، ثم عائلة الخط التي
سأستخدمها هي rubato أو sans serif داخل طلبي.
يمكنك اختيار استخدام ما تريد داخل تطبيقاتك الزاويّة.
اخترت استخدام هذين داخل تطبيقي الزاوي.
دعونا حفظ التغييرات،
ودعونا نذهب ونلقي نظرة سريعة على التطبيق الزاوي لدينا في المتصفح.
قبل القيام بذلك،
تأكد من تشغيل خدمة NG في
أحد النوافذ الطرفية في جهاز الكمبيوتر الخاص بك.
يجب أن يكون خادم التطوير قيد التشغيل بشكل مستمر بحيث يقوم
تلقائيًا بإزالة البيانات ثم تحميل
الإصدار المحدث من التطبيق الزاوي في نافذة المتصفح.
الذهاب إلى المتصفح،
ترى الآن التغييرات التي أجريناها على
التطبيق الزاوي تنعكس في طريقة العرض في
المتصفح الخاص بي حتى تتمكن من رؤية أن لدينا الآن شريط أدوات في الجزء العلوي مع
الصيغ التي قمنا بتضمينها في ملف قالب مكونات التطبيق هناك.
ويمكنك رؤية اللون الذي تم تطبيقه على شريط الأدوات.
وبالتالي فإن اللون، اللون الأساسي،
لذلك هذا هو اللون الأرجواني العميق الذي يتم تطبيقه على شريط الأدوات.
الآن السمة التي قمنا بتعريفها سوف تضيف إما اللون الأرجواني العميق أو العنبر،
اعتمادا على ما يتم استخدامه من قبل مكونات المواد الزاوي المحددة
التي نستخدمها في قوالب التطبيقات الزاوي لدينا.
مع هذا نكمل هذا التمرين.
في هذا التمرين، قمنا بتكوين تطبيقنا الزاوي
للاستفادة من المواد الزاوي والتخطيط المرن الزاوي.
استخدمنا أيضًا أول مكون مادة الزاوي في ملف قالب مكونات التطبيق.
واستخدمنا موضوع المدمج في من المواد الزاوي لتطبيقنا الزاوي.
حفظ جميع التغييرات ومن ثم هذا هو الوقت المناسب بالنسبة لك
للقيام جيت الالتزام مع الرسالة تكوين الزاوي.