Archive for category Angular 2

12 : Angular2 – Forms النماذج

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

هذه الحلقة الاخيرة من سلسلة angular 2
وسنتحدث ضمنها بشكل مختصر جدا عن النماذج Forms

بعد الانتهاء من هذه الحلقة, نكون قد اصبحنا جاهزين للبدء بسلسلة اخرى لتعليم برمجة تطبيقات الموبايلات.

حيث بتعلمنا برمجة angular 2 سيكون هنالك امامنا طريقين:

اما برمجة الموبايلات باستخدام Html 5 & Angular 2 باستخدام بعض اطر العمل المشهورة في هذا المجال, مثل OnsenUI

او برمجة تطبيقات الموبايل باستخدام Nativescript, والتي تدعم بشكل اساسي اطار عمل angular.

mastering-forms-in-angular-2

Forms in Angular 2

يمكننا تصميم النماذج forms التي تستخدم ربط المعطيات ثنائي الاتجاه two-way data binding عبر angular 2, وذلك باستخدام الموجه ngModel.

لنبدأ الآن مع مثال عملي يوضح ذلك.

الخطوة الأولى:

سوف ننشأ موديل خاص بالمنتجات بالاسم التالي
products.ts

1- products_ts.jpg.png

الخطوة الثانية:

ضع الكود التالي ضمن الملف الذي قمت بإنشاءه سابقا

عبارة عن صف بسيط يحوي معلومات عن هيكلية المنتج, اسم المنتج pdoductname , ومعرف المنتج productid.

2 code of product ts.JPG

الخطوة الثالثة:

انشأ مكون للمنتج product component بالاسم التالي

Product-form.component.ts

واضف اليه الكود التالي:

3.JPG

للتوضيح:

قمنا بإنشاء غرض object من صف المنتج product class, واضفنا له قيمة لكل من معرفي المنتج واسمه.

يستخدم templateUrl لتحديد موقع ملف
product-form.component.html الذي يمثل واجهة العرض لهذا المكون.

الخطوة الرابعة:

بهدف إنشاء النموذج form المطلوب, انشأ ملف باسم

Product-form.component.html

وضع فيه الكود التالي:

4.JPG

للتوضيح: تم استخدام موجه ngModel لربط الغرض product object لعدد من العناصر ضمن النموذج.

الخطوة الخامسة:

ضع الكود التالي ضمن ملف

App.component.ts

5.JPG

الخطوة السادسة:

ضع الكود التالي في ملف

App.module.ts

6.JPG

الخطوة السابعة:

بعد حفظ كل التعديلات التي اجريتها سابقا, شغل التطبيق باستخدم npm.

الآن اذهب الى المتصفح, وسترى الخرج التالي:

product_form.jpg.png

ببساطة قم انشاء نموذج form باستخدام angular 2  عبر عدة خطوات سهلة وبسيطة.

وعند هذه الحلقة تنتهي هذه السلسلة المختصرة من angular 2.

اجو ان تكون قد عادت بالفائدة المرجوة منها.

ولتكون بداية ننطلق منها الى باب اكبر في عالم البرمجة, الا وهو برمجة تطبيقات الموبايل.

والى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
التعامل مع الأخطاء Error handling
التوجيه Routing
مكون Component
استيراد import
قالب template
 الموجهات  Directives

المراجع:

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

 

Advertisements

, , , , , , , , ,

أضف تعليق

11 : Angular2 – Routing التوجيه

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

سوف نتحدث اليوم عن احد اهم المواضيع ضمن angular 2. ألا وهو التوجيه Routing.

routing.jpg

التوجيه Routing

يساعد التوجيه – وكما يوحي الاسم – على “توجيه” المستخدم الى عدة صفحات مختلفة.

ببساطة هو بمثابة موجة ووسيلة التنقل بين الصفحات.

سنوضح فيما يلي الخطوات اللازمة من اجل تنفيذ التوجيه routing ضمن تطبيق angular 2.

الخطوة الأولى:

اضف تاغ “المرجع الرئيسي” dbase reference tag الى ملف

Index.html

والهدف منه هو تحديد الصفحة الاساسية

1 - base ref.JPG

الخطوة الثانية:

انشأ موجهيين two routes ضمن تطبيقيك.

لفعل ذلك, انشأ ملفين بالاسماء المدرجة فيما يلي:

