6 : Angular2 – Templates القوالب
السلام عليكم ورحمة الله وبركاته
نعود لنتابع سلسلتنا حول angular 2, لنتحدث ضمن هذه الحلقة عن القوالب templates ضمن angular 2.
تستخدم القوالب ضمن المكونات components بهدف تحديد واجهة العرض التي ستظهر لهذا المكون.
اي بهدف تحديد كود Html او تشير لصفحة Html تحوي الكود المطلوب لعرضه لهذا المكون.
ستكون هذه الحلقة بمثابة حلقة بسيطة وسريعة, نوضح فيها فكرة القوالب, لنتابع في حلقات قادمة الحديث عن موادر اخرى ضمن angular 2.
ضمن حديثنا المكونات في الحلقة السابقة, كنا قد عرضنا بعد اجزاء الكود التي كانت تحتوي على تعريف للقوالب templates.
كما في الصورة ادناه:
يعرف هذه الاسلوب ب ‘Inline template’. حيث يتم بعد تعليمة‘template’ عرض كود html المطلوب عرضه والخاص بهذا المكون.
هنالك طريقة اخرى لتعريف القالب template, والتي تتم عبر استخدام التعليمة ‘templateURL’.
الهدف من استخدام تعليمة templateURL هي الاشارة الى مسار الملف الذي يحوي كود html, بدلا من ذكر الكود مباشرة في نفس ملف المكون component كما هي الحال عند استخدام تعليمة template
طريقة استخدامها كمايلي:
فيما يلي سنذكر الخطوات المطلوبة لتعريف ‘template’:
- انشأ ملف بالاسم التالي:
component.html
والذي بدوره سيحوي على كود Html اللازم لعرضه.
- اضف الكود التالي ضمن الملف الذي قمت بإنشاءه
حيث قمنا بتعريف div ووضعنا داخلها مرجع للخاصية ‘appTitle’ المعرفة ضمن app.component.ts - ضمن ملف app.omponent.ts ضع الكود التالي:
كما هو واضح من الكود, فقد قمنا باستخدام التعليمة ‘templateURL’ بهدف الاشارة لملف app.component.html. - الآن قم بتشغيل الكود ضمن المتصفح, وسوف تحصل على الخرج التالي:
كما هو واضح, فقد تم استدعاء app.component.html وعرضه, مع تعويض قيمة الخاصية appTitle بالقيمة المسندة لها.
————–
كما نلاحظ فإن استخدام القوالب templates ضمن angular 2 بسيط جدا ومفيد في تنظيم العمل.
كانت هذه حلقة بسيطة جدا, وقصيرة, لننتقل في الحلقة القادمة ان شاء الله للحديث عن الموجهات Directives
والى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته
الترجمة | المصطلح |
مفتوح المصدر | Open source |
اطار عمل | framework |
تطبيق | application |
واجهات العرض | Views |
النشر | Deployment |
مخدم الويب | Web server |
منصة عمل | Platform |
موديول | Module |
صف | Class |
فعالية | Functionality |
مكون | Component |
استيراد | import |
قالب | template |
المراجع: