До сих пор мы использовали три набора данных мобильной записи с твердыми кодировками. Теперь мы используем AngularJS встроенный сервис $ http, чтобы получить больший набор данных мобильных записей. Мы будем использовать функцию инъекции зависимости AngularJS (DI), чтобы предоставить эту услугу AngularJS контроллеру PhonelistCtrl.
Пожалуйста, сбросьте рабочий каталог:
GIT Checkout -f Шаг -5
Обновите браузер, и теперь вы должны увидеть список из 20 телефонов.
Наиболее важные различия между шагом 4 и шагом 5 перечислены ниже. Вы можете увидеть полную разницу в GitHub.
данные
Файл App/Phones/Phones.json в вашем проекте - это набор данных, который хранит больший список телефонов в формате JSON.
Вот пример этого файла:
[{«Возраст»: 13, «id»: «Motorola-defy-with-motoblur», «Имя»: «Motorola Defy/U2122 с Motoblur/U2122», «Спрыть»: «Готовы ли вы ко всему, что жизнь бросает ваш путь?» ...}, ...]Контроллер
Мы используем Angularjs Service $ http в контроллере, чтобы инициировать HTTP -запрос на ваш веб -сервер, чтобы получить данные из файла App/phones/phones.json. $ http является лишь одной из многих встроенных услуг в AngularJS, которые могут обрабатывать общие операции некоторых веб-приложений. Angularjs может вводить эти услуги в любом месте, где они вам нужны.
Услуги управляются с помощью подсистемы зависимости AngularJS. Службы инъекции зависимостей могут сделать ваши веб -приложения хорошо созданными (например, разделение компонентов презентационного уровня, данных и управления) и слабо связанных (компонент не нуждается в решении задач зависимости между компонентами, все они обрабатываются подсистемой DI).
app/js/controllers.js
function phonelistctrl ($ scope, $ http) {$ http.get ('телефоны/телефоны. $ scope.orderprop = 'age';}$ http инициирует запрос на http get на веб -сервер и запрашивает телефон/телефоны. Сервер отвечает данными из файла JSON. (Этот ответ может быть сгенерирован динамически с сервера бэкэнд в режиме реального времени. Но для браузеров все они выглядят одинаково. Для простоты мы просто использовали файл JSON в учебном пособии.)
Сервис $ http использует успех для возврата ответа объекта] [ng. $ Q]. Когда асинхронный отклик наступает, эта функция ответа объекта используется для обработки данных ответа сервера и назначения данных модели данных с афету. Я заметил, что AngularJS автоматически обнаружит этот ответ JSON и был проанализирован для нас!
Чтобы использовать услуги AngularJS, вам нужно объявить название требуемой службы в качестве параметра в конструкторе контроллера, например:
Функция phonelistctrl ($ scope, $ http) {...}
Когда контроллер построен, инжектор зависимости AngularJS вводит эти услуги в ваш контроллер. Конечно, инжектор зависимости также будет обрабатывать любые переходные зависимости, которые могут существовать требуемые услуги (одна услуга обычно зависит от других услуг).
Обратите внимание, что имена параметров очень важны, потому что форсунки будут использовать их для поиска соответствующих зависимостей.
Привычка префикса $ '
Вы можете создать свой собственный сервис, и мы на самом деле изучим его на шаге 11. В качестве привычки именования, встроенные услуги AngularJS, методы обрезки и некоторые другие API-интерфейсы AngularJS используют префикс '$' перед именем. Не используйте префикс «$», чтобы назвать свои собственные услуги и модели, в противном случае могут возникнуть конфликты.
О сжатии JS
Поскольку AngularJs провозглашает имя службы зависимостей через имя параметра конструктора контроллера. Поэтому, если вы хотите сжать код JS контроллера PhonelistCtrl, все его параметры будут сжиматься одновременно. В настоящее время система впрыска зависимостей не будет правильно идентифицировать службу.
Чтобы преодолеть проблему, вызванную сжатием, просто назначьте массив, зависящий от идентификаторов обслуживания, $ inject в функции контроллера, как и последняя строка, прокомментированная:
Phonelistctrl. $ Inject = ['$ scope', '$ http'];
Другой метод также может быть использован для указания списка зависимостей и избежать задач сжатия - используйте массив JavaScript для построения контроллера: поместите услугу для введения в массив строк (представляющий имя зависимости), а последним элементом массива является функция метода контроллера:
var phonelistctrl = ['$ scope', '$ http', function ($ scope, $ http) { / * body constructor * /}];
Оба метода, упомянутые выше, могут отлично работать с любой функцией, которую могут вводить AngularJ. Какой метод выбрать полностью зависит от стиля программирования вашего проекта. Рекомендуется использовать метод массива.
тест
тест/единица/Controllerspec.js:
Поскольку мы сейчас используем инъекцию зависимостей, и наш контроллер также содержит много служб зависимостей, немного сложно построить тесты для наших контроллеров. Нам нужно использовать новые операции и предоставить некоторую псевдо реализации конструктору, включая $ http. Тем не менее, рекомендуемый метод (и даже проще) состоит в том, чтобы создать контроллер в тестовой среде, используя тот же метод, что и AngularJS в следующем сценарии:
Описать ('Phonecat Controllers', function () {descript ('phonelistctrl', function () {var scope, ctrl, $ httpbackend; первая (inject (function (_ $ httpbackend_, $ cootscope, $ controler) {$ httpbackend = _ $ httpbackend_; $ httpbackend.expectget ('телефоны/телефоны.Примечание. Поскольку мы загрузили Jasmine и Angular-Mock.js в тестовой среде, у нас есть два вспомогательных метода, модуль и инъекции, чтобы помочь нам получить и настроить инжектор.
Используя следующий метод, мы создаем контроллер в тестовой среде:
Мы используем метод Inject для инъекции $ rootscope, $ Controller и $ httpbackend Service в функцию Jasmine's Function. Все эти случаи из инжектора, но этот инжектор воссоздан внутри каждого теста. Это гарантирует, что каждый тест начинается с хорошо известной отправной точки и что каждый тест не зависит от других тестов.
Позвоните в $ rootscope. $ New (), чтобы создать новую область для нашего контроллера.
Функция phonelistctrl и только что созданная область применения передаются в качестве параметров для функции инъекционного контроллера $.
Поскольку наш текущий код использует службу $ http для получения данных списка телефонов в контроллере перед созданием подсказки phonelistctrl, мы должны сообщить наборе тестирования ожидания запроса от контроллера. Мы можем сделать это:
Введите сервис запроса $ httpbackend в нашу функцию перед обучением. Это псевдо-версия этой услуги, это помогает справиться со всеми запросами XHR и JSONP в среде продукта. Псевдо -версия услуги позволяет вам писать тесты без учета местных API и глобальных государств - любой может представлять собой кошмар для тестирования.
Используйте метод $ httpbackend.expectget, чтобы сообщить службе $ httpbackend, чтобы дождаться HTTP -запроса, и сообщите ему, как на него ответить. Обратите внимание, что ответ не будет выдан до тех пор, пока мы не вызовут метод $ httpbackend.flush.
Сейчас,
Это («должно создать модель« телефонов »с 2 телефонами, извлеченными из xhr ', function () {wearm (scope.phones) .tobeundefined (); $ httpbackend.flush (); ожидайте (scope.phones) .toequal ([{name:' nexus s '}, {name:' Motorola droid '});В браузере мы звоним в $ httpbackend.flush (), чтобы очистить (промывку) очередь запросов. Это позволит обещанию, возвращенному Сервисом $ HTTP (см. Здесь для того, что такое обещание) будет интерпретироваться как стандартный ответ.
Мы установили некоторые утверждения, чтобы убедиться, что модель данных мобильного телефона уже находится в сфере.
Наконец, мы подтвердим, что значение по умолчанию OrderProp установлено правильно:
It ('должен установить значение по умолчанию модели OrderProp', function () {wearm (scope.orderprop) .tobe ('age');});упражняться
Добавить {{телефоны | json}} привязка в конце index.html и соблюдайте список мобильных телефонов в формате JSON.
В контроллере PhonelistCtrl предварительно предварительно обрабатывается ответ HTTP, чтобы отображаться только первые пять списков телефона. Используйте следующий код в функции обратного вызова $ http:
$ scope.phones = data.splice (0, 5);
Суммировать
Теперь вы должны чувствовать, насколько легко использовать услуги AngularJS (это все благодаря механизму впрыска зависимостей AngularJS), перейдите к шагу 6, и вы добавите миниатюры и ссылки на свой телефон.
Спасибо за вашу поддержку на этом веб -сайте и продолжайте обновлять связанные статьи в будущем!