angularjs - 大型 AngularJS 应用程序 - 多种 UI 布局

Question

我刚开始学习AngularJS。路由器使得将单个 View (dom 元素)与部分交换变得非常简单。在我的情况下，我可能有 20 个左右的屏幕，其“全尺寸”布局替换整个屏幕减去公共(public)顶部标题，如下所示:



这工作正常。但是，我的应用程序需要不止一种布局!如果我打开一些记录，它可能有一个包含约 20 个链接的动态子菜单，其中单击每个链接只能交换右侧面板。当然，我只想获取这个动态子菜单一次。



也许打开其他东西可能会有完全不同的布局(有自己的子菜单 - 可能是水平的)。

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

我在这里发现了一个类似(尽管可能没有那么复杂)的问题，但没有答案:
Multiple layouts with Angular

Answer 1

您所描述的是嵌套 View ，默认路由器不支持。 AngularJs 有一个非常流行的第三方模块，叫做 UI-Router。这确实支持您的要求(以及更多，具有非常好的文档)。

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

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

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

我们定义一个状态叫做personal:

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

然后我们定义人员的子状态(您可以查看的人员列表):

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

除此之外，我们可以定义更多的 child (当你点击一个名字时，这个人的详细信息):

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

请注意，您可以导航到不同的人，并且只有 View 的那一部分会发生变化，而父状态保持不变。