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

      AngularJs

      • Home
      • Blog
      • AngularJs
      • 3:القوالب الديناميكية مع AngularJs

      3:القوالب الديناميكية مع AngularJs

      • Posted by Schwarztiger
      • Categories AngularJs
      • Date March 20, 2016
      • Comments 0 comment

      القوالب الديناميكية Angular Dynamic template

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

      نتابع معكم ضمن الدرس الثالث تعلم angularJs عبر مثال تطبيقي

      كما نذكر, فإننا وصلنا في الدرس السابق إلى تشغيل تطبيق ويب يحوي على تعابير expression يتم تقييمها واظهار نتيجتها على الصفحة

      {{‘yet’ + ‘!’}}

      أما الآن, ولكي نظهر لكم قوة و قدرة angularJs على تحسين كود هتمل HTML , فإننا سوف ننشأ صفحة هتمل HTML ستاتيكية غير ديناميكية, ومن ثم سوف نرى كيف بإمكاننا تحويل هذه الصفحة إلى قالب template يستخدمه angular ليعرض بشكل ديناميكي بعض النتائج لمجموعة من المعطيات.

      اي باختصار سوف نحول صفحة ستاتيكية مكتوبة بهتمل HTML إلى صفحة ديناميكية فقط عبر اضافة كود AngularJs إليها.

      في هذه المرحلة, سوف تحتاج إلى اضافة بعض المعلومات الاساسية عن الهواتف الخلوية إلى صفحة هتمل HTML.

      بعد ذلك سوف تحوي الصفحة على قائمة بمعلومات حول هاتفين.

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

      app/index.html:

      static page.PNG

      الآن, حان الوقت لتحويل هذه الصفحة الستاتيكية إلى صفحة ديناميكية – عبر اضافة 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:

      ng-repeat

      قمنا باستبدال قائمة معلومات الهواتف الستاتيكية من صفحة هتمل بموجه 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.

      tutorial_02.png

       النموذج والمتحكم Model and Controller

      نموذج المعطيات data model (في حالتنا عبارة عن مصفوفة من الهواتف )

      كما نلاحظ من الصورة اعلاه, بأننا عن طريق الموجه ng-app نقوم بتحديد النطاق الجذر root scope لتطبيق angular

      اما الموجه ng-controller فيحدد نطاق الموجه controller scope ضمن تطبيق angular

      حيث ان المتحكم controller هو ببساطة عبارة عن باني constructor function يأخذ $scope كمعامل:

      app/js/controllers.js:

      controller

      كما نلاحظ من الكود اعلاه, بأننا قد صرحنا عن المتحكم الذي يدعى 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 من ان يعملوا مع بعضهم البعض.

      scope

      يستخدم angular النطاقات scopes جنبا إلى جنب مع المعلومات الواردة في القالبtemplate, ومع نموذج المعطيات data model, والمتحكم controller بحيث يحافظ على الفصل بين صفحات الواجهة وبين نموذج المعطيات, ومع الحفاظ على التزامن.

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

      اي تغيير يطرأ على على النموذج model ينعكس على صفحات العرض view, واي تغيير يطرأ على صفحات العرض view ينعكس بدوره على النموذج model .

      لتعلم المزيد عن النطاقات angular scopes, بالامكان الاطلاع على الرابط التالي:

      angular scope documentation.

       

      تجارب :

      359796918

      • سنضيف ربط اخر إلى صفحة 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>

      عند استعراض الصفحة سيظهر لنا مايلي

      page preview

      الخلاصة:

      اصبح لدينا الآن تطبيق ويب بصفحات ديناميكية باستخدام angularJs فقط!

      وتطبيقنا الحالي يتألف من العناصر الاساسية لأي تطبيق يعمل وفق MVC

      • Model نموذج المعطيات
      • Controller المتحكم
      • View صفحات العرض

      كما لاحظنا استطعنا عبر خطوات بسيطة ومنظمة تحويل صفحة html ثابتة إلى صفحة ديناميكية بفضل استخدام قوالب angular

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

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

       

      الترجمة المصطلح
      الموجه Directive
      تعبير Expression
      الربط Binding
      سياق Context
      نطاق Scope
      موديول – وهو ما يشبه الحزمة Module

       

       

       

      Tag:MVC

      • Share:
      author avatar
      Schwarztiger

      Previous post

      2: تهيئة تطبيق AngularJs
      March 20, 2016

      Next post

      4: الفلترة مع AngularJs
      March 29, 2016

      You may also like

      5: ربط المعطيات باتجاهين AngularJs -Two way binding
      8 April, 2016

      السلام عليكم ورحمة الله وبركاته سنتابع اليوم العمل على تطبيق angularJs لنستعرض المزيد من الميزات الرائعة التي يقدمها لنا اطار عمل AngularJs سنضيف ضمن هذه الحلقة بعض الميزات التي تتيح للمستخدم ان يتحكم بترتيب العناصر ضمن قائمة الهواتف. يتم تحقيق …

      4: الفلترة مع AngularJs
      29 March, 2016

      السلام عليكم ورحمة الله وبركاته نتابع ضمن هذه الحلقة التعرف على المزيد من الميزات الخاصة بAngularJs قمنا بالكثير من التعديلات على تطبيقنا خلال الخطوة السابقة – الدرس السابق – لذا سيكون درسنا الحالي مختصرا مفيدا. سوف نضيف امكانية بحث نصي …

      2: تهيئة تطبيق AngularJs
      15 March, 2016

      السلام عليكم ورحمة الله وبركاته نتابع ما بدأنا به في الحلقة السابقة من سلسلة تعلم angularJs وفق مثال تطبيقي خلال هذه الحلقة, سوف تطلعون على اهم ملفات المصدر المتواجدة ضمن مشروعنا angularJs phonecat. قبل أن نبدأ, تأكدوا من اعداد بيئة …

      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