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），您不需要 remember/care关于参数的顺序，只使用对象：

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

3。 href attr 预防的未插值

除此之外，正如另一个答案所指出的，当您直接使用 href 时，在您的应用程序的生命周期中有一个时刻浏览器看到的是 <a href="{{ sth }}"> - Angular 尚未插入表达式 - 如果您单击 link，它会尝试将您指向 http://example.com/%7B%7B%20sth%20%7D%7D 之类的内容。 ng-href、ui-sref（最明显的是图像上的 ng-src）阻止了这种情况的发生，因为浏览器无法解释它们。

缺点：

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

Answer 2

href（以及 ng-href）生成一个由浏览器解释的实际 link（它可以是任何 URL，甚至是外部的 URL）和ui-sref 由 javascript.

处理

ui-sref 的优缺点是什么？

What are the pros and cons of ui-sref?

angularjs

angularjs-directive

ui-sref

例子

问题

优点：

1。 url 抽象

2。独立于参数顺序

3。 href attr 预防的未插值

缺点：