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

Question

我在一个 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){}
        }
    }
})

谢谢

Answer 1

UI-路由器架构中已经存在的确切内容：

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 中的所有命名视图现在都可以用默认视图填充，我们只需要使用绝对命名 (见下文）

'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'(小引用)

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

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

Set Default View for multiple states AngularJS ui.router

state

angularjs

angular-ui-router

Nested States & Nested Views

Multiple Named Views

View Names - Relative vs. Absolute Names