Каковы плюсы и минусы UI-SREF?

Question

Я начинаю работать над устаревшим проектом с использованием Angular 1.5 и он использует оба href а также ui-sref,

Я не вижу смысла использовать последний, особенно для верхнего меню.

пример

menu.html

<a ui-sref="expense-home">
    <i class="fa fa-money"></i>
    <translate>Expenses claims</translate>
</a>

app.route.js

.state('expense-home', {
    url: '/expenses',
    template: '<expenses-home></expenses-home>',
})

Вопрос

Не могли бы вы предоставить некоторые плюсы и минусы ui-sref а сценарии где это полезно?

Answer 1

Плюсы:

1. URL абстракция

Самый важный выигрыш от использования ui-sref это то, что вы работаете над именем штата, которое является абстракцией над адресом URL.

Так что при использовании ui-sref вы действительно независимы от реальных URL, и, например, если вы когда-нибудь решите изменить их (что, поверьте мне, действительно происходит;)), вы просто измените .state Конфигурация и все URL в вашем приложении меняются.

Таким образом, вы также можете локализовать свои URL, и, например, в некоторых случаях ui-sref="contact" указал на /contact-us в то время как в других /kontaktiere,

2. независимость от параметров порядка

Другое дело, что когда вам нужно передать несколько параметров в ваш URL (скажем, определение URL users/:userId/albums/:albumId) вам не нужно запоминать / заботиться о порядке параметров и просто использовать объект:

<a ui-sref="albumDetails({userId: user.id, albumId: album})">
  {{album.name}}
</a>

3. неинтерполируемое значение для предотвращения href attr

Кроме этого, как указал другой ответ, когда вы используете href непосредственно в жизненном цикле вашего приложения есть момент, когда браузер видит <a href="{{ sth }}"> - Angular еще не интерполировал выражение - если вы нажмете на такую ​​ссылку, он попытается указать вам что-то вроде http://example.com/%7B%7B%20sth%20%7D%7D, ng-href, ui-sref (и наиболее заметно ng-src на изображениях) предотвращает это, так как они не интерпретируются браузерами.

Минусы:

Что касается минусов - мне еще предстоит встретиться с одним:)

Answer 2

href (как и ng-href) генерирует фактическую ссылку, которая интерпретируется браузером (и это может быть любой URL, даже внешние URL), а ui-sref обрабатывается javascript.