3:القوالب الديناميكية مع AngularJs
القوالب الديناميكية Angular Dynamic template
السلام عليكم ورحمة الله وبركاته
نتابع معكم ضمن الدرس الثالث تعلم angularJs عبر مثال تطبيقي
كما نذكر, فإننا وصلنا في الدرس السابق إلى تشغيل تطبيق ويب يحوي على تعابير expression يتم تقييمها واظهار نتيجتها على الصفحة
{{‘yet’ + ‘!’}}
أما الآن, ولكي نظهر لكم قوة و قدرة angularJs على تحسين كود هتمل HTML , فإننا سوف ننشأ صفحة هتمل HTML ستاتيكية غير ديناميكية, ومن ثم سوف نرى كيف بإمكاننا تحويل هذه الصفحة إلى قالب template يستخدمه angular ليعرض بشكل ديناميكي بعض النتائج لمجموعة من المعطيات.
اي باختصار سوف نحول صفحة ستاتيكية مكتوبة بهتمل HTML إلى صفحة ديناميكية فقط عبر اضافة كود AngularJs إليها.
في هذه المرحلة, سوف تحتاج إلى اضافة بعض المعلومات الاساسية عن الهواتف الخلوية إلى صفحة هتمل HTML.
بعد ذلك سوف تحوي الصفحة على قائمة بمعلومات حول هاتفين.
سيتم ادراج التعديلات المهمة على الكود ادناه. بإمكانك ان ترى الفروقات الكاملة بالكود من الرابط التالي على GIT GitHub.
app/index.html:
الآن, حان الوقت لتحويل هذه الصفحة الستاتيكية إلى صفحة ديناميكية – عبر اضافة AngularJs.
هنالك عدة طرق لتنسق عبرها الكود ضمن تطبيقك. أما بالنسبة لتطبيقات angular, فإننا نشجع استخدام MVC – Model-View-Controller Design Pattern لتنسيق وتنظيم الكود وبهدف عصر العناصر بشكل عملي ومنظم.
مع الاخذ بعين الاعتبار الفكرة السابقة, سنبدأ بإضافة كود angular و javascript مراعين اثناء ذلك التنظيم الذي يوزع الكود بين نموذج معطيت Model و View صفحات للاظهار و متحكم Controller.
سيتم الآن توليد قائمة بمعلومات الهواتف الثلاثة بشكل ديناميكي من المعطيات.
نحضر النسخة المتوافقة من الكود مع هذا الدرس من Git عبر التعليمة التالية :
git checkout –f step-2
ستلاحظون بأنه قد تم تحميل نسخة مختلفة من الكود ضمن المشروع angular-phonecat
سيتم ادراج التعديلات الاساسية ادناه, اما اذا رغبتم باستعراض كافة الفروقات, بإمكانكم الاطلاع عليها من GitHub.
الصفحات والقوالب views and templates
ضمن angular تعتبر الصفحة view عبارة عن انعكاس لنموذج المعطيات model عبر قالب هتمل HTML template.
هذا يعني بإنه ما إن يتغير نموذج المعطيات model حتى يحدث angular النقاط المرتبطة binding points به مباشرة والتي بدورها تحدث صفحة الاظهار view.
فيما يلي صفحة الاظهار view التي تم انشائها بواسطة angular
app/index.html:
قمنا باستبدال قائمة معلومات الهواتف الستاتيكية من صفحة هتمل بموجه ngRepeat وتعبيرين angular expression:
- الخاصية ng-repeat=”phone in phones” المتواجدة ضمن تاغ <li> عبارة عن موجه تكرار خاص ب angular
Angular repeater directive
يخبر موجه التكرار هذا angular بإن ينشأ عنصر <li> لكل هاتف من الهواتف ضمن القائمة وذلك باستخدام تاغ <li> بمثابة قالب. - التعابير الواردة ضمن الاقواس المجعدة المضاعفة
{{phone.name}} {{phone.snippet}}
سيتم استبدالها فيما بعد بالقيم الناتجة عنها
كما نلاحظ بأننا قد قمنا بإضافة موجه جديد يدعى ng-controller, والذي يقوم بربط المتحكم PhoneListCtrl controller بتاغ <body>.
إن التعابير المتواجدة ضمن الأقواس المجعدة المضاعفة {{phone.name}} {{phone.snippet}} تشير إلى مواقع الربط binding points ضمن الكود, والتي تشير إلى معطيات ضمن النموذج model الخاص بتطبيقنا, والمتواجد تحت المتحكم PhoneListCtrl controller.
ملاحظة:
تم تحديد النموذج angular model عبر استخدام الكود التالي ng-app=’phonecatApp’ , حيث أن phonecatApp يمثل اسم نموذجنا.
والنموذج سيحوي بدوره على المتحكم phoneListCtrl.
النموذج والمتحكم Model and Controller
نموذج المعطيات data model (في حالتنا عبارة عن مصفوفة من الهواتف )
كما نلاحظ من الصورة اعلاه, بأننا عن طريق الموجه ng-app نقوم بتحديد النطاق الجذر root scope لتطبيق angular
اما الموجه ng-controller فيحدد نطاق الموجه controller scope ضمن تطبيق angular
حيث ان المتحكم controller هو ببساطة عبارة عن باني constructor function يأخذ $scope كمعامل:
app/js/controllers.js:
كما نلاحظ من الكود اعلاه, بأننا قد صرحنا عن المتحكم الذي يدعى PhoneListCtrl وسجلاه ضمن موديول angularJs المسمى ب phonecatApp.
ملاحظة :
الموديول – module – عبارة عن شيء يشبه الحزمة ضمن جافا java package, ويستخدم بمثابة حاوية container لتجميع عدة امور ضمن اطار واحد.
لاحظ بأن الموجه ng-app ( الموجود ضمن تاغ <html>) يحدد اسم الموديول phonecatApp الذي سيتم تحميله فور تهيئة تطبيق angular.
بالرغم من ان المتحكم لا يقوم بالكثير في الوقت الحالي, ولكنه وكما سنرى فيما بعد يلعب دور رئيسي بالعمل.
يسمح لنا المتحكم controller بإنشاء عملية ربط المعطيات data-binding بين النموذج model وصفحة العرضview.
نلخص عملية الربط بين صفحات العرضpresentation , والمعطيات data, ومنطق الربط بين المكونات كما يلي:
- الموجه ngController – الموجود ضمن تاغ <body> – يشير إلى اسم المتحكم, PhoneListCtrl (موجود ضمن ملف جافاسكريبت js).
- يربط المتحكم PhoneListCtrl بين معطيات الهواتف وبين المتغير الذي يدعى $scope –نطاق – والذي تم ادخاله ضمن تابع المتحكم controller function. إن المتغير الذي يدعى “نطاق” scope بمثابة سليل اولي من نطاق الجذر root scope الذي قمنا بإنشاءه بمجرد تعريف التطبيق ng-app.
إن نطاق المتحكم controller scope متاح لكل نقاط الربط المتواجدة ضمن ما تشمله تاغ <body ng-controller=”PhoneListCtrl”>
النطاق Scope
يعتبر مفهوم النطاق scope ضمن angular من المفاهيم الاساسية والمهمة جدا.
من الممكن النظر للنطاق scope على انه بمثابة الصمغ الذي يمكن كل من القالب template والنموذج model والمتحكم controller من ان يعملوا مع بعضهم البعض.
يستخدم angular النطاقات scopes جنبا إلى جنب مع المعلومات الواردة في القالبtemplate, ومع نموذج المعطيات data model, والمتحكم controller بحيث يحافظ على الفصل بين صفحات الواجهة وبين نموذج المعطيات, ومع الحفاظ على التزامن.
اي كما ذكرنا هو عبارة صلة الوصل والصمغ بين المكونات المختلفة والتي تساعدنا على الحفاظ على فصلها والتنظيم بينها.
اي تغيير يطرأ على على النموذج model ينعكس على صفحات العرض view, واي تغيير يطرأ على صفحات العرض view ينعكس بدوره على النموذج model .
لتعلم المزيد عن النطاقات angular scopes, بالامكان الاطلاع على الرابط التالي:
تجارب :
- سنضيف ربط اخر إلى صفحة html, كما يلي:
<p> Total number of phones: {{phones.length}} </p> - سننشأ خاصية جديدة ضمن النموذج model property ضمن المتحكم, ونربطها ضمن القالب كما يلي:
$scope.name = “World”;
نربطها ضمن صفحةhtml كما يلي
<p> Hello, {{name}}!</p>
الآن اعد تحميل الصفحة f5, ولاحظ العبارة “Hello, World!” - نضع الكود التالي في صفحة html
<table>
<tr>th> row number </th></tr>
<tr ng-repeat=”I in [0, 1, 2, 3, 4, 5, 6, 7]”><td> {{i}}</td></tr>
</table>
عند استعراض الصفحة سيظهر لنا مايلي
الخلاصة:
اصبح لدينا الآن تطبيق ويب بصفحات ديناميكية باستخدام angularJs فقط!
وتطبيقنا الحالي يتألف من العناصر الاساسية لأي تطبيق يعمل وفق MVC
- Model نموذج المعطيات
- Controller المتحكم
- View صفحات العرض
كما لاحظنا استطعنا عبر خطوات بسيطة ومنظمة تحويل صفحة html ثابتة إلى صفحة ديناميكية بفضل استخدام قوالب angular
سنكتفي بهذا القدر عند هذه الحلقة, وإلى لقاء قريب في الحلقة القادمة التي سوف سنرى فيها كيف بإمكاننا اضافة امكانية البحث إلى تطبيقنا الديناميكي.
وإلى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته
| الترجمة | المصطلح |
| الموجه | Directive |
| تعبير | Expression |
| الربط | Binding |
| سياق | Context |
| نطاق | Scope |
| موديول – وهو ما يشبه الحزمة | Module |
Tag:MVC
