ui-sref 的优缺点是什么？答案

【问题标题】：What are the pros and cons of ui-sref?ui-sref 的优缺点是什么？
【发布时间】：2016-11-19 03:44:41
【问题描述】：

我开始使用 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 的优缺点以及它有用的场景？

【问题讨论】：

如果你想使用 href 那就使用 ng-href

标签： angularjs angularjs-directive ui-sref

【解决方案1】：

优点：

1。 url抽象

使用ui-sref 最重要的好处是您可以处理状态名称，它是对 url 地址的一些抽象。

所以当使用ui-sref 时，你真的独立于实际的网址，例如如果您决定更改它们（相信我，确实发生了；））您只需更改 .state 配置并更改应用中的所有 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）可以防止这种情况发生，因为它们不会被浏览器解释。

缺点：

至于缺点 - 我还没有遇到过:)

【讨论】：

【解决方案2】：

href（以及 ng-href）生成一个由浏览器解释的实际链接（它可以是任何 URL，甚至是外部 URL）并且 ui-sref 由 javascript 处理。

【讨论】：