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。网址抽象

使用ui-sref最重要的收获是你处理的是州名，这是对网址的一些抽象。

因此，当使用ui-sref时，您确实独立于实际网址，例如如果您决定更改它们（相信我，真的发生了;））您只需更改.state配置，并更改应用中的所有网址。

这样您也可以本地化您的网址，例如在某些情况下，ui-sref="contact"指向/contact-us而其他情况指向/kontaktiere。

2。独立于参数顺序

另一件事是，当您必须将多个参数传递到您的网址时（例如，网址定义为users/:userId/albums/:albumId），您不需要记住/关心参数＆＃39;订购并只使用该对象：

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

3。 href attr预防的未插入值

除此之外，正如另一个答案所指出的那样，当您直接使用href时，在您的应用生命周期中有一个时刻浏览器看到的是<a href="{{ sth }}"> - Angular hasn＆ ＃39; t插入表达式 - 如果您点击此类链接，请尝试指向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处理。