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

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

我只需要列出所有状态的默认视图一次，然后只更改随着每个状态更改而更改的视图。i、 e:

.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){}
        }
    }
})

---

感谢

用户界面路由器体系结构中已经存在的：

我们将只声明一个超级基态（例如

'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

它自己的模板-布局模板：

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

因此layout.html中的所有命名视图现在都可以用默认视图填充，我们只需要使用绝对命名（请参阅下面的更多内容）

还有一些更有趣的观点。我们不使用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 

同时检查以下各项：

及

要了解更多信息，请查看命名

_1@root“

（小引用）

在幕后，每个视图都会被分配一个绝对名称，该名称遵循

viewname@statename

，其中viewname是view指令中使用的名称，state name是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称

---

谢谢，反应很好。

.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