Inverntory.component.ts

Product.component.ts

2 open_editors.jpg.png

الخطوة الثالثة:

ضع الكود التالي ضمن ملف

Product.component.ts

3.JPG

الخطوة الرابعة:

ضع الكود التالي ضمن ملف
Inventory.component.ts

4.JPG

لا يقوم اي من المكونين السابقين, باي شيء خارق للعادة 🙂 ببساطة الهدف منهم ان يتم عرض اسم المكون عن عرض صفحته, فقط لا غير.

اذن, فإن مكون Inventory سيعرض كلمة Inventory للمستخدم.

و مكون Products سيعرض كلمة Products للمستخدم.

 الخطوة الخامسة:

ضع الكود التالي ضمن ملف

App.module.ts

5.JPG

حسنا, سنوضح بعض النقاط من الكود السابق:

  • يحوي “appRoutes” على توجيهين اثنين, احدهم الى مكون Appproduct, والآخر الى مكون AppInventory component.
  • تم التصريح عن كلي من المكونات component في البداية باستخدام عبارة import.
  • عبارة forRoot هدفها اضافة الموجهات الى التطبيق.

الخطوة السادسة:

اضف الكود التالي الى ملف

App.component.ts

6.JPG

من الكود السابق, نجد تاغ
<router-outlet></router-outlet>

وهي بمثابة المكان الذي سيتم عرض المكون component الذي سيتم اختياره تبعا لخيار المستخدم.

 

الآن, بعد حفظ كل التغييرات السابقة, وتشغيل التطبيق باستخدام npm. اذهب الى المتصفح, ويجب ان ترى الخرج التالي:

output 1 product.jpg.png

عند الضغط على رابط Inventory, سنظهر الخرج التالي:

output 2.png

 

التعامل مع اخطاء التوجيه

بإمكاننا – كما في الدرس السابق – ان نضيف امكانية التعامل مع اخطاء التوجيه هنا ايضا.

تحدث اخطاء التوجيه عندما يذهب المستخدم الى صفحة غير موجودة ضمن التطبيق.

سنوضع فيما يلي كيف بإمكاننا تحقيق ذلك.

الخطوة الأولى:

اضافة مكون ليشير الذي سيتم توجيه المستخدم  عليه عند طلب صفحة غير موجودة

PageNotFound component

وليكن بالاسم التالي:

NotFound.component.ts

كما يلي:

eh 1 - notfound.jpg.png

الخطوة الثانية:

اضف الكود التالي الى الملف السابق.

eh 2.JPG

اضف الكود التالي الى ملف

App.module.ts

eh 3.JPG

يجب توضيح النقط التالية عن الكود السابق:

  • تم اضافة موجه اضافي route
    له المسار path: ‘**’
    والمكون PageNoteFoundComponent.
    حيث تم استخدام المسار ‘**’ للاشارة الى اي مسار توجيه لم يتوافق مع اي من المسارات السابقة المذكورة ضمن الموجه. حيث سوف يتم توجيه المستخدم عندها الى مكون PageNoteFoundComponent

 

احفظ كل التعديلات التي قمت بإجرائها, ومن ثم شغل التطبيق باستخدام Npm.

اذهب الى المتصفح, وسوف ترى الخرج التالي عند ادراج اي مسار غير صحيح.

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

eh result pagenotfound.jpg.png

ارجو ان تكون فكرة التوجيه قد توضحت ضمن المثال السابق, لانها مهمة جدا ضمن angular 2

في الحلقة القادمة سوف نتحدث عن موضوع “Navigation”

والى ذلك الحين, استودعكم الله والسلام عليكم ورحمة الله وبركاته

 

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
التعامل مع الأخطاء Error handling
التوجيه Routing
مكون Component
استيراد import
قالب template
 الموجهات  Directives

المراجع:

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

 

, , , , , , , ,

أضف تعليق

10 : Angular2 – Error Handling معالجة الأخطاء

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

سنتناول اليوم موضوع التعامل مع الأخطاء error handling  ضمن angular 2.

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

لذلك فبالرغم من قصر الحلقات, الا انها مفيدة جدا لتوضح امور اساسية سنستعملها مرارا وتكرارا فيما بعد ضمن برمجة الموبايلات.

image-why-angular-2

