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

Question

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

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

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

Angular可以像这样处理多个布局吗？或者我真的需要为每种类型的布局构建单独的应用程序!？这种类型的东西在我使用的其他框架上相当简单,例如GWT(活动和地方绑定到URL),ExtJS等.

我在这里发现了一个类似的(虽然可能不那么复杂)但没有答案的问题: 使用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
      }
    });

请注意,您可以导航到不同的人,只有在父状态保持不变的情况下,视图的那一部分才会发生变化.