web-dev-qa-db-ja.com

「抽象：true」状態にURLを指定する理由

私はIonicの足場をよりよく理解しようとして今日、ui-routerをいじっています。私が気づいたことの1つは、「タブ」の抽象化された状態にURLを与えることです。

抽象状態を使用したことがあるのは、空の文字列をURLとして使用したときだけであり、誤って抽象状態（子状態ではなく）に移動しようとした場合、エラーが発生します。

抽象状態「[insertAbstractStateHere]」に移行できません

編集：

「さらに、実験中にURLを抽象状態（Ionicの外部）に割り当てて、ネストされた状態ビューをレンダリングしようとすると、大きなガチョウの卵が表示されます。何も表示されません。」

上記の引用文は偽です！ Plunker でもう一度試したところ、ネストされた状態が表示されました。

 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'
      });
  });

どうやら私は実際にそれを間違っていました。だから私の新しい質問は：

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

angularjsionic-frameworkangular-ui-routerstateabstract
65
spb

抽象状態を使用する理由は、URLの一部がナビゲートできない場合に定義を維持するためですdry。たとえば、次のようなURLスキームがあるとします。

/home/index
/home/contact

ただし、デザインの何らかの理由で、このURLは無効でした（つまり、ページの目的がない）。

/home

完全なURLを使用して、この状況の2つの状態を作成することができますが、/home/を2回記述することになり、説明はもう少し複雑になります。代わりに、他の2つの状態が子であるホーム抽象親を作成することをお勧めします（UIルータードキュメントの場合）。

$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が必要な場合です。たとえば、州のサブセットに特定のサーバーデータが必要な場合があります。したがって、各状態に同じ解決関数を配置する代わりに、目的の解決を使用して空のURL親を作成できます。また、親がビューを使用しない階層コントローラーが必要な場合にも役立ちます（これが必要な理由はわかりませんが、もっともらしいです）。

99
Matt Way