في هذه الخطوة ، سنحسن الطريقة التي يحصل بها تطبيقنا على البيانات.
يرجى إعادة تعيين دليل العمل:
git checkout -f step -11
التحسن الأخير في تطبيقنا هو تحديد خدمة مخصصة تمثل العميل المريح. مع هذا العميل ، يمكننا إرسال طلبات XHR بطريقة أسهل دون الاهتمام بخدمة HTTP $ الأساسية (أساليب API ، HTTP ، وعنوان URL).
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 9 والخطوة 10 أدناه. يمكنك رؤية الفرق الكامل في Github.
نموذج
يتم تعريف الخدمات المخصصة في App/JS/Services ، لذلك نحتاج إلى تقديم هذا الملف في قالب التخطيط. بالإضافة إلى ذلك ، نحتاج أيضًا إلى تحميل ملف AngularJS-Resource.js ، والذي يحتوي على وحدة Ngresource وخدمة الموارد $ فيه. سوف نستخدمها لاحقًا:
app/index.html
... <script src = "js/services.js"> </script> <script src = "lib/Angular/Angular-resource.js"> </script> ...
يخدم
APP/JS/SERVICES.JS
angular.module ('phonecatservices' ، ['ngresource']). Factory ('phone' ، function ($ resource) {return $ resource ('' phons/: phoneid.json '، {} ، {query: {method:' get '، params: {phoneid:' phones '} ، isarray: true}}) ؛}) ؛نستخدم وحدة API للوحدة لتسجيل خدمة مخصصة من خلال طريقة المصنع. نمر في اسم الهاتف والوظائف في المصنع. تشبه وظائف المصنع ومقدمي وحدة التحكم ، وكلاهما يعلن خدمات التبعية من خلال معلمات الوظيفة. تعلن خدمة الهاتف أن ذلك يعتمد على خدمة الموارد $.
تتيح لك خدمة الموارد $ إنشاء عميل مريح في بضعة أسطر من التعليمات البرمجية. يستخدم تطبيقنا هذا العميل لاستبدال خدمة HTTP $ الأساسية.
APP/JS/APP.JS
... angular.module ('phonecat' ، ['phonecatfilters' ، 'phonecatservices']) ...نحن بحاجة إلى إضافة صوتيات إلى صفيف التبعية phonecat.
وحدة تحكم
من خلال إعادة إنشاء خدمة HTTP $ الأساسية ووضعها في هاتف خدمة جديد ، يمكننا تبسيط المرقلين الفرعيين بشكل كبير (Phonelistctrl و phonedetailctrl). يعد مورد AngularJS $ أكثر ملاءمة للتفاعل مع مصادر البيانات المريحة من HTTP $. والآن أصبح من الأسهل علينا أن نفهم ما يفعله رمز وحدة التحكم.
APP/JS/Controllers.JS
... وظيفة phonelistctrl (scope $ ، الهاتف) {$ scope.pons = phone.query () ؛ $ scope.orderprop = 'age' ؛} // phonelistctrl. $ enject = ['$ scope' ، 'phone'] }) ؛ $ scope.setImage = function (imageurl) {$ scope.mainimageurl = imageUrl ؛ }} // phonedetailctrl. $ enject = ['$ scope' ، '$ routeparams' ، 'phone'] ؛لاحظ أنه في phonelistctrl نضع:
$ http.get ('هواتف/هواتف.التغيير إلى:
$ scope.phones = phone.query () ؛
نستخدم هذا البيان البسيط للاستعلام عن جميع الهواتف المحمولة.
شيء آخر يجب الإشارة إليه هو أنه في الكود أعلاه ، عند استدعاء طريقة خدمة الهاتف هو أننا لا نمرر أي وظائف رد الاتصال. على الرغم من أن هذا يبدو أنه تم إرجاعه بشكل متزامن ، إلا أنه ليس على الإطلاق. ما يتم إرجاعه بشكل متزامن هو "مستقبل" - كائن ، سيتم ملؤه بالبيانات عندما يعود XHR وفقًا لذلك. بالنظر إلى ربط بيانات AngularJS ، يمكننا استخدام المستقبل وربطه بقالبنا. سيتم تحديث عرضنا تلقائيًا عند وصول البيانات.
في بعض الأحيان ، لا يكفي الاعتماد على الكائنات المستقبلية وربط البيانات فقط لتلبية احتياجاتنا ، لذلك في هذه الحالات ، نحتاج إلى إضافة وظيفة رد الاتصال للتعامل مع استجابة الخادم. وحدة تحكم phonedetailctrl هي شرح من خلال تعيين mainimageurl في وظيفة رد الاتصال.
امتحان
تعديل اختبارات الوحدة لدينا للتحقق من أن خدمتنا الجديدة تبدأ طلبات HTTP ومعالجتها كما هو متوقع. يتحقق الاختبار أيضًا مما إذا كانت وحدات التحكم الخاصة بنا تعمل بشكل صحيح مع الخدمة.
تعمل خدمة Resource $ على تعزيز الكائن الذي تم الحصول عليه عن طريق إضافة التحديثات وحذف الموارد. إذا كنا نعتزم استخدام مطابقة soequal ، فسوف يفشل اختبارنا لأن قيمة الاختبار لن تكون مكافئة تمامًا للاستجابة. لحل هذه المشكلة ، نحتاج إلى استخدام مطابقة Sequaldatajasmine التي تم تعريفها مؤخرًا. عندما يقارن مطابقة Tequaldata كائنين ، فإنه ينظر فقط إلى خصائص الكائن ويتجاهل جميع الطرق.
اختبار/وحدة/وحدات التحكم spec.js:
وصف ('' phonecat controllers '، function () {inteach (function () {this.addMatchers ({equaldata: function (متوقع) {return Angular.equals (this.actual ، متوقع) ؛}}) ؛}) ؛ $ httpbackend ؛ $ rootscope. $ new () ؛ {name: 'nexus s'} ، {name: 'motorola droid'}) ؛ xyzphonedata = function () {return {name: 'phone xyz' ، الصور: ['Image/url1.png' ، 'Image/url2.png']}} ؛ $ httpbackend.expectget ('phones/xyz.json'). توقع (الهاتف).تنفيذ ./scripts/test.sh لتشغيل الاختبار ، ويجب أن ترى الإخراج التالي:
Chrome: Runner Reset ...... إجمالي 4 اختبارات (تم تمريره: 4 ؛ فشل: 0 ؛ الأخطاء: 0) (3.00 مللي ثانية) Chrome 19.0.1084.36 Mac OS: Run 4 Tests (تم تمريره: 4 ؛ فشل: 0 ؛ أخطاء 0) (3.00 مللي ثانية)
لخص
مكتمل! لقد قمت بإنشاء تطبيق ويب في وقت قصير جدًا. في الفصل الأخير ، سوف نذكر ما يجب أن نفعله بعد ذلك.
ما سبق هو المعلومات التي تقوم بفرز AngularJS RES والخدمات المخصصة. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. آمل أن يساعد الجميع على تعلم AngularJS!