角度UIルータ：ビューを入れ子にしないでURL（parent.child statesを使用）のみを継承します。

Question

UIルーターでparent.childという表記を使用して状態/ URLを継承したいとします。私はビューを継承したくない（または他のビューの中にビューを入れ子にする）、またはコントローラを継承したくない、単にURLを継承したい。私は 'ui.router'を依存関係として使用しています。

これは、ルータの例です：

$stateProvider 
.state('products', { 
    url: '/products', 
    templateUrl: 'view1.html', 
    controller: 'products#index' 
}) 

.state('products.show', { 
    url: '/:id',   
    templateUrl: 'view2.html', 
    controller: 'products#show' 
}) 

.state('products.buy', { 
    url: '/:id/:moreParams', 
    templateUrl: 'view3.html', 
    controller: 'products#buy' 
}) 

.state('products.sell', { 
    url: '/:id/:moreParams/:moreParams', 
    templateUrl: 'view4.html', 
    controller: 'products#sell' 
}); 

とコントローラは、次のとおりです。ここ

angular.module('productsModule', []) 

.controller('products#index', function($scope){ 
}) 
.controller('products#show', function($scope){ 
}) 
.controller('products#buy', function($scope){ 
}) 
.controller('products#sell', function($scope){ 
}) 

、すべてのビューが完全に異なっている、と私は巣に内部の任意のビューを望んでいません他のビュー。また、すべてのコントローラーも異なっており、コントローラーを継承したくない場合、それらはすべて異なる機能で別々です。

ここに私の期待している結果があります。私は何を達成したいことのURLになるので、URLを継承するだけに私を許可する角度である：

/products 
/products/:id 
/products/:id/:moreParams 
/products/:id/:moreParams/:moreParams 

（その後、上記のようそれぞれが、独自のビューとコントローラをURL持っている）

これまでのところ、それはです私の研究では、parentState.childStateを使ったこのような継承は、ネストされたビューを望むとき（それは私が望むものではないので、URLを再利用したいだけです）と言い始めています。

私の回避策は、products_showのようなルータのURLを作成することです。すなわち、ドットの代わりにアンダースコアを使用するため、継承されたものではなく新しい独立したURLとして扱われます。私はこれが最良のアイデアかどうかは分かりません。ほとんどの場合、それは完璧に機能しますが、醜いと思われるからです。

ドットで処理できない場合は、おそらくproducts_showを使用してください。アイデア？

Answer 1

これは、ネストされた状態を記述する方法です：

$stateProvider 
.state('products', { 
    url: '/products', 
    templateUrl: 'view1.html', 
    controller: 'products#index' 
}) 

.state('products.show', { 
    parent:'products', 
    url: '/:id',   
    templateUrl: 'view2.html', 
    controller: 'products#show' 
}) 

Answer 2

あなたがそれぞれの意見を入れ子にすることなく、ルートの間の親子関係を持つことができます。ビューの絶対ターゲットを指定することでそれを達成できます。このように：、したがって、あなたは基本的にあなたのメインのindex.htmlに無名のui-view内部ビューをレンダリングするために、UI-ルータを言っていることをやって、親ビューをオーバーライドすることによって

$stateProvider 
.state('products', { 
    url: '/products', 
    templateUrl: 'view1.html', 
    controller: 'products#index' 
}) 

.state('products.show', { 
    url: '/:id', 
    views: {'@': { 
     templateUrl: 'view2.html', 
     controller: 'products#show' 
    }} 
}) 

.state('products.buy', { 
    url: '/:id/:moreParams', 
    views: {'@': { 
     templateUrl: 'view3.html', 
     controller: 'products#buy' 
    }} 
}) 

.state('products.sell', { 
    url: '/:id/:moreParams/:moreParams', 
    views: {'@': { 
     templateUrl: 'view4.html', 
     controller: 'products#sell' 
    }} 
}); 

。親ビューのテンプレートでui-viewを検索する代わりに。

これがなぜ機能するかを理解するには、ui-routerが経路の表示場所を決定する方法を理解する必要があります。したがって、たとえば、あなたが行うとき：それは親の内部の無名のUIビューを探すことになります

.state('parent.child', { 
    url: '/:id', 
    views: {'@parent': { 
     templateUrl: 'child-view.html', 
     controller: 'ChildCtrl' 
    }} 
}) 

：

.state('parent.child', { 
    url: '/:id', 
    templateUrl: 'child-view.html', 
    controller: 'ChildCtrl' 
}) 

UI-ルータは、デフォルトではのようなものにこれを翻訳しますテンプレートを表示し、内部で子ビューのテンプレートをレンダリングします。 あなたはまた同じように、経路の1つの以上のビューを指定することができます。この場合

.state('parent.child', { 
    url: '/:id', 
    views: { 
     '@parent': { 
     templateUrl: 'child-view.html', 
     controller: 'ChildCtrl' 
     }, 
     'sidebar@parent': { 
     templateUrl: 'child-view-sidebar.html', 
     controller: 'ChildViewSidebarCtrl' 
     } 
    } 
}) 

、child-view.htmlは、親ビューの無名のui-view前と同じように内部でレンダリングされます。さらに、親ビューのテンプレートでui-view="sidebar"を探し、child-view-sidebar.htmlを内部にレンダリングします。この強力なviewsオプションとどのようにui-router docs