يتكون تطبيق Angular النموذجي من العديد من المكونات.
تتحكم المكونات في جزء من الشاشة يسمى كطريقة عرض في Angular.
لذلك، عند إنشاء شاشتك على تطبيق Angular
الخاص بك، يمكنك تقسيم الشاشة إلى طرق عرض متعددة،
يتم التحكم في كل منها بواسطة مكون منفصل.
حتى الآن، في المثال،
لدينا مكون جذر واحد يتحكم في الشاشة بأكملها.
في هذا الدرس، سوف نضيف مكوناً آخر يأخذ جزءاً من الشاشة
ويتحكم في ذلك الجزء من الشاشة ويعتني
بالعرض الكامل لهذا الجزء من الشاشة، هنا.
دعونا نقوم بزيارة سريعة إلى مكون التطبيق الذي
لدينا بالفعل كجزء من تطبيقنا الزاوي.
لذلك، في هذا المكون،
يمكنك أن ترى أننا نستورد المكون من Angular core.
لذلك، وهذا يوفر لنا القدرة على
تحديد مكون الديكور وتطبيقه على صفنا.
لذا، سيحدد هذا مكونًا واحدًا يشكل جزءًا من تطبيقنا Angular.
لذلك، هنا، هذا المكون معين،
كما ترون، عند تعريف الديكور المكون،
فإنه يتكون من عدة خصائص هنا واحد منهم هو المحدد، هنا.
الآن، هذه الخاصية محدد معين يحدد سلسلة هنا.
لاحظ، على وجه الخصوص، ما هو موجود داخل السلسلة.
وتقول الجذر التطبيق.
الآن، وبالنظر إلى الوراء في ملف index.html.
لذلك، أنا ذاهب إلى ملف index.html.
يمكنك أن ترى أن هناك حق،
ونحن نستخدم هذا التطبيق الجذر باعتبارها واحدة من العلامات في ملف index.html لدينا.
لذا، ترى الآن أن هذه العلامة المعينة التي تستخدمها تشير
إلى محدد ما حددناه هنا، جذر التطبيق.
لذا، إذا كنت ترغب في إعطاء جزء من الشاشة وجعل ذلك قابلاً للتحكم بواسطة مكون،
فإنك تستخدم المحدد لتحديد ثم ستقوم بتضمين
علامة التحديد في ملف HTML الخاص بك.
نفس الشيء ينطبق أيضا على قالب مكون.
إذا قمت بتضمين محدد آخر من مكون آخر
في قالب هذا المكون،
فسيتم تسليم هذا الجزء من الشاشة إلى
المكون الثاني ليتم التحكم فيه من المكون الثاني.
وسوف نتعلم أيضا عن ذلك في واحدة من الدروس اللاحقة.
الآن، الجزء الثاني الذي تراه يتم تحديده هو TemplateUrl.
يحدد هذا TemplateUrl اسم ملف القالب لهذا المكون معين.
لذلك، في هذه الحالة، كما ترون، هذا هو app.component.html.
لذلك، هذا هو السبب في أن القالب يتم تعريفه في
ملف app.component.html لهذا المكون معين.
وبالإضافة إلى ذلك، يمكنك أيضا توفير أنماط لهذا التطبيق.
لذلك، نحن هنا نقول StyleUrls ثم هنا،
بين قوسين معقوفين كنت توريد هذا القول. /app.component.scss.
لذلك، مما يعني أن ملف SaaS معين يتم تطبيقه على هذا النمط.
لذا كما رأيت عندما
أنشأنا تطبيق Angular الخاص بنا، حددت تنسيق النمط الذي سأستخدمه هو SCSS.
لذلك، هذا هو السبب في أن هذه الملفات هي SCSS.
إذا كنت لا تستخدم نمط SCSS وبدلاً من ذلك إنشاء بشكل طبيعي،
فستكون هذه ملفات CSS فقط ثم يمكنك استخدام CSS لتحديد
الأنماط التي يمكن استخدامها في قوالب التطبيق أو في قوالب المكونات الخاصة بك.
لذلك، إذا كان لديك أي
أنماط محددة المكونات التي تريد تضمينها لهذا المكون معين،
ثم سوف تضمينها في هذا الملف.
يمكنك أيضًا تحديد القالب والنمط المضمن.
لذلك، إذا قمت بتحديد النمط أو القالب المضمن،
فستحدد ببساطة ذلك كما هو الحال مع علامات الاقتباس الخلفية.
لذلك، على سبيل المثال، يمكنني ببساطة،
بدلاً من القيام بـ TemplateUrl،
يمكنني ببساطة تحرير هذا إلى القالب
ثم سأحدد القالب داخل علامات الاقتباس الخلفية هنا.
لذلك أود أن أقول وداخل كووتس الخلفي يمكنني حتى القيام قوالب مثل هذا.
لذلك، أستطيع أن أقول H1 ثم العنوان.
لذلك، سيكون هذا ما نسميه كقالب مضمّن نستخدمه داخل تطبيقنا.
الآن، إذا كنت تستخدم علامات الاقتباس مرة أخرى،
يمكنك أيضًا استخدام أشياء مثل إضافة الدولار
لاستخدام المتغيرات داخل القوالب الخاصة بك وما إلى ذلك.
في هذه الدورة بالذات،
سنقوم باستخدام ملفات قالب منفصلة
وإنشاء القوالب في ملفات HTML تلك بدلاً من ذلك.
أنا أفضل هذه الطريقة لتحديد القوالب الخاصة بي بدلا من القيام قوالب مضمنة.
ولكن إذا كان القالب الخاص بك بسيطًا جدًا ويحتوي على سطرين أو ثلاثة أسطر فقط،
فحينئذٍ، استخدم قالب مضمّن مثل هذا داخل تطبيقك.
لذلك، اسمحوا لي أن تغييره مرة أخرى إلى القيمة الأصلية بلدي هنا.
نفس الشيء للأنماط
أيضا، يمكنني ببساطة أن أقول الأنماط ثم داخل علامات الاقتباس الخلفية
تشمل فئات CSS الخاصة بي داخل علامات الاقتباس الخلفية.
على الرغم من أنه كما ذكرت،
فأنا أفضل الاحتفاظ بها في ملفات منفصلة فقط لوجود رمز نظيف في ملفات.ts الخاصة بي هنا.
لذلك لدينا أنماط قالب محدد.
سيكون لدينا أيضا واحد آخر يسمى معرف الوحدة النمطية.
في هذه اللحظة، لا أستخدم ذلك للمكون الخاص بي،
ولكن في بعض الحالات ستحتاج إلى تحديد معرف الوحدة بشكل صريح للمكون الخاص بك.
سنرى بعض الأمثلة على ذلك في وقت لاحق قليلا.
الآن بالإضافة إلى ذلك، المكون ليس سوى فئة JavaScript أو فئة Type Script.
لذلك هذا هو السبب في أنك ترى هنا،
وتحديد فئة تقول AppComponent ثم تقوم بتصدير هذه الفئة.
السبب في أننا نستخدم التصدير هنا،
بحيث يمكن استيراد هذا المكون إلى وحدة التطبيق الخاصة بي.
لذلك رأيت أننا كنا نستورد هذا إلى وحدة التطبيق الخاصة بي.
لذلك كلما كنت ترغب في جعل أي مكون أو وحدة نمطية في المحمولة في وحدة نمطية أخرى،
فإنك دائما ما قبل التصدير إلى الفصل هنا.
لذا، بالإضافة إلى ذلك،
نرى أيضًا أن لدينا بعض الخصائص المحلية التي حددناها
داخل فصولنا هنا وستكون هذه متاحة من خلال القالب الخاص بي.
حتى أتمكن من الاستفادة من هذه في القالب الخاص بي.
لذلك يمكن
الوصول إلى الخصائص التي يتم تعريفها داخل ملف component.ts الخاص بي من ملفات القالب الخاصة بي.
سنتحدث عن ربط البيانات في وقت لاحق قليلا في درس آخر.
لتلخيص، ما تعلمناه حتى الآن هو أن يتم تعريف مكون من خلال
تحديد التعليمات البرمجية وأيضا تحديد القالب المقابل.
لذلك، داخل التعليمات البرمجية يمكنك تحديد الخصائص والأساليب
التي يمكن الوصول إليها من القالب الخاص بك من القالب المقابل.
لذلك، كما رأيت، في البيانات الوصفية،
في الديكور، في ديكور المكون،
قمت بتحديد اسم ملف القالب كواحدة
من خصائص فئة المكون الخاص بك هنا.
وبالمثل،
سيتم الوصول إلى أي خصائص وأساليب تحددها في المكون الخاص بك من القالب الخاص بك.
ليس ذلك فقط، يمكنك أيضًا الحصول على ما يسمى
بربط الحدث من القالب الخاص بك إلى المكونات الخاصة بك.
لذلك، إذا تم إنشاء أي أحداث في القوالب الخاصة بك، لذلك على سبيل المثال،
النقر على زر في القالب الخاص بك الذي يمكن أن يؤدي
المكالمات إلى أساليب داخل التعليمات البرمجية هنا،
جافا سكريبت أو رمز نوع البرنامج النصي هنا.
وسوف نرى استخدام تلك في واحدة من الدروس اللاحقة وبعد ذلك هناك، وسوف، مرة أخرى،
إعادة النظر في هذه النقطة حول الملكية ملزمة والحدث،
وشرح هذا لك بمزيد من التفصيل.
يمكن تنظيم المكونات في تطبيق Angular نفسها في تسلسل هرمي.
لذلك، سيكون لديك دائما مكون الجذر.
لذلك بالنسبة لتطبيقنا،
يشكل ملف app.component.ts وقالب HTML المقابل المكون الجذر لتطبيقنا
ويمكن أن يحتوي هذا المكون الجذر على
مكونات أسفل في التسلسل الهرمي ويمكن أن يتضمن مكونات في التسلسل الهرمي.
سنرى أنه في التمرين التالي،
حيث سننشئ مكونًا آخر ثم نستخدم ذلك في مكون الجذر لدينا.
لذلك، يمكن أن يكون لديك مكونات متعددة يتم
تضمينها في مكون الجذر الخاص بك وهذه المكونات
نفسها بدورها يمكن استخدام المكونات الأخرى التي يتم تضمينها داخلها.
لذا، فإن هذا التسلسل الهرمي للمكونات هو ما يمكّنك من تصميم شاشة التطبيق الخاص بك.
مع هذا الفهم السريع
للمكونات وكيف تكون المكونات مفيدة لتصميم تطبيقنا،
سننتقل الآن إلى التمرين التالي حيث سنقوم بإنشاء
وإضافة مكون آخر إلى تطبيق Angular الخاص بنا
ومن ثم سنقوم بتحديد قالب لهذا المكون ثم سنقوم الاستفادة من
هذا المكون داخل مكون الجذر لدينا لتصميم شاشتنا.