为多个状态设置默认视图AngularJS ui.router

Question

我在角度应用程序中有多个视图。目前，我正在使用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){}
        }
    }
})

由于

Answer 1

正好在UI-Router架构中已经存在：

Nested States & Nested Views

我们将声明一个超级基本状态（例如'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 中的所有命名视图现在都可以填充默认视图，我们只需要使用绝对命名（参见下面的更多内容） < / p>

'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 

另请查看：

Multiple Named Views

和

View Names - Relative vs. Absolute Names

了解更多命名'view_1@root' （小引用）

  

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。