なぜ「抽象的な：真」状態にURLを与えるのですか？

Question

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

抽象的な状態を使用した唯一の時間は、空の文字列をURLとして使用しました。私は偶然、（子供の状態ではなく）抽象化された状態に移動しようとした場合、エラー：

Cannot transition to abstract state '[insertAbstractStateHere]'

編集：

「また、私は私の抽象状態（イオンの外）へのURLを割り当てて、まだネストされた状態のビューをレンダリングしようとすると、実験では、私が手大きなガチョウの卵。何も現れません。

上記引用文は偽です！私は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' 
     }); 
    }); 

明らかに私は間違っていました。だから私の新しい質問は：

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

Answer 1

抽象的な状態を使用する理由は、あなたのURLの一部をナビゲートできないときに定義をのままにしておくことです。

/home/index 
/home/contact 

しかし、あなたのデザインに何らかの理由で、このURLは無効でした（つまり、ページのための無目的）：

/home 

たとえば、次のようなURLスキームを持っていたと言います今度は、完全なURLを使用してこの状況の2つの状態を作成することができますが、/home/を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' 
    }) 

ちょうど親状態の内側に、私たちはその唯一の子であるテンプレートを割り当てることがわかりa ui-view。これにより、子どもたちがレンダリングされます（あなたのものが空白になっている可能性もあります）。

---

場合によっては、空白のURLで抽象的な状態を使用することがあります。この設定の最善の使用法は、保護者resolveが必要なときです。たとえば、状態のサブセットに特定のサーバーデータが必要な場合があります。そのため、同じ解決関数を各状態に入れるのではなく、空のURLの親を目的の解決方法で作成することができます。親がビュー用に使用していない階層コントローラが必要な場合にも便利です（これはなぜ必要なのかわかりませんが、それは妥当です）。

Answer 2

抽象的な状態を使用して、コントローラ/ページを再ロードしながらuiルーターでナビゲーションを有効にすることもできます。

Answer 3

.state('home', { 
     url: '/home', 
     abstract:true,       
     controller: "HomeController", 
     templateUrl:"path to your html"      
}) 
.state('home.list', { 
     url:"", 
     controller: "HomelistController", 
     templateUrl:"path to your html" 
})