السلام عليكم ورحمة الله وبركاته

نعود لنتابع سلسلتنا حول 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

 

المراجع:

1. https://www.tutorialspoint.com/angular2/index.htm
2. الموقع الرسمي https://angular.io/