web-dev-qa-db-ja.com

複数の状態のデフォルトビューを設定するAngularJSui.router

angularアプリケーションに複数のビューがあります。現在、ビューを確立するためにui.routerの$stateProviderを使用しています。ただし、それぞれを繰り返す必要があるため、これは非常に面倒です。すべての状態でビューを繰り返すのではなく、すべての状態でデフォルトのビューを設定する方法はありますか？

$stateProvider
.state('default', {
    url: '/default',
    views:{
        view_1: {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        view_2: {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        view_3: {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    }
})
.state('changed_state', {
    url: '/changed_state',
    views:{
        view_1: {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        view_2: {
            templateUrl: 'changed_view2',
            controller: function($scope){}
        },
        view_3: {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    }
})

すべての状態のデフォルトビューを一度だけリストし、状態が変わるたびに変化するビューだけを変更する必要があります。つまり：

.state('default', {
    url: '/default',
    views:{
        view_1: {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        view_2: {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        view_3: {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    }
})
.state('changed_state', {
    url: '/changed_state',
    views:{
        view_2: {
            templateUrl: 'changed_view2',
            controller: function($scope){}
        }
    }
})

ありがとう

angularjsangular-ui-routerstate
14
Tui Popenoe

まさにそのことは、UI-Routerアーキテクチャにすでに存在しています。

ネストされた状態とネストされたビュー

スーパーベース状態を宣言するだけです（例：'root'）。初期化を回避するために抽象化することもできますが、そうする必要はありません。そして、この状態はすべてのデフォルトビューを定義します。子の状態または孫の状態は、次のデフォルトのいずれかを置き換えることができます。

root状態

 .state('root', {
    // url: '/default', - no url needed at all, but could be
    abstract: true
    views:{
        '' : { templateUrl: 'layout.html'},

        'view_1@root': {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        'view_2@root': {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        'view_3@root': {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    });

上で見ることができるのは、ルート状態がindex.thml <div ui-view=""></div>に独自のテンプレート（レイアウトテンプレート）を挿入していることです。

'' : { templateUrl: 'layout.html'},

したがって、layout.html内のすべての名前付きビューは、現在デフォルトのビューで埋めることができます。絶対名前を使用する必要があります（以下を参照） ）

'view_1@root': { // this will inject into the layout.html of current root state

いくつかの興味深い点。 URLは使用しないため、すべての子状態で独自の状態を定義できます。抽象を使用します...しかし、それは必須ではありません。

子の状態-これは親から利益を得る方法です

.state('changed_state', {
    parent: 'root'           // this way we profit from parent
    url: '/changed_state',
    views:{
        view_2: {
            templateUrl: 'changed_view2',
            controller: function($scope){}
        },
        // HERE all other views are unchanged

また、以下を確認してください。

複数の名前付きビュー

そして

ビュー名-相対名と絶対名

ネーミングをもっと理解するために'view_1@root'（小さな引用）

舞台裏では、すべてのビューにviewname@statenameのスキームに従った絶対名が割り当てられます。ここで、viewnameはビューディレクティブで使用される名前です。州名は州の絶対名です。例： contact.item。ビュー名を絶対構文で記述することもできます。

28
Radim Köhler