ui-sref的利弊是什么？

Question

我开始使用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时，您实际上与实际的urls无关，例如，如果您决定更改它们(相信我，这确实发生了)，您只需更改.state配置，应用程序中的所有urls就会改变。

通过这种方式，您还可以本地化您的urls，例如，在某些情况下，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的预防

除此之外，正如另一个答案所指出的那样，当你直接使用href时，你的应用生命周期中有一个时刻，浏览器看到的是<a href="{{ sth }}"> --角形还没有插入表达式--如果你点击这样的链接，它就会试图指向类似http://example.com/%7B%7B%20sth%20%7D%7D的东西。ng-href、ui-sref (最明显的是图像上的ng-src )防止了这种情况发生，因为它们不是被浏览器解释的东西。

缺点：

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