التعامل مع الأخطاء Error Handling

يتم التعامل مع الأخطاء في angular 2 عبر تضمين مكتبة ReactJs catch library, ومن ثم استخدام تابع “catch” بهدف التعامل مع الأخطاء.

بعيدا عن الكلام النظري, دعونا ننظر لمثال تطبيقي يوضح الصورة.

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

سنعدل على الكود ضمن ملف
product.service.ts

ليصبح على الشكل التالي:

code.JPG

من الصورة اعلاه, نجد ما يلي:

  • التابع Catch يحوي بداخله رابط للتابع المسؤول عن التعامل مع الخطأ Error handler function
  • ضمن تابع التعامل مع الخطأ error handler function, نقوم بارسال الخطأ الى خرج المتصفح browser console . كما اننا نقوم برمجي “throw” الخطأ الى البرنامج الرئيسي حتى يستمر تنفيذ البرنامج عند هذه النقطة.

بهذه الطريقة, كلما حدث خطأ ما, سيتم عرضه ضمن browser console.

نعم, وكما قلت لكم, حلقة مختصرة ومفيدة 🙂

الى اللقاء في الحلقة القادمة التي سنتحدث فيها عن التوجيه  Routing ضمن angular 2.

ويعد التوجيه هام جدا واساسي ضمن angular 2.

والى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
التعامل مع الأخطاء Error handling
فعالية Functionality
مكون Component
استيراد import
قالب template
 الموجهات  Directives

المراجع:

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

 

, , , , , , ,

أضف تعليق

9 : Angular2 – CRUD Operations Using HTTP

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

نتابع ضمن هذه الحلقة من سلسلة Angular 2 , بالحديث عن العمليات CRUD باستخدام Angular 2. وبشكل خاص سوف نتحدث عن امكانية قراءة المعطيات باستخدام web service من خلال اطار عمل angular 2.

angular-2-http

 

مثال:

سنقوم ضمن هذا المثال, بتعريف مصدر للمعطيات data source وسيكون ببساطة عبارة عن ملف json يحوي على مجموعة منتجات.

ومن ثم سوف نقوم بتعريف خدمة service, التي ستقوم بدورها بقراءة هذه المعطيات من ملف json. ومن ثم سوف نستخدم هذه الخدمة service ضمن ملف app.component.ts بهدف عرض المنتجات.

الخطوة الاولى:

سنقوم بتعريف ملف باسم products.json ضمن برنامج Visual Studio code – او اي محرر نصوص اخر.

1-product_service.jpg.png

سنضع الكود التالي ضمن ملف prodcuts.json.

الكود يمثل المعطيات – المنتجات – التي سوف نعرضها ضمن تطبيق angular 2.

1-1 products list.JPG

الخطوة الثانية:

سنقوم بتعريف Interface والتي سوف تكون بمثابة class لتعريف عناصر المنتج الذي نرغب بقراءة معلوماته.

انشأ ملف باسم products.ts.

2 products.jpg.png

الخطوة الثالثة:

ضع الكود التالي ضمن الملف الذي قمت بإنشاءه للتو.

3 - interface code.JPG

كما هو واضح من الكود اعلاه, فإن الواجهة Interface تحوي التعريف الاساسي لعناصر المنتج الا وهي:

  • ProductID
  • ProductName

والتي هي عبارة عن خواص ضمن هذه الواجهة.

الخطوة الرابعة:

ضع الكود التالي ضمن ملف app.module.ts:

4 app module ts.jpg

الخطوة الخامسة:

قم بتعريف الملف products.service.ts

5 define_products.jpg.png

الخطوة السادسة:

اضف الكود التالي للملف الذي قمت بإنشاءه للتو

6 product service.JPG

