На этом этапе вы добавите миниатюры и некоторые ссылки на список телефонов, но эти ссылки еще не сработают. Далее вы будете использовать эти ссылки для отображения дополнительной информации на вашем телефоне в категориях.
Пожалуйста, сбросьте рабочий каталог:
GIT Checkout -f Шаг -6
Теперь вы сможете увидеть изображения и ссылки вашего телефона в списке.
Наиболее важные различия между шагом 5 и шагом 6 перечислены ниже. Вы можете увидеть полную разницу в GitHub.
данные
Обратите внимание, что файл phones.json теперь содержит уникальный идентификатор и ссылку на изображение на каждый телефон. Эти URL теперь указывают на приложение/IMG/телефоны/каталог.
app/телефоны/телефоны.
[{... "id": "Motorola-defy-with-motoblur", "Imageurl": "Img/телефоны/Motorola-defy-with-motoblur.0.jpg", "name": "Motorola defy/u2122 с Motoblur/U2122", ...}, ...]шаблон
app/index.html
... <ul> <li ng-repeat = "Телефон в телефонах | Фильтр: Query | orderby: orderprop"> <a href = "#/phones/{{phone.id}}"> <img ng-src = "{{phone.imageurl}}}"> </a> <- href = "#/phones/{{phone.id}}"> {{phone.name}} </a> <p> {{phone.snippet}} </p> </li> </ul> ...Эти ссылки будут указывать на страницу деталей каждого телефона в будущем. Однако для создания этих ссылок мы используем привязку данных с двумя банками, с которыми мы уже знакомы в атрибуте HREF. На шаге 2 мы добавили привязку {{phone.name}} как содержимое элемента. На этом этапе мы используем привязку {{phone.id}} в атрибуте элемента.
Мы также добавляем картинки мобильного телефона в каждую запись, просто используем директиву NGSRC вместо тега атрибута <mg> SRC. Если мы используем только нормальный атрибут SRC для BIND (<img src = "{{phone.imageurl}}">), браузер напрямую интерпретирует Tag angularjs {{Expression}} и инициирует запрос на незаконную urlhttp: // localhost: 8000/app/{{phone.imageurl}. Потому что, когда браузер загружает страницу, он также просит загрузить изображение, AngularJS запускает компиляцию только при загрузке страницы - когда браузер просит загрузить изображение {{phone.imageurl}}, еще не был составлен! Этой ситуации будет избежать с помощью этой директивы NGSRC, и браузер будет использовать директиву NGSRC для предотвращения запроса на незаконное адрес.
тест
тест/e2e/scenarios.js
... это ('должен рендерировать конкретные ссылки на телефон', function () {input ('Query'). Enter ('nexus'); element ('. телефоны li a'). Click (); ожидаете (браузер (). location (). url ()). tobe ('/phones/nexus-s');});Мы добавили новый сквозной тест, чтобы убедиться, что приложение генерирует правильную ссылку для мобильного представления, а выше-наша реализация.
Теперь вы можете обновить браузер и использовать сквозной тестер для наблюдения за работающими тестами, или вы можете запустить их на сервере AngularJS.
упражняться
Измените директиву NG-SRC на нормальный атрибут SRC. Используя такие инструменты, как Firebug, Chrome Web Inspector, или поиск непосредственно в журнале доступа сервера, вы обнаружите, что ваше приложение отправляет нелегальный запрос по адресу /app/%7B%7Bphone.Imageurl%7D%7D (или /app/mable.imageurl}}).
Эта проблема заключается в том, что браузер немедленно отправит запрос на адрес URL -адреса, который еще не был составлен при встрече с тегом IMG. AngularJS начнет составлять выражение только после того, как страница загружена, чтобы получить правильный адрес URL -адреса изображения.
Суммировать
Теперь, когда вы добавили свои фотографии телефона и ссылки, перейдите к шагу 7, мы узнаем о шаблонах макетов AngularJS и о том, как AngularJs могут легко предоставить несколько просмотров для вашего приложения.
Выше приведено сборник информации о ссылках AngularJS и шаблонах изображений. Мы будем продолжать добавлять соответствующие знания в будущем. Спасибо за поддержку этого сайта!