حان الوقت لإعطاء صفحات الويب هذه بعض الميزات الديناميكية - استخدم AngularJS! لقد أضفنا اختبارًا لمكافحة وحدة التحكم لاحقًا.
هناك العديد من أنواع بنية التعليمات البرمجية للتطبيق. بالنسبة لتطبيقات AngularJS ، فإننا نشجع على استخدام وضع التحكم في عرض النموذج (MVC) لفصل التعليمات البرمجية ومخاوف منفصلة. مع وضع ذلك في الاعتبار ، نستخدم AngularJS لإضافة بعض النماذج ووجهات النظر ووحدات التحكم في تطبيقنا.
يرجى إعادة تعيين دليل العمل:
git checkout -f step -2
يحتوي تطبيقنا الآن على قائمة من ثلاثة هواتف.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 1 والخطوة 2 أدناه. ، يمكنك الذهاب إلى جيثب لرؤية الفرق الكامل.
وجهات النظر والقوالب
في AngularJS ، يتم عرض العرض بعد تقديم النموذج من خلال قوالب HTML **. هذا يعني أنه بغض النظر عن تغيير النموذج ، ستقوم AngularJS بتحديث نقاط الوصلات في الوقت الفعلي وتحديث العرض.
على سبيل المثال ، تم تصميم مكون العرض بواسطة AngularJS باستخدام القالب التالي:
<html ng-app> <head> ... <script src = "lib/Angular/Angular.js"> </script> <script src = "js/controllers.js"> </script> </head> <body ng-controller = "phonelistctrl"> <ul> <p> {{phone.snippet}} </p> </li></ul> </body> </html>لقد استبدلنا للتو قائمة الهواتف المحمولة المشفرة بشكل ثابت لأنه يمكننا تحقيق نفس التأثير باستخدام توجيه Ngrepeat وتعبيرات AngularJS ملفوفة في أقواس مجعد - {{phone.name}} و {{phone.snippet}}.
عبارة ng-repeat = "الهاتف في الهواتف" داخل العلامة <li> عبارة عن مؤلف من AngularJS. يخبر هذا التكرار AngularJS باستخدام علامة <li> الأولى كقالب لإنشاء عنصر <li> لكل هاتف في القائمة.
كما تعلمنا في الخطوة 0 ، فإن أقواس مجعد ملفوفة حول الهاتف. الاسم والهاتف. تحديد ربط البيانات. على عكس الحسابات الثابتة ، فإن التعبير هنا هو في الواقع مرجع نموذج بيانات قمنا بتطبيقه ، وقمنا بتعيينها في وحدة تحكم PhonelistCtrl.
النماذج ووحدات التحكم
تتم تهيئة نموذج البيانات في وحدة تحكم PhonelistCtrl (فيما يلي وظيفة تحتوي على صفيف ، والكائنات المخزنة في الصفيف هي قائمة بيانات الهاتف المحمول):
APP/JS/Controller.js:
الوظيفة phonelistctrl (scope $) {$ scope.imsons = [{"name": "Nexus s" ، "Snippet": "Fast JUT MOT WITHER S. "مقتطف": "الجيل التالي ، الجيل التالي اللوحي."}] ؛}على الرغم من أن وحدة التحكم لا يبدو أنها تلعب دورًا مهمًا للغاية ، إلا أنها تلعب دورًا مهمًا هنا. بالنظر إلى سياق نموذج البيانات الخاص بنا ، تتيح لنا وحدة التحكم إنشاء ربط البيانات بين النموذج والعرض. هذه هي الطريقة التي نربط بها طبقة العرض والبيانات ومكونات المنطق:
phonelistctrl - يطابق اسم طريقة وحدة التحكم (في وحدة التحكم في ملف JS.JS) قيمة توجيه NGController في علامة <Body>.
ترتبط بيانات الهاتف الآن بالنطاق (نطاق $) الذي تم حقنه في وظيفة وحدة التحكم الخاصة بنا. عند بدء تشغيل التطبيق ، يتم إنشاء نطاق جذر ، ونطاق وحدة التحكم هو خليفة نموذجي لنطاق الجذر. يكون نطاق وحدة التحكم هذه صالحة لربط البيانات داخل جميع علامات <body ng-controller = "phonelistctrl">.
تعد نظرية نطاق AngularJS مهمة للغاية: يمكن اعتبار النطاق بمثابة بوندر للقوالب والنماذج ووحدات التحكم للعمل معًا. يستخدم AngularJS النطاقات ، وكذلك المعلومات ونماذج البيانات ووحدات التحكم في القوالب. هذه يمكن أن تساعد في فصل النموذج والعرض ، ولكن تم تزامنها بالفعل! سوف تنعكس أي تغييرات على النموذج في الرأي على الفور ؛ سوف تنعكس أي تغييرات على العرض في النموذج على الفور.
للحصول على فهم أكثر تعمقا لنطاق AngularJS ، يرجى الرجوع إلى وثائق نطاق AngularJS.
امتحان
"طريقة AngularJS" تجعل من السهل جدًا اختبار الرمز أثناء التطوير. دعنا نلقي نظرة على اختبار الوحدة التالي الذي تمت إضافته حديثًا لوحدة التحكم:
اختبار/وحدة/وحدات التحكم spec.js:
وصف ('Controllers' ، function () {وصف ('phonelistctrl' ، function () {it ('يجب إنشاء نموذج "هواتف" مع 3 هواتف' ، function () {var scope = {} ، ctrl = new phonelistctrl (scope) ؛يتحقق هذا الاختبار من وجود ثلاثة سجلات في مجموعة الهاتف المحمول لدينا (لا حاجة لفهم البرنامج النصي للاختبار في الوقت الحالي). يوضح هذا المثال مدى سهولة إنشاء اختبار وحدة لرمز AngularJS. نظرًا لأن الاختبار جزء أساسي من تطوير البرمجيات ، فإننا نجعل من السهل إنشاء اختبارات في AngularJS لتشجيع المطورين على كتابة المزيد منهم.
عند كتابة الاختبارات ، يميل مطورو AngularJS إلى استخدام بناء الجملة في إطار التنمية القائمة على سلوك الياسمين (BBD). على الرغم من أن AngularJS لا تجبرك على استخدام الياسمين ، إلا أن جميع الاختبارات التي أجريناها في البرنامج التعليمي مكتوبة في الياسمين. يمكنك الحصول على المعرفة ذات الصلة على الصفحة الرئيسية الرسمية في ياسمين أو على ويكي ياسمين.
تم تكوين المشاريع المستندة إلى AngularJS لاستخدام JStestDriver لتشغيل اختبارات الوحدة. يمكنك إجراء الاختبار مثل هذا:
على محطة منفصلة ، أدخل دليل Angular-Phonecat وقم بتشغيله.
افتح نافذة متصفح جديدة وانتقل إلى http: // localhost: 9876 ؛
حدد التقاط هذا المتصفح في الوضع الصارم.
في هذا الوقت ، يمكنك ترك نافذتك بمفردك ونسيانها. ستقوم JStestDriver بإكمال الاختبار وإخراج النتائج إلى المحطة الخاصة بك.
تشغيل ./scripts/test.sh لاختبار.
يجب أن ترى نتائج مماثلة لما يلي:
Chrome: Runner Reset..total 1 اختبارات (تم تمريرها: 1 ؛ فشل: 0 ؛ الأخطاء: 0) (2.00 مللي ثانية) Chrome 19.0.1084.36 Mac OS: Run 1 اختبارات (تم تمريرها: 1 ؛ فشل: 0 ؛ أخطاء 0) (2.00 مللي ثانية)
نعم! مرت الاختبار! أو لا ... ملاحظة: في حالة حدوث خطأ بعد إجراء الاختبار ، أغلق المتصفح والعودة إلى المحطة ثم أغلق البرنامج النصي ، ثم كرر الخطوات أعلاه.
يمارس
أضف ربط بيانات آخر لـ index.html. على سبيل المثال:
<p> إجمالي عدد الهواتف: {{phones.length}} </p>
قم بإنشاء خاصية نموذج بيانات جديدة وربطها بالقالب. على سبيل المثال:
$ scope.hello = "Hello ، World!"
قم بتحديث متصفحك وتأكد من "Hello ، World!" يظهر
قم بإنشاء جدول بسيط مع ايتراتور:
<Table> <tr> <th> رقم الصف </th> </tr> <tr ng-repeat = "i in [0 ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7]"> <td> {{i}} </td> </tr> </tabl>الآن دع I من تعبير نموذج البيانات يزداد بمقدار 1:
<Table> <tr> <th> رقم الصف </th> </tr> <tr ng-repeat = "i in [0 ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7]"> <td> {{i+1}} </td> </tr> </tabl>تأكد من تغيير TOBE (3) إلى TOBE (4) ثم تشغيل ./scripts/test.sh البرنامج النصي مرة أخرى
لخص
لديك الآن تطبيق ديناميكي للنموذج ، وعرض ، وفصل وحدة التحكم ، وأنت تختبر دائمًا. الآن ، يمكنك الانتقال إلى الخطوة 3 لإضافة وظيفة بحث النص الكامل إلى التطبيق.
ما سبق هو المعلومات التي تقوم بفرز قالب AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!