为多个状态设置默认视图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架构中已经存在:

嵌套状态和嵌套视图

我们将宣布一个超级基础状态(例如'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.您还可以选择以绝对语法编写视图名称.