سنفصل بعض النقاط من الكود المذكور اعلاه:

  • تم استيراد كل من
    {Http, Response} from ‘@angular/http’
    لاننا سوف نستخدم التوابع الموجودة ضمن http بهدف احضار المعطيات من ملف json
  • العبارات المدرجة ادناه تستخدم بهدف تفعيل امكانية الاستفادة من اطارالعمل التفاعلي Reactive framework, والتي من الممكن استخدامها بهدف انشاء Observable variable.6 notes
  • Observable framework: يستخدم بهدف الكشف عن اي تغيرات تحصل في استجابة http, والتي يمكن عندها – اي بعد كشف هذه التغيرات – اعادة ارسالها الى التطبيق الاساسي.
  • تم استخدام عبارة
    private _producturl = ‘app/products.json’
    بهدف تحديد موقع ملف المعطيات data source file location.
    وبنفس الوقت, ممكن ان تستخدم بهدف تحديد موقع ومسار web service.
  • من ثم قمنا بتعريف متحول variable من نمط Http, والذي سوف يستخدم بهدف احضار المعطيات من مصدر المعطيات data source.
  • ما إن نحضر المعطيات من ملف مصدر المعطيات data source file, بعدها نقوم باستخدام تعليمة
    stringify(data)
    بهدف ارسال المعطيات الى browser consule.

الخطوة السابعة:

ضع الكود التالي ضمن ملف

App.component.ts

7.JPG

العنصر الاساسي ضمن الكود السابق يتمثل بخيار ‘subscribe’ والذي يستخدم للتنصت على التابع getproducts() لاحضار المعطيات من مصدر المعطيات.

 

الآن, وبعد حفظ كل الكود السابق, وتشغيل التطبيق باستخدام npm. اذهب الى المتصفح, وسوف ترى الخرج التالي – بعد الاستعانة ب f12  او ما يعرف ب Developer tools لكي تستطيع رؤية النتيجة ضمن browser console كما يلي:

result using_npm.jpg

وبهذا المثال البسيط والمفيد ننهي حلقتنا لهذا اليوم, ببساطة وبتطبيق نفس الخطوات.

يمكن احضار معطيات من web service وعرضها على المتصفح.

والى اللقاء في حلقة قادمة نتحدث فيها معالجة الاخطاء error handling ضمن angular 2.

والى ذلك الحين نستودعكم الله والسلام عليكم ورحمة الله وبركاته

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
صف Class
فعالية Functionality
مكون Component
استيراد import
قالب template
 الموجهات  Directives

المراجع:

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

 

, , , , , , , , , , , ,

أضف تعليق

8 : Angular2 – Data Binding ربط المعطيات

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

سنتحدث اليوم عن طريقة ربط المعطيات data binding  ضمن angular 2.

تعتبر خاصية ربط المعطيات باتجاهين عبارة عن ميزة كانت متواجدة ضمن angular js, ولكن تم ازالة هذه الميزة من الاصدار الجديد angular 2.data binding

لنوضح الآن  طريقة الربط ضمن angular 2.

1 class defnision.JPG

لنفترض بأن لدينا class  ويوجد ضمنه خاصية property لها قيمة ونمط معطيات كما يلي:

عندها, يصبح بإمكاننا ربط احدى خاصيات عناصر html بهذه الخاصية كما يلي:

2 html tag property.JPG

عندها سوف تسند قيمة هذه الخاصية Property الى خاصية عنصر html التي تم ربطها به.

سنطرح مثال عن كيفية تحقيق هذا النوع من الربط للمعطيات.

في مثالنا, سنعمد على عرض صور, بحيث ان مصدر الصور images source سوف يأتي من الخاصية الواردة ضمن ال class.

فيما يلي الخطوات المطلوبة لتحقيق هذا الربط:

  • قم بتحميل اي صورتين, على سبيل المثال, يمكن تحميل الصورة ادناه images_download.jpg.png
  • خزن هذه الصور ضمن مجلد يدعى “Images” ضمن مجلد “app”.
  • اضف الكود التالي الى ملف
    component.ts كما هو موضح في الشكل ادناه.
    3 step.JPG
  • اضف الكود التالي الى ملف
    component.html كما هو موضح ادناه
    4 step 4.JPG

كما نلاحظ في الكود اعلاه, فإننا نسند الخاصية src من الصورة الى الخاصية التابعة للصف.

النتيجة:

نتيجة تنفييذ البرنامج السابق ستُظهر كل صورة من الصور وبجوارها رقم.

————————

والى اللقاء في الحلقة القادمة التي سنتحدث فيها ان شاء الله عن عمليات الاضافة, الحذف, التعديل والاستعراض باستخدام HTTP.

الى اللقاء في الحلقة القادمة, والى ذلك الحين نستودعكم الله والسلام عليكم ورحمة الله وبركاته

 

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
صف Class
فعالية Functionality
مكون Component
استيراد import
قالب template
 الموجهات  Directives

