• Home
  • Courses
  • Portfolio
  • Contact
    Tiger 4 CodeTiger 4 Code
    • Home
    • Courses
    • Portfolio
    • Contact

      Angular 2

      • Home
      • Blog
      • Angular 2
      • 6 : Angular2 – Templates القوالب

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

      • Posted by Schwarztiger
      • Categories Angular 2
      • Date August 1, 2017
      • Comments 0 comment

      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/

       

      Tag:angular 2 template, angular component, Angular environment setup, AngularJs, mobile development, npm, Web Development, تطوير الويب, شرح angular 2

      • Share:
      author avatar
      Schwarztiger

      Previous post

      الحلقة 3: Memetic Algorithm Strategy الاستراتيجية
      August 1, 2017

      Next post

      7 : Angular2 - Directives الموجهات
      August 2, 2017

      You may also like

      demo_image
      12 : Angular2 – Forms النماذج
      18 August, 2017
      demo_image
      11 : Angular2 – Routing التوجيه
      8 August, 2017
      demo_image
      10 : Angular2 – Error Handling معالجة الأخطاء
      8 August, 2017

      Leave A Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Search

      Latest Courses

      Android Development

      Android Development

      $950.00
      HTML Tutorial: HTML & CSS for Beginners

      HTML Tutorial: HTML & CSS for Beginners

      $800.00
      Learn WordPress Content Management System

      Learn WordPress Content Management System

      Coming soon
      logo-eduma-the-best-lms-wordpress-theme

      info@tiger4code.com

      Links

      • Courses
      • Portfolio

      Copyright 2019 | Educational, Web & Mobile Development Platform By Tiger 4 Code