6 : Angular2 – Templates القوالب

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

نعود لنتابع سلسلتنا حول angular 2, لنتحدث ضمن هذه الحلقة عن القوالب templates ضمن angular 2.

تستخدم القوالب ضمن المكونات components بهدف تحديد واجهة العرض التي ستظهر لهذا المكون.template

اي بهدف تحديد كود Html او تشير لصفحة Html تحوي الكود المطلوب لعرضه لهذا المكون.

 

ستكون هذه الحلقة بمثابة حلقة بسيطة وسريعة, نوضح فيها فكرة القوالب, لنتابع في حلقات قادمة الحديث عن موادر اخرى ضمن angular 2.

ضمن حديثنا المكونات في الحلقة السابقة, كنا قد عرضنا بعد اجزاء الكود التي كانت تحتوي على تعريف للقوالب templates.

كما في الصورة ادناه:

1 - template.JPG

يعرف هذه الاسلوب ب ‘Inline template’. حيث يتم بعد تعليمة‘template’  عرض كود html المطلوب عرضه والخاص بهذا المكون.

هنالك طريقة اخرى لتعريف القالب template, والتي تتم عبر استخدام التعليمة ‘templateURL’.
الهدف من استخدام تعليمة templateURL هي الاشارة الى مسار الملف الذي يحوي كود html, بدلا من ذكر الكود مباشرة في نفس ملف المكون component كما هي الحال عند استخدام تعليمة template

طريقة استخدامها كمايلي:

2- templateURl syntax.JPG

فيما يلي سنذكر الخطوات المطلوبة لتعريف ‘template’:

  • انشأ ملف بالاسم التالي:
    component.html
    والذي بدوره سيحوي على كود Html اللازم لعرضه.
    app_component.jpg
  • اضف الكود التالي ضمن الملف الذي قمت بإنشاءه
    step 2 of inline.JPG
    حيث قمنا بتعريف div ووضعنا داخلها مرجع للخاصية ‘appTitle’ المعرفة ضمن app.component.ts
  • ضمن ملف app.omponent.ts ضع الكود التالي:
    step 3 of inline.JPG
    كما هو واضح من الكود, فقد قمنا باستخدام التعليمة ‘templateURL’ بهدف الاشارة لملف app.component.html.
  • الآن قم بتشغيل الكود ضمن المتصفح, وسوف تحصل على الخرج التالي:
    run_the_code.jpg.png

كما هو واضح, فقد تم استدعاء 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/

 

Advertisements

, , , , , , , , ,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: