На этом шаге вы будете реализовать представление сведений о телефонах, которое будет отображаться, когда пользователь нажимает на телефон в списке телефона.
Пожалуйста, сбросьте рабочий каталог:
GIT Checkout -f Step -8
Теперь, когда вы нажимаете на телефон в списке, будет отображаться подробная информационная страница телефона.
Чтобы реализовать представление сведений о мобильном телефоне, мы будем использовать $ http для получения данных, а также добавим шаблон просмотра телефона. Html.
Наиболее важные различия между шагом 7 и шагом 8 перечислены ниже. Вы можете увидеть полную разницу в GitHub.
данные
В дополнение к телефону.json, приложение/ телефоны/ каталог также содержит файл JSON для каждой информации мобильного телефона.
App/телефоны/Nexus-S.Json (фрагмент образца)
{"Дополнительные функции": "контурное дисплей, ближние полевые коммуникации (NFC), ...", "Android": {"OS": "Android 2.3", "UI": "Android"}, ... "Images": ["Img/телефоны/Nexus-S.0.jpg", "Img/телефоны/телефоны/телефоны. «Img/Phones/nexus-S.2.jpg», «Img/Phones/nexus-S.3.jpg»], «Storage»: {«Flash»: «16384mb», «Ram»: «512MB»}}Каждый из этих файлов описывает различные свойства телефона, используя одну и ту же структуру данных. Мы отображаем эти данные в просмотре деталей телефона.
Контроллер
Мы используем услугу $ http для получения данных для расширения нашего Phonelistctrl. Это так же, как работает предыдущий контроллер списка телефонов.
app/js/controllers.js
Функция phnedetailCtrl ($ scope, $ routeparams, $ http) {$ http.get ('телефоны/' + $ routeparams.phoneId + '.json'). Успех (function (data) {$ scope.phone = data;});} // choneTailCtrl. $ inject = ['$ scope =}; '$ http'];Чтобы построить URL -адрес HTTP -запроса, нам необходимо извлечь $ routeparams.phoneId из текущего маршрута, предоставленного услугой маршрута $.
шаблон
Оригинальная линия TBD Placeholder в файле телефона detail.html была заменена списком и привязкой, которая составляет подробную информацию телефона. Обратите внимание, что здесь мы используем теги angularjs {{Expression}} и NgrePeat, чтобы отобразить модель данных в представлении.
App/Partials/Phone-detail.html
<img ng-src="{{phone.images[0]}}"><h1>{{phone.name}}</h1><p>{{phone.description}}</p><ul> <li ng-repeat="img in phone.images"> <img ng-src="{{img}}"> </li> </ul> <ul> <li> <pan> доступность и сети <dd> {{phone.additionalfeatures}} </dd> </li> </ul>тест
Давайте напишем новый модульный тест, который очень похож на тот, который мы написали для Phonelistctrl на шаге 5.
тест/единица/Controllersspec.js
... описать ('phnedetailCtrl', function () {var scope, $ httpbackend, ctrl; ofeeach (inject (function (_ $ httpbackend_, $ rootscope, $ routeparams, $ controller) {$ httpbackend = _ $ httpbackend_; $ httpbackend.expectget ('телефоны/xyz.json'). Ожидайте (Scope.phone) .tobeundefined ();Выполните скрипт ./scripts/test.sh для выполнения теста, вы должны увидеть следующий вывод:
Chrome: Runner Reset .... Итого 3 теста (пройденные: 3; сбой: 0; ошибки: 0) (5,00 мс) Chrome 19.0.1084.36 Mac OS: запустить 3 теста (пропущенные: 3; сбои: 0; ошибки 0) (5,00 мс)
В то же время мы также добавили сквозное тест, указывая на страницу сведений о телефонах Nexus и подтвердив, что глава страницы-«Nexus s».
тест/e2e/scenarios.js
... описать ('Подробная информация о телефонах', function () {ofeeach (function () {browser (). navigateto ('../../ app/index.html#/phones/nexus-s');}); it ('должен отображать страницу nexus-s', function () {wearning ('phone.name')).)Теперь вы можете освежить свой браузер и снова запустить сквозное тест, или вы можете запустить его на сервере AngularJS.
упражняться
Напишите тест с использованием AngularJS с сквозным тестовым API, чтобы проверить четыре миниатюры, которые мы отображаем на странице деталей Nexus.
Суммировать
Теперь, когда страница сведений о мобильном телефоне готова, на шаге 9 мы узнаем, как написать фильтр отображения.
Выше приведено информация о более AngularJs шаблонах. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!