大规模AngularJS应用程序 - 多个UI布局

Question

我刚刚开始学习AngularJS。路由器使单个视图（dom元素）与部分交换变得简单。在我的情况下，我可能有20个左右的屏幕，其中“全尺寸”布局取代整个屏幕减去公共顶部标题，如下所示：

这很好用。但是，我的应用程序需要多个布局！如果我打开一些记录，它可能有一个带有~20个链接的动态子菜单，点击每个链接应该只交换右侧面板。当然，我只想一次获取这个动态子菜单。

也许开放其他东西可能会有一个完全不同的布局（有自己的子菜单 - 可能是水平的）。

Angular可以像这样处理多个布局吗？或者我真的需要为每种类型的布局构建单独的应用程序！？在我使用的其他框架上，例如GWT（活动和地点绑定到URL），ExtJS等，这类事情相当简单。

我在这里发现了一个类似的（虽然可能不那么复杂）但没有回答的问题： Multiple layouts with Angular

Answer 1

您所描述的是嵌套视图，默认路由器不支持这些视图。 AngularJs有一个非常受欢迎的第三方模块，名为UI-Router，它确实支持您所要求的内容（还有更多，非常好的文档）。

可以在此处看到UI-Router执行您所描述的内容的演示：

http://plnkr.co/edit/3KgB5g?p=preview

UI-Router中的路由称为状态，每个状态可以具有父状态和子状态，允许您嵌套布局。在上面的示例中，您可以在app.js中看到这一点：

我们定义一个名为人员的州：

    .state('personnel', {
        url: "/personnel",
        templateUrl: "personnel.html"
    })

然后我们将人员状态定义为人员（您可以查看的人员列表）：

    .state('personnel.list', {
      url: '/list',
      templateUrl: 'personnel.list.html',
      controller: 'PersonnelCtrl'
    })

除此之外，我们可以定义更多的孩子（当你点击一个名字时，这个人的细节）：

    .state('personnel.list.person', {
      url: '/:id',
      templateUrl: 'personnel.list.person.html',
      controller: function($scope, $stateParams){
        $scope.id = $stateParams.id
      }
    });

请注意，您可以导航到不同的人，只有父状态保持不变时才会更改视图的那一部分。