Генерация ссылок и вставка изображений в AngularJS

В этом уроке мы рассмотрим как добавить миниатюры для телефонов в списке телефонов.

Переключим состояние проекта на соответствующий шаг:

git checkout -f step-6

На этом шаге мы внесём такие изменения.


Данные

Обратите внимание, что файл app/phones/phones.json содержит для каждого телефона уникальный идентификатор и путь к миниатюре. Путь ссылается на папку app/img/phones/.
[
  {
    ...
    "id": "motorola-defy-with-motoblur",
    "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
    "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
    ...
  },
  ...
]

Шаблон

app/index.html:
...
        <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
            <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
            <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
          </li>
        </ul>
...


Чтобы динамически сгенерировать ссылки, которые в будущем будут вести на страницу с деталями телефона, мы тут используем в href уже хорошо нам знакомый синтаксис двойных фигурных скобок.

Мы также добавили изображение телефона рядом с каждой записью используя директиву ngSrc. Этой директивой мы говорим браузеру чтобы он не воспринимал буквально выражение {{ expression }} и не стал делать загрузку по адресу http://localhost:8000/app/{{phone.imageUrl}} как это бы произошло, если бы мы использовали <img src="{{phone.imageUrl}}">.



Тестирование

test/e2e/scenarios.js:
...
    it('should render phone specific links', function() {
      var query = element(by.model('query'));
      query.sendKeys('nexus');
      element.all(by.css('.phones li a')).first().click();
      browser.getLocationAbsUrl().then(function(url) {
        expect(url).toBe('/phones/nexus-s');
      });
    });
...

Мы добавили новый end-to-end тест, чтобы проверить, что приложение генерирует правильные ссылки. Тест можно запустить командой:

npm run protractor
Теги: