angularjs - 带有 ui-router 的嵌套 Angular 状态中的不同布局？

我的应用程序有四个逻辑状态:

pages.list      (lists pages)
pages.create    (create a new page)
pages.item      (show a single page)
pages.item.edit (edit a single page)

状态 pages.list 和 pages.item 共享一个基本模板(传统的三列布局)，但状态 pages.create 和 pages.item.edit 具有完全不同的模板(整页编辑器)。

用 ui-router 表达这一点的最佳方式是什么？

最佳答案

我会说使用 abstract states 是要走的路。在 documentation 中，它们清楚地概述了好处，其中一些非常适合您的用例(强调我的):

有了这种理解，您的应用程序可以按如下方式构建:

步骤1

创建您的页面可以使用的两个模板。我们称它们为 three_columns.html 和 one_column.html 。对于 3 列布局，请确保相应地命名 ui-view:

<!-- three_columns snippet -->
...
<body>
    <div ui-view="left"></div>
    <div ui-view="middle"></div>
    <div ui-view="right"></div>
</body>

然后，一列模板:

<!-- one_column snippet -->
...
<body>
    <div ui-view></div>
</body>

第2步

声明两个 abstract states 。我们称它们为 oneCol 和 threeCols 。请注意，由于它们都声明了 url: '/pages' ，因此所有继承的子状态都将 /pages 自动添加到它们自己的 URL 中。

$stateProvider
  .state('oneCol', {
    abstract: true,
    url: '/pages',
    templateUrl: 'layouts/one_column.html'
}).state('threeCols', {
    abstract: true,
    url: '/pages',
    templateUrl: 'layouts/three_columns.html'
});

第 3 步

在上面声明扩展 abstract states 的状态。假设我们称它们为 list 、 create 、 view 和 edit 。在这里， threeCols.list 和 threeCols.view 必须声明 3 个 templateUrl ，每个命名为 ui-view 一个。另一方面，oneCol.create 和 oneCol.edit 会正常声明它们的未命名 templateUrl。我通常使用的约定是创建一个特定于每个状态的文件夹，因为它有利于组织 subview 模板:

$stateProvider
  .state('threeCols.list', {
    url: '/list',
    controller: 'ListCtrl',
    views: {
        'left': {
            templateUrl: 'modules/list/leftbar.html'
        },
        'middle': {
            templateUrl: 'modules/list/content.html'
        },
        'right': {
            templateUrl: 'modules/list/rightbar.html'
        }
    }
}).state('oneCol.create', {
    url: '/create',
    controller: 'CreateCtrl',
    templateUrl: 'modules/create/content.html'
}).state('threeCols.view', {
    url: '/view',
    controller: 'ViewCtrl',
    views: {
        'left': {
            templateUrl: 'modules/view/leftbar.html'
        },
        'middle': {
            templateUrl: 'modules/view/content.html'
        },
        'right': {
            templateUrl: 'modules/view/rightbar.html'
        }
    }
}).state('oneCol.edit', {
    url: '/edit',
    controller: 'EditCtrl',
    templateUrl: 'modules/edit/content.html'
});

有了这个，现在您的 URL 将看起来像您预期的那样: /pages/list 、 /pages/create 、 /pages/view 、 /pages/edit 。您还可以根据需要创建和重复使用模板。

关于angularjs - 带有 ui-router 的嵌套 Angular 状态中的不同布局？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24565007/