なぜ "abstract: true "の状態にurlをつけるのか？

質問

Ionic の scaffolding をより理解するために今日 ui-router をいじっていたのですが、1つ気づいたのは、抽象化された状態の "tabs" に url を与えていることでした。

抽象化された状態を使用したことがあるのは、URL として空の文字列を使用したときだけで、抽象化された状態 (子状態ではなく) に誤って移動しようとすると、エラーが発生することに気がつきました。

抽象化された状態 '[insertAbstractStateHere]' に移行することができません。

を編集してください。

"さらに、実験では、（Ionicの外で）私の抽象的な状態にURLを割り当て、まだ入れ子の状態のビューをレンダリングしようとすると、私は大きなガチョウの卵を取得します。まったく何も表示されません。"

上記の引用文は誤りです! で再度試したところ プランカー で再度試したところ、ネストした状態が表示されました。

 angular.module('routingExperiments', ['ui.router'])
      .config(function($urlRouterProvider, $stateProvider) {

    $stateProvider

      .state('abstractExperiment', {
        abstract: true,
        url: '', //<--- seems as if any string can go here.
        templateUrl: 'abstractExperiment.html'
      })
      .state('abstractExperiment.test1', {
        url: '/test1',
        templateUrl: 'abstractTest1.html'
      });
  });

どうやら私は確かに間違っていたようです。そこで新たに質問です。

抽象的な状態を採用する際に、空の文字列ではなく、名前の付いた状態を使用する理由はありますか、それとも単なるスタイルの選択ですか?

どのように解決するのですか?

抽象的な状態を使用する理由は、定義された状態を維持するためです。 ドライ を維持するためです。例えば、以下のようなURLスキームを持っていたとします。

/home/index
/home/contact

しかし、あなたのデザインにおける何らかの理由で、このurlは無効でした（つまり、ページとしての目的がありません）。

/home

さて、この状況に対して、完全な URL を持つ 2 つの状態を作成することもできますが、その場合、次のように記述することになります。 /home/ を2回書くことになり、記述が少し複雑になります。代わりに、ホームという抽象的な親を作成し、他の2つの状態をその子にするのがベストです（ui-router docsの場合）。

$stateProvider
    .state('parent', {
        url: '/home',
        abstract: true,
        template: '<ui-view/>'
    })
    .state('parent.index', {
        url: '/index',
        templateUrl: 'index.html'
    })
    .state('parent.contact', {
        url: '/contact',
        templateUrl: 'contact.html'
    })

親状態の内部で、唯一の子であるテンプレートに ui-view . これにより、子が確実にレンダリングされます (そして、あなたのものが空白で表示される理由かもしれません)。

時々、空白のURLを持つ抽象的な状態が使用されていることに気づくかもしれません。この設定の最も良い使い道は、親の resolve . たとえば、状態のサブセットに対して特定のサーバデータを要求することがあります。そのため、同じ resolve 関数を各ステートに配置するのではなく、 必要な resolve を持つ空白の url 親を作成することができます。また、階層化されたコントローラで、親がビューを使用しない場合にも便利です (なぜそうしたいのかはわかりませんが、もっともな話です)。