المراجع:

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

 

, , , , , , , , , , ,

أضف تعليق

7 : Angular2 – Directives الموجهات

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

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

سنتحدث ضمن هذه الحلقة عن الموجهات directives ضمن angular 2

الموجهات Directives:

هنالك 3 انواع للموجهات directives ضمن angular 2. كما هو موضح بالشكل ادناه

angular 2 directives.PNG

Attribute directives:

مثل

  • ngClass
  • ngStyle

Structural Directive:

مثل:

  • ngIf
  • ngFor
  • ngSwitch

وهي ستكون حديثنا ضمن هذه الحلقة.

Directive : عبارة عن عنصر من عناصر Html, يستخدم بهدف توسعة امكانيات html عبر ردفها بعناصر جديدة.

تحوي angular 2 الموجهات directives التالية والتي يتم استدعائها كجزء من موديول BrowserModule.

  • ngif
  • ngFor

باستعراض ملف app.module.ts بإمكانك رؤية الكود ادناه, بالاضافة الى استدعاء موديول BrowserModule. عبر تعريف هذا الموديول, يصبح بإمكانك عندها الاستفادة من كل من هذين الموجهين ngif, ngFor.

1.JPG

الآن, دعونا ننظر الى كل موجه من هذه الموجهات على حدا.

 ngIf

يستخدم بهدف اضافة عناصر الى كود Html, وذلك في حال تحقق الشرط المنطقي الذي يتضمنه, والا فإنه لن تتم اضافة العنصر الى كود html.

2.JPG

في حال كانت القيمة المنطق

ية للتعبير المدرج مع ngIf محققة – اي تساوي true – عندها فإنه تتم اضافة العنصر المرتبط بها الى كود Html.  وإلا فإنه لن تتم اضافة العنصر.

دعونا الآن نطرح مثال لكيفية استخدام موجه ngif.

الخطوة الاولى:

في البداية قم بإضافة خاصية تدعى ‘appStatus’ الى AppComponent Class.  هذه الخاصية من النمط المنطقي Boolean. وسنسند القيمة true

الى هذه الخاصية.

3.JPG

الخطوة الثانية:

الآن قم بإضافة الكود التالي الى ملف
app.component.html

4

نجد في الكود السابق, بإننا قمنا بتعريف الموجه ngIf . واعطائه القيمة ‘appStatus’ التي هي في الاساس تملك القيمة true وبالتالي فإن الشرط المنطقي سوف يتحقق, وسوف يتم اضافة هذا العنصر الى كود html.

وكنتيجة لذلك سوف يظهر لنا الخرج التالي:

ngif.jpg.png

ngFor

يستخدم العنصر ngFor بمثابة حلقة تكرار loop.

5- ngFor.JPG

حيث ان المتحول let  عبارة عن متحول مؤقت يستخدم بهدف عرض القيمة الموجودة ضمن variablelist.

سنطرح الآن مثالا حول استخدام ngFor.

الخطوة الاولى:

اضف الخاصية ‘appList’ الى ملف app.comopnent.ts كما هو موضح بالشكل ادناه.

6 - ng for

كما هو واضح من الشكل, فإن appList عبارة عن مصفوفة مكونة من عنصرين.

كل عنصر منهما لديه خاصيتين: ID, Name.

الخطوة الثانية:

عرف الكود التالي ضمن ملف app.component.html.

7 - ng for

في الشكل اعلاه, نستخدم الموجه ngFor كحلقة تمر على كل عناصر المصفوفة appList وتقوم بعرضها.

وستظهر لنا  النتيجة عبر المتصفح كالتالي:

ngfor.jpg

وبهذا الحديث عن الموجهات directives نختم حلقتنا القصيرة لهذا اليوم, على ان نتابع في حلقة قادمة ان شاء الله الحديث عن ربط المعطيات ضمن angular 2.

———————————————

الى اللقاء في الحلقة القادمة

والى ذلك الحين نستودعكم الله والسلام عليكم ورحمة الله وبركاته

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
صف Class
فعالية Functionality
مكون Component
استيراد import
قالب template
 الموجهات  Directives

 

المراجع:

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

 

, , , , , , , , ,

أضف تعليق

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/

 

, , , , , , , , ,

أضف تعليق