0

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およびそれが役立つシナリオをいくつか提供していただけますか?

4

2 に答える 2

2

長所：

1. URL の抽象化

を使用することによる最も重要な利点ui-srefは、URL アドレスを抽象化した状態名に取り組むことです。

したがって、使用するときui-srefは、実際の URL から本当に独立しています。たとえば、それらを変更することを決定した場合 (これは本当に起こります ;))、.state構成を変更するだけで、アプリ内のすべての URL が変更されます。

このようにして、URL をローカライズすることもui-sref="contact"でき/contact-usます/kontaktiere。

2. パラメータ順序からの独立性

もう 1 つは、いくつかのパラメーターを URL に渡す必要がある場合 (たとえば、URL 定義がusers/:userId/albums/:albumId)、パラメーターの順序を覚えたり気にしたりする必要はなく、オブジェクトを使用するだけです。

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

3. href 属性防止のための補間されていない値

それ以外は、他の回答が指摘したように、href直接使用すると、アプリのライフサイクルに、ブラウザが見る瞬間があります<a href="{{ sth }}">-Angularはまだ式を補間していません-そのようなリンクをクリックした場合d のようなものを指してみてくださいhttp://example.com/%7B%7B%20sth%20%7D%7D。 ng-href、ui-sref（そして最も顕著ng-srcな画像）は、ブラウザによって解釈されるものではないため、これが発生するのを防ぎます。

短所：

短所については、まだ遭遇したことがありません:)

于 2016-11-18T19:23:55.227 に答える
1

href (および ng-href) は、ブラウザーによって解釈される実際のリンクを生成し (外部 URL を含む任意の URL である可能性があります)、ui-sref は JavaScript によって処理されます。

于 2016-11-18T19:26:38.743 に答える