حان الوقت لإعطاء صفحات الويب هذه بعض الميزات الديناميكية - استخدم AngularJS! لقد أضفنا اختبارًا لمكافحة وحدة التحكم لاحقًا.
هناك العديد من أنواع بنية التعليمات البرمجية للتطبيق. بالنسبة لتطبيقات AngularJS ، فإننا نشجع على استخدام وضع التحكم في عرض النموذج (MVC) لفصل التعليمات البرمجية ومخاوف منفصلة. مع وضع ذلك في الاعتبار ، نستخدم AngularJS لإضافة بعض النماذج ووجهات النظر ووحدات التحكم إلى تطبيقنا.
يرجى إعادة تعيين دليل العمل:
نسخة الكود كما يلي:
git checkout -f step -2
يحتوي تطبيقنا الآن على قائمة من ثلاثة هواتف.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 1 والخطوة 2 أدناه. يمكنك الذهاب إلى Github لرؤية الفرق الكامل.
وجهات النظر والقوالب
في 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>
<li ng-repeat = "الهاتف في الهواتف">
{{phone.name}}
<p> {{phone.snippet}} </p>
</li>
</ul>
</body>
</html>
لقد استبدلنا للتو قائمة الهواتف المحمولة المشفرة بشكل ثابت لأنه يمكننا تحقيق نفس التأثير باستخدام توجيه Ngrepeat وتعبيرات AngularJS ملفوفة في أقواس مجعد - {{phone.name}} و {{phone.snippet}}.
1. عبارة NG-REPEAT = "Phone in Phone" في علامة <li> عبارة عن جهاز angularjs. يخبر هذا التكرار AngularJS باستخدام علامة <li> الأولى كقالب لإنشاء عنصر <li> لكل هاتف في القائمة.
2. كما تعلمنا في الخطوة 0 ، كانت أقواس مجعد ملفوفة حول phone.name و phone.snippet تحديد ربط البيانات. على عكس الحسابات الثابتة ، فإن التعبير هنا هو في الواقع مرجع نموذج بيانات قمنا بتطبيقه ، وقمنا بتعيينها في وحدة تحكم PhonelistCtrl.
النماذج ووحدات التحكم
تتم تهيئة نموذج البيانات في وحدة تحكم PhonelistCtrl (فيما يلي وظيفة تحتوي على صفيف ، والكائنات المخزنة في الصفيف هي قائمة بيانات الهاتف المحمول):
APP/JS/Controller.js:
نسخة الكود كما يلي:
وظيفة phonelistctrl (نطاق $) {
$ scope.phones = [
{"الاسم": "Nexus S" ،
"Snippet": "Fast CURT MOUS MOUST مع Nexus S."} ،
{"الاسم": "Motorola Xoom ™ مع Wi-Fi" ،
"مقتطف": "الجيل التالي ، الجيل التالي اللوحي."} ،
{"الاسم": "Motorola Xoom ™" ،
"مقتطف": "الجيل التالي ، الجيل التالي اللوحي."}
] ؛
}
على الرغم من أن وحدة التحكم لا يبدو أنها تلعب دورًا مهمًا للغاية ، إلا أنها تلعب دورًا مهمًا هنا. بالنظر إلى سياق نموذج البيانات الخاص بنا ، تتيح لنا وحدة التحكم إنشاء ربط البيانات بين النموذج والعرض. هذه هي الطريقة التي نربط بها طبقة العرض والبيانات ومكونات المنطق:
1.
2. ترتبط بيانات الهاتف المحمول الآن بالنطاق (نطاق $) الذي تم حقنه في وظيفة وحدة التحكم الخاصة بنا. عند بدء تشغيل التطبيق ، يتم إنشاء نطاق جذر ، ونطاق وحدة التحكم هو خليفة نموذجي لنطاق الجذر. يكون نطاق وحدة التحكم هذه صالحة لربط البيانات داخل جميع علامات <body ng-controller = "phonelistctrl">.
تعد نظرية نطاق AngularJS مهمة للغاية: يمكن اعتبار النطاق بمثابة بوندر للقوالب والنماذج ووحدات التحكم للعمل معًا. يستخدم AngularJS النطاقات ، وكذلك المعلومات ونماذج البيانات ووحدات التحكم في القوالب. هذه يمكن أن تساعد في فصل النموذج والعرض ، ولكن تم تزامنها بالفعل! سوف تنعكس أي تغييرات على النموذج في الرأي على الفور ؛ سوف تنعكس أي تغييرات على العرض في النموذج على الفور.
للحصول على فهم أكثر تعمقا لنطاق AngularJS ، يرجى الرجوع إلى وثائق نطاق AngularJS.
امتحان
"طريقة AngularJS" تجعل من السهل جدًا اختبار الرمز أثناء التطوير. دعنا نلقي نظرة على اختبار الوحدة التالي الذي تمت إضافته حديثًا لوحدة التحكم:
اختبار/وحدة/وحدات التحكم spec.js:
نسخة الكود كما يلي:
وصف ('controllers' ، function () {
وصف ('phonelistctrl' ، function () {
(يجب إنشاء نموذج "هواتف" مع 3 هواتف "، وظيفة () {
VAR SCOPE = {} ،
ctrl = new phonelistctrl (Scope) ؛
توقع (scope.hom.length) .Tobe (3) ؛
}) ؛
}) ؛
}) ؛
يتحقق هذا الاختبار من وجود ثلاثة سجلات في مجموعة الهاتف المحمول لدينا (لا حاجة لفهم البرنامج النصي للاختبار في الوقت الحالي). يوضح هذا المثال مدى سهولة إنشاء اختبار وحدة لرمز AngularJS. نظرًا لأن الاختبار جزء أساسي من تطوير البرمجيات ، فإننا نجعل من السهل إنشاء اختبارات في AngularJS لتشجيع المطورين على كتابة المزيد منهم.
عند كتابة الاختبارات ، يميل مطورو AngularJS إلى استخدام بناء الجملة في إطار التنمية القائمة على سلوك الياسمين (BBD). على الرغم من أن AngularJS لا تجبرك على استخدام الياسمين ، إلا أن جميع الاختبارات التي أجريناها في البرنامج التعليمي مكتوبة في الياسمين. يمكنك الحصول على المعرفة ذات الصلة على الصفحة الرئيسية الرسمية في ياسمين أو على ويكي ياسمين.
تم تكوين المشاريع المستندة إلى AngularJS لاستخدام JStestDriver لتشغيل اختبارات الوحدة.
يمكنك إجراء الاختبار مثل هذا:
1. على محطة منفصلة ، أدخل دليل الزاوي-فونكات وقم بتشغيل.
2. افتح نافذة متصفح جديدة وانتقل إلى http: // localhost: 9876 ؛
3. حدد "التقاط هذا المتصفح في وضع صارم".
في هذا الوقت ، يمكنك ترك نافذتك بمفردك ونسيانها. ستقوم JStestDriver بإكمال الاختبار وإخراج النتائج إلى المحطة الخاصة بك.
4. تشغيل ./scripts/test.sh لاختبار.
يجب أن ترى نتائج مماثلة لما يلي:
نسخة الكود كما يلي:
Chrome: Runner Reset.
.
إجمالي اختبارات 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!" يظهر
قم بإنشاء جدول بسيط مع ايتراتور:
نسخة الكود كما يلي:
<griding>
<tr> <th> رقم الصف </th> </tr>
<tr ng-repeat = "i in [0 ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7]"> <td> {{i}} </td> </r>
</table>
الآن دع I من تعبير نموذج البيانات يزداد بمقدار 1:
نسخة الكود كما يلي:
<griding>
<tr> <th> رقم الصف </th> </tr>
<tr ng-repeat = "i in [0 ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7]"> <td> {{i+1}} </td> </r>
</table>
تأكد من تغيير TOBE (3) إلى TOBE (4) ثم تشغيل ./scripts/test.sh البرنامج النصي مرة أخرى
لخص
لديك الآن تطبيق ديناميكي للنموذج ، وعرض ، وفصل وحدة التحكم ، وأنت تختبر دائمًا. الآن ، يمكنك الانتقال إلى الخطوة 3 لإضافة وظيفة بحث النص الكامل إلى التطبيق.