На этом этапе мы улучшим, как наше приложение получает данные.
Пожалуйста, сбросьте рабочий каталог:
GIT Checkout -f Step -11
Последнее улучшение нашего приложения - определить пользовательскую службу, представляющую спокойного клиента. С этим клиентом мы можем проще отправлять запросы XHR, не заботясь о базовой службе $ HTTP (API, HTTP -методы и URL -адреса).
Наиболее важные различия между шагом 9 и шагом 10 перечислены ниже. Вы можете увидеть полную разницу в GitHub.
шаблон
Индивидуальные услуги определены в приложении/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 ('телефоны/: phoneid.json', {}, {Query: {method: 'get', params: {phoneId: 'телефоны'}, isarray: true}});});Мы используем API модуля для регистрации пользовательской службы с помощью фабричного метода. Мы передаем имя телефона и заводские функции. Заводские функции и конструкторы контроллера похожи, и они оба объявляют службы зависимостей через параметры функций. Телефонная служба заявляет, что это зависит от ресурсной службы $.
Служба ресурсов $ позволяет вам создать Restful Client всего за несколько строк кода. Наше приложение использует этот клиент, чтобы заменить базовую службу $ HTTP.
app/js/app.js
... angular.module ('phonecat', ['phonecatfilters', 'phonecatservices']) ...Нам нужно добавить PhoneCatservices в массив зависимостей PhoneCat.
Контроллер
Рефактор основной сервис $ HTTP и поместив ее в новый сервисный телефон, мы можем значительно упростить субподтроллеры (Phonelistctrl и Phonedetailctrl). Ресурс $ AngularJS более подходит для взаимодействия с источниками данных RESTFUL, чем $ HTTP. И теперь нам легче понять, что делает код контроллера.
app/js/controllers.js
... function phonelistctrl ($ scope, телефон) {$ scope.phones = phone.query (); $ scope.orderprop = 'age';} // phonelistctrl. $ inject = ['$ scope', 'phone']; function phonedetail }); $ scope.setimage = function (imageurl) {$ scope.mainimageurl = imageurl; }} // phnedetailctrl. $ Inject = ['$ scope', '$ routeparams', 'phone'];Обратите внимание, что в Phonelistctrl мы поместили:
$ http.get ('телефоны/телефоны.Изменить на:
$ scope.phones = phone.query ();
Мы используем это простое заявление, чтобы запросить все мобильные телефоны.
Еще одна вещь, которую нужно отметить, заключается в том, что в приведенном выше коде при вызове метода телефонной службы мы не выполняем никаких функций обратного вызова. Хотя это, кажется, возвращается синхронно, это совсем не так. Что возвращается синхронно, так это «будущее» - объект, который будет заполнен данными, когда XHR вернется соответствующим образом. Учитывая привязку данных AngularJS, мы можем использовать будущее и связать его с нашим шаблоном. Затем наше представление будет автоматически обновляться, когда данные поступят.
Иногда, полагаясь исключительно на будущие объекты и привязку данных, недостаточно для удовлетворения наших потребностей, поэтому в этих случаях нам нужно добавить функцию обратного вызова для обработки ответа сервера. Контроллер PhnedetailCtrl является объяснением, установив MainimageUrl в функции обратного вызова.
тест
Измените наши модульные тесты, чтобы убедиться, что наша новая служба инициирует HTTP -запросы и обрабатывает их, как и ожидалось. Тест также проверяет, правильно ли наши контроллеры работают со службой.
Служба ресурсов $ улучшает объект, полученный путем добавления обновлений и удаления ресурсов. Если мы намерены использовать подборочный сочетание, наш тест потерпит неудачу, потому что тестовое значение не будет точно эквивалентно ответу. Чтобы решить эту проблему, нам нужно использовать недавно определенный матч -маттер. Когда маттер Toequaldata сравнивает два объекта, он только учитывает свойства объекта и игнорирует все методы.
тест/единица/Controllersspec.js:
Опишите ('Phonecat Controllers', function () {ofeeach (function () {this.addmatchers ({toecoaldata: function (weding) {return angular.equals (this.actual, weard);}});}); до учета (модуль ('phonecatservices'); $ httpbackend; $ rootscope. $ new (); Ожидайте (Scope.phones). $ httpbackend, ctrl, xyzphonedata = function () {return {name: 'phone xyz', images: ['image/url1.png', 'image/url2.png']}}; _ $ httpackend_; Detail 'function () {wears (scope.phone) .toequaldata ({});Выполнить ./scripts/test.sh для запуска теста, и вы должны увидеть следующий вывод:
Chrome: Runner Reset ...... Всего 4 тестов (прошло: 4; сбой: 0; ошибки: 0) (3,00 мс) Chrome 19.0.1084.36 Mac OS: запустить 4 теста (пропущенное: 4; сбой: 0; ошибки 0) (3,00 мс)
Суммировать
Завершенный! Вы создали веб -приложение за довольно короткое время. В последней главе мы упомянем, что мы должны делать дальше.
Выше приведено информация, разбирающая Angularjs Res и индивидуальные услуги. Мы будем продолжать добавлять соответствующую информацию в будущем. Я надеюсь, что это может помочь всем научиться Angularjs!