web-dev-qa-db-ja.com

Angular ui-router：URLを変更せずに状態を変更できますか？

ui-routerの複数のネストされたビュー機能は非常に素晴らしいです-アプリの1つのstateから簡単にジャンプできます別に。

URLを変更したい場合もあれば、変更しない場合もあります。 stateの概念はroutingとは別/オプションである必要があると思います。

これが私の意味を示すプランカーです これはui-routerドキュメントのプランカーの1つのフォークであり、2つのマイナーな変更を以下に示します。

.state('route1', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE2
        views: {
            "viewA": {
                template: "route1.viewA"
            },
            "viewB": {
                template: "route1.viewB"
            }
        }
    })
    .state('route2', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE1
        views: {
            "viewA": {
                template: "route2.viewA"
            },
            "viewB": {
                template: "route2.viewB"
            }
        }
    })

これは機能しているようです-URLは同じままです。繰り返しますが、ここでどれだけ冗長な作業が行われますか？これは承認済み/テスト済みの使用ですか？

状態からurlを省略できるといいでしょう。

更新：状態からURLを省略できます。 plunker

質問を更新：これは承認/テスト済みの使用ですか？

javascriptangularjsangular-uiangular-ui-router
29
Michael Lewis

絶対にURLなしの状態にすることができます。実際、どの州でもURLは必要ありません。それが設計の中核部分です。そうは言っても、上記のことはしません。

2つの状態に同じURLを持たせたい場合は、 abstract parent state を作成し、URLを割り当て、2つの状態をその子にします（どちらにもURLがありません）。

41
Nate Abele

他の回答に追加するために、複数の名前付きビューはURLを使用しません。

ドキュメントから：

ビューオブジェクトを定義すると、状態のtemplateUrl、template、およびtemplateProviderは無視されます。したがって、これらのビューの親レイアウトが必要な場合、テンプレートを含む抽象状態と、「ビュー」オブジェクトを含むレイアウト状態の下の子状態を定義できます。

名前付きビューを使用する理由は、テンプレートごとに複数のUIビュー、つまり1つの状態内で複数のビューを持つことができるようにするためです。この方法では、URLが変更されない場合でも、ルーティングを使用してサイトの一部を変更できます。また、独自のコントローラーとビューを持つコンポーネントであるため、異なるテンプレートでデータを再利用できます。

例付きの詳細な説明については、 i-routerを使用した角度ルーティング を参照してください。

0
James Drinkard